淄博 网站制作,公路建设项目可行性研究报告编制办法哪个网站查最新版,生物医药基地网站建设,如何搭建wordpress商城Selector选择器在AspNetCore中的用法
背景
项目编辑过程中会选择其所属的上级项目#xff0c;而上级项目在数据结构中是以ParentID的方式表达#xff0c;而非Project类型#xff0c;用户不会记录也不应该记录ID值#xff0c;因此应提供Selector项目下拉框供用户选择。
但…Selector选择器在AspNetCore中的用法
背景
项目编辑过程中会选择其所属的上级项目而上级项目在数据结构中是以ParentID的方式表达而非Project类型用户不会记录也不应该记录ID值因此应提供Selector项目下拉框供用户选择。
但是MVC的Razor页面绑定数据时绑定的时单个对象或者IEnumerate集合对象因此如果在页面上绑定项目列表则成为完成的难题。
绑定数据思路
首先声明一个Selector对象
select namecmdProjects idcmdProjects classform-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 TaskJsonResult GetDDL_List()
{ListProject? list await ProjectUtils.Instance.ToListAsync();ListSelectListItem listitem new ListSelectListItem();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());
});
