项目编辑过程中会选择其所属的上级项目,而上级项目在数据结构中是以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) {
$("").val(item["value"]).text(item["text"]).appendTo($("#cmdProjects"));
});
});
在Controller中获取数据
public async Task GetDDL_List()
{
List? list = await ProjectUtils.Instance.ToListAsync();
List listitem = new List();
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());
});