视频网站开发流程,网站没有内容 备案能成功吗,宁波专业定制网站建设,网站开发风险分析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());
});
