Question

我对ASP.NET MVC完全陌生，希望您能为我提供帮助。

我有一个包含两个下拉列表和一个Webgrid的视图，该网格需要根据下拉列表选择进行填充。我最初希望基于两个下拉列表的默认选择来填充页面时填充网格。那是可行的，但是当选择更改时，尽管通过ajax调用了控制器并更新了模型，但网格仍未更新。

这是视图：

@using PopulateGrid.Models
@{
    Layout = null;
}

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

<div style="width: 1000px">
    <nav>
        @Html.Label("List 1: ")
        @Html.DropDownList("List1DropDown", TempData["List1"] as MultiSelectList, new { style = "min-width: 120px;max-width: 150px;margin-bottom:20px", onchange = "DropDownList1()" })
        @Html.Label("List 2: ")
        @Html.DropDownList("List2DropDown", TempData["List2"] as MultiSelectList, new { style = "min-width: 120px;max-width: 150px;margin-bottom:20px", onchange = "DropDownList2()" })
    </nav>
</div>

<div id="grid">
    @model IEnumerable<Model1>
    @{ var grid = new WebGrid(Model, canPage: true, rowsPerPage: 20, ajaxUpdateContainerId: "grid"); }

    @if (Model != null)
    {
        @grid.GetHtml(
            htmlAttributes: new {@id = "WebGrid", @class = "Grid"},
            columns: grid.Columns(
                grid.Column("Field1", "Field1"),
                grid.Column("Field2", "Field2")))
    }
</div>
<script type="text/javascript">

    function DropDownList1() {
        var selectedAsset = $("#List1DropDown :selected").val();
        if (selectedAsset != null) {
            $.ajax({
                url: '@Url.Action("UpdateList1", "Home")',
                data: { "id": selectedAsset },

                success: function (response) {
                    $('.grid').bind();
                });
            }
    }

    function DropDownList2() {
        var selectedEntity = $("#List2DropDown :selected").val();
        if (selectedEntity != null) {
            $.ajax({
                url: '@Url.Action("UpdateList2", "Home")',
                data: { "id": selectedEntity },

                success: function (response) {
                    $('.grid').bind();
            });
        }
    }
</script>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

这是控制器：

public ActionResult Index()
{
    PopulateDropdowns();
    return View("Index", new List<Model1> { new Model1 { Field1 = "Field1", Field2 = "Field2" } });
}

public ActionResult UpdateList1(string id)
{
    PopulateDropdowns();

    Debug.WriteLine("inside UpdateList1");
    return View("Index", new List<Model1> { new Model1 { Field1 = "Field1-list1", Field2 = "Field2-list1" } });
}

public ActionResult UpdateList2(string id)
{
    PopulateDropdowns();
    Debug.WriteLine("inside UpdateList2");
    return View("Index", new List<Model1> { new Model1 { Field1 = "Field1-list2", Field2 = "Field2-list2" } });
}

private void PopulateDropdowns()
{
    var list1 = new List<SelectListItem> { new SelectListItem { Text = "1", Value = "1" }, new SelectListItem { Text = "2", Value = "2" } };
    TempData["List1"] = new MultiSelectList(list1, "Value", "Text");

    var list2 = new List<SelectListItem> { new SelectListItem { Text = "a", Value = "a" }, new SelectListItem { Text = "b", Value = "b" } };
    TempData["List2"] = new MultiSelectList(list2, "Value", "Text");
    TempData.Keep();
}

和Model1：

public class Model1
{
    public string Field1 { get; set; }
    public string Field2 { get; set; }
}

因此，如所示，对UpdateList1和UpdateList2的调用发生了，但是网格内容在视图中保持不变。

如果我在视图中创建一个部分（例如

），则能够更新网格

<div class="my-grid">

，然后从UpdateList1和UpdateList2返回局部视图，其中ajax调用的响应执行

$('.my-grid').html(response)

带有实际响应。一切都很好，只不过我第一次登陆时不会在页面上显示webgrid。我将不得不通过下拉列表来强制发生这种情况。

我正在寻找可行的更好的主意！谢谢。

刷新webGrid以响应下拉列表更改

0 个答案: