Carrregar view table with JSON object

Question

I have the following code in my controller:

public JsonResult List(string nome){

    IList<ClienteDto> clientes = string.IsNullOrEmpty(nome)
        ? _repositoryCliente.Get()
    : _repositoryCliente.GetByName(nome);

    var model = Mapper.Map<IList<ClienteDto>, IList<ClienteViewModel>>(clientes);
    return Json(model, JsonRequestBehavior.AllowGet);
}

and this is my JS:

function Search(name) {
    $.ajax({
        url: "/Cliente/List/?nome=" + name,
        type: "POST",
        dataType: "json",
        success: function (clientes) {
            $("#tableClientes").empty();
            url: "/Cliente/Lister/model=" + clientes;
        },
    });
}

and here the view code:

<table class="table" id="tableClientes">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.ClienteId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Nome)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DataNascimento)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Telefone)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Situacao)
            </th>
        </tr>
    </thead>

    @foreach (var item in Model)
    {
    <tbody id="tbody">
        <tr id="[email protected]">
            <td>
                @Html.DisplayFor(modelItem => item.ClienteId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Nome)
            </td>
            <td>
                @item.DataNascimento.ToShortDateString()
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Email)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Telefone)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Situacao)
            </td>
            <td></td>
            <td>
                <a href="@Url.Action("Edit", "Cliente", new { id = @item.ClienteId })">
                    <span class="glyphicon glyphicon-edit" />
                </a>
                <i class="glyphicon glyphicon-trash" onclick="ModalRemove(@item.ClienteId);" />
            </td>
        </tr>
    </tbody>
    }
</table>

everything works perfectly, the search is done and returns a JSON object with the searched data, but I do not know how to update my table with this data.
How could I do that?

Answer 1

Dude, Voce has two options, or populates by the server (instead of Jsonresult Voce returns an Action Result and sends the data to the view). Or what more suitable is to create the table via jquery, in the function Success, Voce loops on top of the received information, in case clientes. In the simplest way possible, I’d look like this:

...
 success: function (clientes) {
            $("#tableClientes tbody").empty();
            var tbody = "<tbody>";
            tr = "";
            for (var index in clientes) {
              tr += "<td>" + clientes[index].ClienteId + "</td>";
              tr += "<td>" + clientes[index].Nome + "</td>";

            }
            $('#tableClientes tbody').append(tbody + tr);
        },
...