Selector选择器在AspNetCore中的用法

Selector选择器在AspNetCore中的用法

背景

项目编辑过程中会选择其所属的上级项目，而上级项目在数据结构中是以ParentID的方式表达，而非Project类型，用户不会记录也不应该记录ID值，因此应提供Selector项目下拉框供用户选择。

但是MVC的Razor页面绑定数据时绑定的时单个对象或者IEnumerate集合对象，因此，如果在页面上绑定项目列表则成为完成的难题。

绑定数据思路

首先声明一个Selector对象

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

使用Ajax进行后台加载数据，

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

上述指令为调用的后台函数为GetDDL_List，控制器为Projects，相当远转换为链接为

/Projects/GetDDL_List
1

整体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"));
                });
    });
1
2
3
4
5
6
7
8

在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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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')
            });
    });
1
2
3
4
5
6
7
8
9
10
11

选项选中后触发的事件

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