时间戳

首页 > 解决方案 > 您可以使用@Html.DropDownList onchange 从控制器调用函数吗？

c# - 您可以使用@Html.DropDownList onchange 从控制器调用函数吗？

问题描述

说我有

 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 过滤列表，所以每次更改下拉列表时我都希望更新列表。这可能吗？

标签： c#asp.net-mvcentity-framework-core

解决方案

根据您的 ViewModel，在您的视图中，您将拥有如下内容：

@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>的嵌套s。<div>不要忘记包括引导程序。

希望这可以帮助。

推荐阅读