ASP.NET MVC DropDownListFor答案

【问题标题】：ASP.NET MVC DropDownListForASP.NET MVC DropDownListFor
【发布时间】：2017-03-03 17:27:18
【问题描述】：

我的模型看起来像这样。它会在某个时候通过存储过程填充项目。

public class myModel
{
    public List<SelectListItem> myList { get; set; }
    public List<myModel> modelList { get; set; }
}

这是我的控制器。

[HttpGet]
public ActionResult getMyListItems()
{
    var viewModel = new myModel();
    viewModel.myList = viewModel.getMyList();
    viewModel.modelList = viewModel.getMyModelList();

    return View(viewModel);
}

到目前为止，这是我的观点。我正在构建一个下拉列表，以便用户可以过滤 modelList 的内容。有点像 SQL 查询中的 WHERE 子句。一旦用户选择项目并单击提交按钮，它会应用过滤器吗？或者在不需要按钮点击事件的情况下，在下拉菜单中实际选择了一个项目后会发生这种情况吗？

@model SWAM2.Models.EmployeeOfcSpecKnow
@using CommonCode.HtmlHelpers;

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <div class="editor-label">
        Filter by Column1
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => Model.Column1, Model.myList, new { style = "width:400px" })
        @Html.ValidationMessageFor(model => model.Column1)
    </div>

    <div class="toppad10">
        <input type="submit" value="Apply Filter" />
    </div>

    <table class="grayTable rowStriping">
        <thead>
            <tr>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
            </tr>
        </thead>

    <tbody>
        @foreach (var item in @Model.modelList)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Column1)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Column2)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Column3)
                </td>
            </tr>
        }
    </tbody>

    </table>
}

【问题讨论】：

标签： asp.net asp.net-mvc-4 drop-down-menu html.dropdownlistfor

【解决方案1】：

您可以通过使用下拉列表更改事件来实现它。

参考：

on select change event - Html.DropDownListFor

onchange event for html.dropdownlist

【讨论】：

【解决方案2】：

执行此操作的一种方法是在您的控制器上创建一个返回 PartialViewResult 的操作，然后使用 AJAX 异步调用该操作并获取新过滤的列表。因此，例如，您将创建这样的操作：

public PartialViewResult GetFilteredItems(string filter)
{
    var viewModel = new myModel();
    viewModel.myList = viewModel.getMyList();
    viewModel.modelList = viewModel.getMyModelList();
    viewModel.ApplyFilter(filter);
    return PartialView(viewModel);
}

并使用 javascript 调用它，我更喜欢 jQuery：

$("#dropDownListIdHere").change(function () {
    $.ajax({
    url: "@Url.Action("GetFilteredItems")",
    method: "GET",
    data: { filter: $(this).val() },
    success: function (result) {
            $("#listHolderIdHere").html(result);
        }
    })
});

请注意，使用此方法，您需要创建一个局部视图文件（如果您不想在控制器操作中指定名称，则命名为 GetFilteredItems），该文件将包含要使用过滤项呈现的表。您还需要为下拉列表和某种容器分配一个 ID，以便您将部分视图放入其中。

【讨论】：