MVC自動(dòng)綁定數(shù)組對(duì)象
當(dāng)一個(gè)對(duì)象中某個(gè)字段為一個(gè)List<object>列表時(shí)，我們將其顯示在頁(yè)面上，可以通過(guò)以下代碼進(jìn)行顯示
<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>
很多時(shí)候我們把它設(shè)置為隱藏域<input type=hidden> ，編輯完以后提交，服務(wù)器可以自動(dòng)綁定到模型相關(guān)的字段中去。以下圖片中展示的是錯(cuò)誤的方法
下面圖片中展示的是正確的綁定方法
注意，上面配圖只是提交了一個(gè)字段GrantTypes，如果你的后臺(tái)模型是強(qiáng)類(lèi)型，很多字段是必須提交的，那么在前臺(tái)要同時(shí)綁定其它字段才可以，類(lèi)似這樣的代碼：name="AllowedGrantTypes[@i].ClientId" name="AllowedGrantTypes[@i].XXX" 所有必須字段全綁定好后提交即可。
通常我們?cè)诤笈_(tái)還要對(duì)列表項(xiàng)進(jìn)行編輯操作，我們先是引入一個(gè)輔助下拉列表，通過(guò)對(duì)其的操作，從而對(duì)需要編輯的數(shù)據(jù)進(jìn)行加工，輔助下拉如下：
<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: '允許的授權(quán)類(lèi)型',
prompt: 'allowedgranttypes.',
labelPosition: 'top'
">
</li>
綁定后顯示效果如下：
我們通過(guò)對(duì)其下拉項(xiàng)的點(diǎn)選操作，對(duì)真正要操作的數(shù)據(jù)進(jìn)行加工，首先我們?cè)陧?yè)面中加入一個(gè)DIV，用來(lái)存放隱藏域列表。
<li>選中的列表：<p id="checkboxlist"></p></li>
然后對(duì)下拉進(jìn)行事件綁定，在它選中和取消選中的時(shí)候?qū)﹄[藏域重新綁定。
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+'');
}
}
});
對(duì)數(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(); //刪除并返回?cái)?shù)組的第一個(gè)元素
return _arr;
}
else if (i == length - 1) {
_arr.pop(); //刪除并返回?cái)?shù)組的最后一個(gè)元素
return _arr;
}
else {
_arr.splice(i, 1); //刪除下標(biāo)為i的元素
return _arr;
}
}
}
}
需要注意的地放是，上面的下拉是編輯輔助組件，它不是我們真正要提交的內(nèi)容，所以其ID與NAME一定不要和我們需要提交的名字沖突了，不然服務(wù)器同時(shí)收到 AllowedGrantTypes[0].xxx 與 AllowedGrantTypes[] ，它就不知道該怎么辦了，會(huì)導(dǎo)致綁定失敗。
OK，現(xiàn)在我們可以在選中與取消的時(shí)候，可以在頁(yè)面自動(dòng)添加我們需要的隱藏域了，提交到服務(wù)器后，模型就自動(dòng)綁上去了