Обновить таблицу в foreach l oop с отфильтрованной моделью с Ajax (asp. net mvc c#)

Question

Я разработал asp.net MVC веб-приложение, в котором у меня есть таблица, показывающая некоторые элементы в модели.

• Теперь я могу отфильтровать его с помощью выпадающего списка, используя ajax
• Модель, которую я передаю в таблицу, является правильной (если я go для модели перед 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);
    }

Вот мой взгляд с изображением и раскрывающимся списком:

@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. Проверьте Рендеринг на стороне сервера здесь
   • По сути это означает, что @foreach (var item in Model) будет выполняться только на стороне сервера и не будет перезапущен, когда вы нажмете ajax вызов. Это произойдет только на полный пост.
2. В то время как на вашей странице вы запускаете событие раскрывающегося списка изменений, и происходит следующее:
   • ajax вызов ударил ваш контроллер
   • Данные находятся в процессе возвращается к функции успеха
   • Ваш success: function () выполняется.
   • Произошла новая запись в форме. Убедитесь, что вы ничего не сделали с возвращенными данными, которые были возвращены в success: function(). Вы только что отправили обратно в контроллер
3. После публикации вернулся полный просмотр, игнорируя любые изменения в раскрывающемся списке и в возвращенных данных.

Там Есть 2 решения вашей проблемы:

1. Сделайте полный пост и верните новый вид с правильными данными
2. Напишите еще javascript, чтобы изменить DOM внутри вашей функции успеха