Обновление веб-сетки в ответ на изменение раскрывающегося списка - PullRequest
Новая
       18

Обновление веб-сетки в ответ на изменение раскрывающегося списка

0 голосов
/ 06 февраля 2019

Я совершенно новичок в ASP.NET MVC, и я надеюсь, что вы мне поможете.

У меня есть представление с двумя выпадающими списками и сеткой, сетка, которая должна быть заполнена на основе выбора выпадающего списка.,Сначала я хочу заполнить сетку, когда попадаю на страницу, основываясь на выборе по умолчанию из двух выпадающих списков.Это работает, но когда выбор изменяется, сетка не обновляется, несмотря на вызов через контроллер в 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)

с фактическим ответом.Это все хорошо, за исключением того, что веб-сетка не будет отображаться на странице, когда я впервые на нее попаду.Мне пришлось бы переключаться между выпадающими списками, чтобы это произошло.

Я ищу лучшие идеи, которые работают!Спасибо.

...