JQuery&.Net droppable and save.
因為工作上需要把舊有的網頁改版，改成使用者可以自訂想要區塊的選擇方式，在.NET開發的選擇上可使用webpart的方式來達成，但個人認為webpart的前置作業會過於繁瑣...

我的作法是當使用者讀取首頁的時候，使用PlaceHolder的方式把包好不同功能的使用者自訂項(.ascx)丟進去，那至於使用者要如何設定要的區塊呈現，則是另外用一個頁面使用Jquery的droppable的方法來拖拉DIV，並儲存區塊間的順序到資料庫.....


-----------------------------------------------------------------
流程：
1. page load的時候從DB讀取該使用者的設定(若無則給予預設值)，並將設定值放在input hidden裡面讓前端jquery讀的到(hid_restrict, hidden1,hidden2 分別為預設該權限禁止區塊、左邊區塊值、右邊區塊值)

2. 前端將區塊開始分類：先讀hid_restrict把禁止讀取的區塊拿掉，然後再依序讀取L1與R1，並把區塊放進去。

$(document).ready(function() {
            //Restrict Area
            var hid_rest = document.getElementById("Hid_restrict");
            if (hid_rest.value.length > 0) {
                var strRest = hid_rest.value.split(",");
                for (var key in strRest) {
                    if (strRest[key].length > 0) {
                        $('#allCourse > div').filter('#' + strRest[key]).remove();
                    }
                }
            }
            //Left side value左邊區塊
            var hid1 = document.getElementById("Hidden1");

            if (hid1.value.length > 0) {
                var strL1 = hid1.value.split(",");
                for (var key in strL1) {
                    if (strL1[key].length > 0) {
                        $('#L1').append('

' + getCode(strL1[key]) + '

');
                        //remove div from allCouse
                        $('#allCourse > div').filter('#' + strL1[key]).remove();
                    }
                }
            }
            //Right side value右邊區塊
            var hid2 = document.getElementById("Hidden2");
            
            if (hid2.value.length > 0) {
                var strR1 = hid2.value.split(",");
                for (var key in strR1) {
                    if (strR1[key].length > 0) {
                        $('#R1').append('

' + getCode(strR1[key]) + '

');
                        //remove div from allCouse
                        $('#allCourse > div').filter('#' + strR1[key]).remove();
                    }
                }
            }
           
            
        });

3.當使用者拖拉完後按下儲存按鈕，利用javascript把L1和R1區域內的區塊值再存回hidden1和hidden2, 並且用一個LinkButton當觸發條件回傳至後端

function save() {
        var element_left = $('#L1 > .block');
        var element_right = $('#R1 > .block');
        var val1 = '';
        var val2 = '';
        for (var i = 0; i < element_left.length; i++) {
            val1 += element_left[i].id + ",";
        }
        document.getElementById("Hidden1").value = val1;
        for (var i = 0; i < element_right.length; i++) {
            val2 += element_right[i].id + ",";
        }
        document.getElementById("Hidden2").value = val2;
        __doPostBack('LinkButton1', '');

    }

Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LinkButton1.Click
   '這邊放DB Insert String, 將Hidden1 Hidden2的值存入資料庫
    End Sub