How to fill a table in asp.net mvc4 with ajax?

Navigation
1

I'm doing a query to an api with asp.net, the query is well done and everything but I have a problem filling a table with ajax, I could not see the data you send me

here the code c # 

public async Task<List<Sto_TraerCaracterizacionRespuestas>> Buscar(string contexto)
    {
        var httpClient = new HttpClient();
        var json = await httpClient.GetStringAsync("http://localhost:53931/api/TraerCaracterizacionRespuestas?cod="+contexto+"&mod=nose");
        var lista = JsonConvert.DeserializeObject<List<Sto_TraerCaracterizacionRespuestas>>(json);

        return lista;
    }

here the ajax code 

<script>
function buscar() {
    var valorEscogido = $("#Sto_TipoAlertas_Preguntas_TipoAlerta_Pregunta_CodigoPRegunta1").val();
    @**$.post('@Url.Action("Buscar")/?contexto=' + valorEscogido);*@        
    $.ajax({
        url: "@Url.Action("Buscar")", 
        data: "contexto=" + valorEscogido, 
        type: "POST",
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",  
        success: function (data) {
            $("#contenido").html('');
            if (data != null && $.isArray(data)) {
                $.each(data, function (index, value) {
                    $("#contenido").append("<tr><td>" + value.CodigoInterno1 + "</td><td>" + value.Respuesta + "</td><td>" + value.Detalles+"</td></tr>");
                });
            }
        }
    });
}

the html of the view 

<h2>Index</h2>
<div class="row form-group">
<div class="col-md-10">@Html.DropDownListFor(x => x.Sto_TipoAlertas_Preguntas.TipoAlerta_Pregunta.CodigoPRegunta1, Model.Sto_TipoAlertas_Preguntas.ListarComboBoxAPI, "Seleccionar una", new { @class = "form-control" })</div>
</div>
<button onclick="buscar()">Buscar</button>


<table class="table table-bordered" id="contenido">

   <thead>
      <tr>
          <th>CodigoInterno</th>
          <th>Detalles</th>
          <th>Respuesta</th>
      </tr>
  </thead>
  <tbody></tbody>
</table>

Well, I'm new to Ajax and I do not know what I'll be doing wrong.

    
asked by Jhonny Luis 02.10.2017 в 17:49
source

1 answer

1

You are cleaning the contents of the entire table since id belongs to table itself.

Try assigning id="contenido" to tbody , not to the table: 

var data = [{CodigoInterno1 : "3333", Respuesta : "Hola", Detalles :"Detalles detalles detalles"}, {CodigoInterno1 : "3333", Respuesta : "Hola", Detalles :"Detalles detalles detalles"}];

$.each(data, function (index, value) {
    $("#contenido")
    .append("<tr><td>" + value.CodigoInterno1 + "</td><td>" + value.Respuesta + "</td><td>" + value.Detalles+"</td></tr>");
    });
       
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" >

   <thead>
      <tr>
          <th>CodigoInterno</th>
          <th>Detalles</th>
          <th>Respuesta</th>
      </tr>
  </thead>
  <tbody id="contenido"></tbody>
</table>
    
answered by 02.10.2017 в 19:04
there is an overload for 'OnKeyDownHandler' matches the delegate 'KeyEventHandler' Long of infinite length