Selector選擇器在AspNetCore中的用法

背景

項(xiàng)目編輯過程中會(huì)選擇其所屬的上級(jí)項(xiàng)目，而上級(jí)項(xiàng)目在數(shù)據(jù)結(jié)構(gòu)中是以ParentID的方式表達(dá)，而非Project類型，用戶不會(huì)記錄也不應(yīng)該記錄ID值，因此應(yīng)提供Selector項(xiàng)目下拉框供用戶選擇。

但是MVC的Razor頁面綁定數(shù)據(jù)時(shí)綁定的時(shí)單個(gè)對(duì)象或者IEnumerate集合對(duì)象，因此，如果在頁面上綁定項(xiàng)目列表則成為完成的難題。

綁定數(shù)據(jù)思路

首先聲明一個(gè)Selector對(duì)象

<select name="cmdProjects" id="cmdProjects" class="form-control">
</select>

使用Ajax進(jìn)行后臺(tái)加載數(shù)據(jù)，

$.getJSON("@Url.Action("GetDDL_List", "Projects")"

上述指令為調(diào)用的后臺(tái)函數(shù)為GetDDL_List，控制器為Projects，相當(dāng)遠(yuǎn)轉(zhuǎn)換為鏈接為

/Projects/GetDDL_List

整體javascript代碼如下

 $(document).ready(function () {$("#cmdProjects").empty();$.getJSON("@Url.Action("GetDDL_List", "Projects")",function (data) {$.each(data, function (i, item) {$("<option></option>").val(item["value"]).text(item["text"]).appendTo($("#cmdProjects"));});});

在Controller中獲取數(shù)據(jù)

public async Task<JsonResult> GetDDL_List()
{List<Project>? list = await ProjectUtils.Instance.ToListAsync();List<SelectListItem> listitem = new List<SelectListItem>();foreach (var prj in list){SelectListItem item = new SelectListItem(){Text = prj.Name.ToString(),Value = prj.ID.ToString()};listitem.Add(item);}return Json(listitem);
}

指定上級(jí)節(jié)點(diǎn)在選擇器中的位置

javascript的.each方法中i變量表示索引，因此在.each之外定義臨時(shí)變量index,然后在循環(huán)體內(nèi)進(jìn)行判斷，最后將值賦值給選擇器

$(document).ready(function () {...$.each(data, function (i, item) {...if(item["value"]==@Model.ParentID){index = i;}});$("option").eq(index).prop("selected", 'selected')});});

選項(xiàng)選中后觸發(fā)的事件

$('#cmbProjects').on('change', function(){var selectedOption = $("#cmbProjects option:selected");$("#ParentID").val(selectedOption.val());
});