Load table via AJAX

Question

Load table via AJAX

Asked 6 years, 3 months ago

Viewed 437 times

1

I’m trying to load the data from a table, via ajax, this way:

function buscaFornecedores(id) {
    var url = "/Produto/BuscaFornecedor";
    $.ajax({
        url: url,
        type: 'GET',
        data: { id: id},
        success: function (data) {
            $("#tabelaf").html(data);
        }
    });
}

And here’s how it’s in the controller:

  [HttpGet]
    public ActionResult BuscaFornecedor(int id)
    {
        var fornecedor_produto = db.ProdutosFornecedores.Where(p => p.ProdutoID == id).ToList();

        return Json(new { Resultado = fornecedor_produto });
    }

But it appears blank, what is missing in the code ?

Edit: The log console appears this way:

This is the code of the table:

<table class="table table-responsive table-hover" id="tabelaf">
                    <thead>
                        <tr>
                            <th>Fornecedores</th>
                            <th style="text-align:right"><a data-toggle="modal" data-target="#myModalAdd" title="Adicionar Novo Fornecedor" class="btn btn-info"><i class="fa fa-plus"></i></a></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model.ProdutosFornecedores)
                        {
                            <tr class="tr">
                                <td>@item.FornecedorProduto.Nome</td>
                                <td align="right">
                                    <a class="link-excluir" href="#" data-id="@item.Id" title="Excluir"><i class="fa fa-trash-o fa-lg"></i></a>&nbsp;
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>

I tried to use it, doing it this way:

 public JsonResult BuscaFornecedor(int id)
{
    var fornecedor_produto = db.ProdutosFornecedores.Where(p => p.ProdutoID == id).ToList();

    return Json(new { Resultado = fornecedor_produto });
}

But it didn’t work either. In common MVC it would use Jsonrequestbehavior.Allowget, but in MVC Core it is not possible.

EDIT:

I tried to pass this way too, but still the same problem:

public ActionResult BuscaFornecedor(int id)
    {
        var fornecedor_produto = db.ProdutosFornecedores.Where(p => p.ProdutoID == id).ToList();

        return new JsonResult(new { Resultado = fornecedor_produto });
    }

$("#tabelaf").html(data.resultado);?

– Barbetta

2018/08/07 at 17:49
Keep coming in white

– Mariana

2018/08/07 at 17:49
Is your (product vendor) being populated? If yes use: Return Json(vendor_product, Jsonrequestbehavior.Allowget);

– Netinho Santos

2018/08/07 at 17:58
put a console.log(data) within the function success to see in the browser console the data returned and how is the structure of the information for you to access.

– Thiago Magalhães

2018/08/07 at 18:02
@Netinhosantos did not work.

– Mariana

2018/08/07 at 18:05
@Thiagomagalhães made the console.log, and put the image with the returned data in the question.

– Mariana

2018/08/07 at 18:05
What exactly is your problem.? When you see the Edit of your question the data is being returned in ajax.

– Netinho Santos

2018/08/07 at 18:11
in that #tabelaf you want to return a table?

– Barbetta

2018/08/07 at 18:11
I put the code of the table so that you can understand. This @Barbetta want to return to her the data from ajax.

– Mariana

2018/08/07 at 18:13
First, if you look at your JSON, you will see that it is coming null in various fields. Second, either you use Razor, or Ajax on your table, the two things will get overhead. Third, you are receiving json and not html, use a for in javascript so that you print a table row for each item of the received json.

– Gustavo Santos

2018/08/08 at 12:26
I just need the data provider id and product id. the other fields will be removed, I believe the problem is not this

– Mariana

2018/08/08 at 12:27
@Gustavosantos you have some example to help me ?

– Mariana

2018/08/08 at 12:30

Show 7 more comments

1 answer

Browser other questions tagged ajax json asp.net-core

You are not signed in. Login or sign up in order to post.

by Barbetta • **5,587** points · Answer 1 · 2018-08-07T18:17:37+00:00

Turns out you’re returning a Json not the table html.

Change your code as follows:

function buscaFornecedores(id) {
    var url = "/Produto/BuscaFornecedor";
    $.ajax({
        url: url,
        type: 'GET',
        data: { id: id},
        success: function (data) {
            $("#tabelaf").html(data).promise().done(function () {
                $(".modal").modal('show');
            });
        }
    });
}


[HttpGet]
public ActionResult BuscaFornecedor(int id)
{
    var fornecedor_produto = db.ProdutosFornecedores.Where(p => p.ProdutoID == id).ToList();

    return PartialView("_SuaPartialView", fornecedor_produto);
}

Now will return the html with the information

An alternative with less code to load the information is to do so:

function buscaFornecedores(id) {
    $("#tabelaf").load("/Produto/BuscaFornecedor/" + id, function(){
        $(".modal").modal('show');
    });     
}