Question

说我有

 public async Task<IActionResult> View()
        {
            ViewData["Employee"] = new SelectList(_userManager.Users.ToList(), "Id", "FullName");
            List<ScreenshotItem> screenshotItems = await _context.ScreenshotItems.ToListAsync();
            ScreenshotViewModel model = new ScreenshotViewModel();
            model.ScreenshotItems = screenshotItems;
            return View(model);
        }

然后我只显示图像：

@Html.DropDownList("Id", (SelectList) ViewBag.Employee, new {onchange = "View()"}))

@foreach (var ss in Model.ScreenshotItems)
{
    <div>
        <img src="@ss.Path" alt="@ss.Path"/>
        <label>@ss.EmployeeId</label>
    </div>
}

我要完成的工作是我想使用DropDownList过滤列表，因此在dropdownlist的每次更改中，我都希望更新列表。这可能吗？

Answer 1

根据您的ViewModel，在您的View中，您将看到以下内容：

@using Project.Path.To.Your.ScreenshotViewModel
@model ScreenshotViewModel


@{

List<SelectListItem> listItems = new List<SelectListItem>();
Model.ScreenshotItems.ToList().ForEach(x => {
    listItems.Add(new SelectListItem { Text = x.EmployeeName, Value = x.EmployeeId.ToString()   });
    });

    @Html.DropDownList("selectList", listItems, new { @onchange = "foo()" })

    <ul id="UList">
        @foreach (var i in Model.ScreenshotItems)
        {
            <li  tagValue="@i.EmployeeId">
                 <img src="@i.Path" alt="@i.Path"/>
                 <label>@i.EmployeeName</label>
            </li>
        }            
    </ul>
 }

，然后在该视图的底部，添加或捆绑此javascript代码：

    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        function foo() {
            var empName = $("select#selectList :selected").text();
            var empID = $("select#selectList :selected").val();
            //alert(empName);

            $('ul#UList').find('li').each(function (index, el) {
                //alert($(this).attr('tagValue'));
                $(this).attr('tagValue') == empID ? $(this).removeClass('hidden') : $(this).addClass('hidden');
            });
        }
    </script>

您将在需要的地方自定义此代码。例如，最好将部门ID用作'tagValue'属性，以便通过从下拉列表中选择部门名称来过滤属于特定部门的所有雇员。另外，您可以将<ul><li>标记更改为具有相同class属性的嵌套<div>。别忘了包含引导程序。

希望这会有所帮助。

您可以使用@ Html.DropDownList onchange从Controller调用函数吗？

1 个答案: