使用 Ajax 过滤模型更新 foreach 循环中的表（asp.net mvc c#）

Question

我开发了一个asp.net MVC 网络应用程序，其中有一个表格，其中显示了模型中的一些项目。

• 我现在可以使用 ajax 使用下拉列表对其进行过滤
• 我传递给表格的模型是正确的（如果我在 foreach 之前进入模型，由于过滤器，有 3 行而不是 10 行）

问题是表格没有改变，它总是将所有行显示为初始请求。

看起来它可以工作，但表格不会更新......

这是我的 jquery ajax 调用：

$("#Dropdown1Id").on('change', function () {
//console.log("onchange");
//console.log($("#Dropdown1Id").val());
var drpdown1 = $("#Dropdown1Id").val();
var submit = $("#submitButton");
    $.ajax({ // crea una chiamata AJAX
        data: { data: drpdown1 }, // prendi i dati del form in questo caso del primo dropdown
        type: "GET", // GET o POST
        url: "/Select/Filter", // li passa al controller
        success: function () { // se va con successo esegue il codice seguente
            submit.click();
            $("#frmId").submit();
        },
        error: function (error) {
            console.log("error")
        }
    });
});

这是我的控制器操作：

public ActionResult Filter(string data)
    {
        List<Card> cards = new List<Card>();
        ViewBag.stato = new SelectList(myApi.GetState(), "Name", "Name");

        if (data != null && data != "")
        {
            foreach (var card in model)
            {
                if (card.IdList == data || data == "")
                    cards.Add(card);
            }
            return View(cards);
        }
        return View(model);
    }

这是我对 daple 和下拉菜单的看法：

@using (Html.BeginForm(new { id = "frmId"}))
{
@Html.AntiForgeryToken()
<table id="tb2">
    <tr>
        <th>
            <h4> LIST : @Html.DropDownList("stato", null, new { @id = "Dropdown1Id" })</h4>
        </th>
        @*<th>
            <h4>ARCHVIED : @Html.DropDownList("closed", null, new { @id = "Dropdown2Id" })</h4>
        </th>*@
        <th>
            <input type="submit" value="Filter" class="btn btn-info" id="submitButton" />
        </th>
    </tr>
</table>

<br />

<div id="risultato"></div>

<table class="table" id="tb1">
    <tr>
        <th style="text-align:center">
            TRELLO'S CARDS LIST
        </th>
        <th>LIST</th>
        <th>ARCHVIED</th>
        <th>Expiration date</th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.IdList)
            </td>
            @if (item.Closed == "True")
            {
                <td>YES</td>
            }
            else
            {
                <td>NO</td>
            }

            @if (item.Due != null)
            {
                <td>
                    @Html.DisplayFor(modelItem => item.Due)
                </td>
            }
            else
            {
                <td>

                    Not Present
                </td>
            }
        </tr>

        idList.Add(item.Id);
    }
</table>

Answer 1

让我带你了解执行堆栈，你就会明白为什么：

1. 您的MVC 视图已加载。当视图返回到前端时，它已经是Html 格式。检查Server side rendering here
   • 基本上这意味着@foreach (var item in Model) 只会在服务器端执行，并且在您点击ajax 调用时不会重新运行。这只会发生在完整的帖子上。
2. 当您在页面中触发更改下拉事件时，会发生以下情况：
   • 一个 ajax 调用命中了你的控制器
   • 数据正在返回到成功函数
   • 你的success: function ()正在被执行。
   • 出现一个新的表单帖子。看到您没有对success: function() 中返回的返回数据做任何事情。你刚刚发回了控制器
3. 发布后，完整视图已返回，忽略下拉列表和返回数据中的任何更改。

您的问题有两种解决方案：

1. 撰写完整的帖子并返回包含正确数据的新视图
2. 再写一些 javascript 来更改 sucess 函数中的 DOM