Selector選擇器在AspNetCore中的用法

背景

項目編輯過程中會選擇其所屬的上級項目，而上級項目在數據結構中是以ParentID的方式表達，而非Project類型，用戶不會記錄也不應該記錄ID值，因此應提供Selector項目下拉框供用戶選擇。

但是MVC的Razor頁面綁定數據時綁定的時單個對象或者IEnumerate集合對象，因此，如果在頁面上綁定項目列表則成為完成的難題。

綁定數據思路

首先聲明一個Selector對象

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

使用Ajax進行后臺加載數據，

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

上述指令為調用的后臺函數為GetDDL_List，控制器為Projects，相當遠轉換為鏈接為

/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中獲取數據

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);
}

指定上級節(jié)點在選擇器中的位置

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

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

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

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