Update table in foreach loop with filtered model with Ajax (asp.net mvc c#)

Question

I've developed an asp.net MVC web app where I have a table that shows some items in a model.

• I can filter it now with a dropdown list using ajax
• The model that i pass to the table is correct (if i go to the model before the foreach there are 3 rows instead of 10 thanks to the filter)

The problem is that the table doesn't change, it always shows all the rows as the initial request.

It look like it works but the table won't update...

There's my jquery ajax call:

$("#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")
        }
    });
});

There's my controller action:

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);
    }

There's my view with the daple and the dropdown:

@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

Let me get you through the execution stack and you'll understand why:

1. Your MVC view is loaded. When the view is returned to the frontend it is already in Html format. Check Server side rendering here
   • Basically it means that @foreach (var item in Model) will only execute on the server side and will not re-run when you hit an ajax call. This will only happen on a full post.
2. While in your page you fire up change dropdown event and the following happens:
   • An ajax call hit your controller
   • Data are being returned to the success function
   • Your success: function () is being executed.
   • A new form post occurs. See that you didn't do anything with the return data that was returned in the success: function() . You just posted back to the controller
3. After the post, the full view has returned ignoring any changes in the dropdown and in the data returned.

There are 2 solutions for your problem:

1. Do a full post and return a new view with the proper data
2. Write some more javascript to change the DOM inside your sucess function