亚洲欧洲视频,三男玩一女摸吃奶,久久久久久久片,精品中文一区二区三区,美女在线国产,国产有码视频,亚洲激情五月

    當一個對象中某個字段為一個List<object>列表時，我們將其顯示在頁面上，可以通過以下代碼進行顯示

<li>顯示List<AllowedGrantTypes>列表：<div id="GrantTypes_List">
            @if (Model?.AllowedGrantTypes!=null)
            {
                int i=0;
                foreach (var item in Model.AllowedGrantTypes)
                { 
                    <input name="AllowedGrantTypes[@i].Id"  type="hidden" value="@item.Id" />
                    <input name="AllowedGrantTypes[@i].ClientId"  type="hidden" value="@item.ClientId" />
                    <input name="AllowedGrantTypes[@i].GrantType" type="checkbox" checked="checked" value="@item.GrantType" /> @Html.Raw(item.GrantType);
                    i+=1;
                }
            }
            </div>
        </li>

    很多時候我們把它設置為隱藏域<input type=hidden> ，編輯完以后提交，服務器可以自動綁定到模型相關的字段中去。以下圖片中展示的是錯誤的方法

下面圖片中展示的是正確的綁定方法

    注意，上面配圖只是提交了一個字段GrantTypes，如果你的后臺模型是強類型，很多字段是必須提交的，那么在前臺要同時綁定其它字段才可以，類似這樣的代碼：name="AllowedGrantTypes[@i].ClientId" name="AllowedGrantTypes[@i].XXX" 所有必須字段全綁定好后提交即可。

    通常我們在后臺還要對列表項進行編輯操作，我們先是引入一個輔助下拉列表，通過對其的操作，從而對需要編輯的數(shù)據(jù)進行加工，輔助下拉如下：

            <li>
				<input id="SelectedGrantTypes" name="SelectedGrantTypes" class="easyui-combobox" style="width:100%;" data-options="
                    url:'/XXXXX/SelectList?type=allowedgranttypes',
                    method:'get',
                    valueField:'name',
                    textField:'name',
                    value:[@{
                        for(int i=0;i<Model?.AllowedGrantTypes.Count;i++)
                        {
                            if(i==0)
                            {
                                      @Html.Raw(string.Format("'{0}'",Model.AllowedGrantTypes[i].GrantType));
                            }
                            else
                            {
                                      @Html.Raw(string.Format(",'{0}'",Model.AllowedGrantTypes[i].GrantType));
                            }
                        }
                      }],
                    multiple:true,
                    panelHeight:'auto',
                    label: '允許的授權類型',
                    prompt: 'allowedgranttypes.',
                    labelPosition: 'top'                 
                    ">
				
            </li>

綁定后顯示效果如下：

我們通過對其下拉項的點選操作，對真正要操作的數(shù)據(jù)進行加工，首先我們在頁面中加入一個DIV，用來存放隱藏域列表。

<li>選中的列表：<p id="checkboxlist"></p></li>

然后對下拉進行事件綁定，在它選中和取消選中的時候對隱藏域重新綁定。

            var AllowedGrantTypes = [];
            $('#SelectedGrantTypes').combobox({
	            onSelect: function(record){
                    var GrantType={};
                    GrantType.name=record.name;
                    GrantType.id=record.id;
                    if (AllowedGrantTypes.findIndex(item=>item.id==GrantType.id && item.name==GrantType.name) < 0) { 
                        AllowedGrantTypes.push(GrantType);
                    }
                    $("#checkboxlist").html('');
                    for (var i = 0; i < AllowedGrantTypes.length; i++) {
                        $("#checkboxlist").append('<input name="AllowedGrantTypes['+i+'].GrantType" checked="checked" type="checkbox"  value="'+AllowedGrantTypes[i].name+'"> '+AllowedGrantTypes[i].name+'');
                    }
                },
	            onUnselect: function(record){
                    var GrantType={};
                    GrantType.name=record.name;
                    GrantType.id=record.id;
                    if (AllowedGrantTypes.findIndex(item=>item.id==GrantType.id && item.name==GrantType.name) >=0) { 
                        removeAaary(AllowedGrantTypes, GrantType);
                    }
                    $("#checkboxlist").html('');
                    for (var i = 0; i < AllowedGrantTypes.length; i++) {
                        $("#checkboxlist").append('<input name="AllowedGrantTypes['+i+'].GrantType" checked="checked" type="checkbox"  value="'+AllowedGrantTypes[i].name+'"> '+AllowedGrantTypes[i].name+'');
                    }
                }
            });

對數(shù)組的操作需要的代碼：

            function removeAaary(_arr, _obj) {
                var length = _arr.length;
                for (var i = 0; i < length; i++) {
                    if (JSON.stringify(_arr[i]) == JSON.stringify(_obj)) {
                        if (i == 0) {
                            _arr.shift(); //刪除并返回數(shù)組的第一個元素
                            return _arr;
                        }
                        else if (i == length - 1) {
                            _arr.pop();  //刪除并返回數(shù)組的最后一個元素
                            return _arr;
                        }
                        else {
                            _arr.splice(i, 1); //刪除下標為i的元素
                            return _arr;
                        }
                    }
                }
            }

  需要注意的地放是，上面的下拉是編輯輔助組件，它不是我們真正要提交的內(nèi)容，所以其ID與NAME一定不要和我們需要提交的名字沖突了，不然服務器同時收到  AllowedGrantTypes[0].xxx 與 AllowedGrantTypes[] ，它就不知道該怎么辦了，會導致綁定失敗。

OK，現(xiàn)在我們可以在選中與取消的時候，可以在頁面自動添加我們需要的隱藏域了，提交到服務器后，模型就自動綁上去了