Load table from view with JSON object

Question

Load table from view with JSON object

Navigation

#1 by (1 votes)

1

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 is 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 fine, the search is done and returns a JSON object with the searched data, however I do not know how to update my table with this data. How could I do that?

javascript ajax json mvc razor

asked by anonymous 26.11.2015 / 17:56

1 answer

How to convert date at select time and return via Json Problems with CSS in an XHTML page

score 1 · Accepted Answer

Man, you have two options, or populate the server (in place of JsonResult you return an Action Result and send the data to the view). Or what is more telling is to create the table via jquery, in the success function, you loop over the information received, in the clientes case. In the simplest possible form, it would 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);
        },
...