Load a table dynamically with ajax

Question

I am trying to build a table by making a request to the server and populate it with the return.

The server return is correct, but when you enter the function(data), I realized he carries my entire page html, I tried to play the ajax right in the $(document).ready, and then use the shape below, using the load, however, neither are working.

$("#table_horde").Load(
     $.ajax({
         type: "POST",
         url: "/Horde/List/",
         success: function (data) {

             var cols = "";

             for (var i = 0; i < data.length; i++) {
                 cols += "<tr>";
                 cols += "<td>" + data[i].NomeHorda + "</td>";
                 cols += "<td>" + data[i].Limit + "</td>";
                 cols += "<td><a href='#' onclick='atualizar'(" + data[i].IdHorde + ")' data-target='#janelaHordaCadastro' data-toggle='modal'>Atualizar</a></td>";
                 cols += "<td><a href='#' onclick='excluir'(" + data[i].IdHorde + ")'>Excluir</a></td>";
                 cols += "</td>";
             }

             $("#table_horde tbody").empty();
             $("#table_horde tbody").append(cols);
             $("#qtdRegistro").html(data.length);
         },
         error: function (ex) {
             alert("Erro: " + ex.status);
         }
     })
);

Man Controller is as follows:

public ActionResult List() { 
    return View("List", ListinerHorde()); 
} 

private List<HordeList> ListinerHorde() {
  var list = new List<HordeList>();
  HordeRepository hr = new HordeRepository(); 

  foreach (var h in hr.FindAll()) {
   var model = new HordeList(); 
   model.NameHorde = h.NameHorde; 
   model.Limit = h.Limit; 
   list.Add(model); 
  } 

  return list; 
} 

See below the return image:

Answer 1

In his Controller you are returning a View, but in his Ajax you’re waiting for a list.

A solution would only be to return the list to the View, with this, create an Action to return the JSON. In this case I called ListaJson() just so you understand better, but can put the name you want.

public ActionResult ListaJson() { 
     var lista = ListinerHorde();
     return Json(lista , JsonRequestBehavior.AllowGet);
} 

Once done, just change your URL Ajax, in this way:

 url: "/Horde/ListaJson/",

Now, in case you want to return to View, you do not need to mount the table on the front end, but add the returned HTML, an example would be this:

$.ajax({
     type: "POST",
     url: "/Horde/List/",
     success: function (data) {
        //Coloque aqui o local onde a View deverá ocupar
        $("#table_horde").html(data);
     },
     error: function (ex) {
         alert("Erro: " + ex.status);
     }
});

Just remember to change the $("#table_horde").html(data); to the place where the View should occupy.