Selector选择器在AspNetCore中的用法

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

指定上级节点在选择器中的位置

javascript的.each方法中i变量表示索引，因此在.each之外定义临时变量index,然后在循环体内进行判断，最后将值赋值给选择器

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

选项选中后触发的事件

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