Repeat partial view Jquery + MVC 5

Question

I have a button that calls a partial view in which a table is loaded with all the categories of my system

 <input type="button" value="Cargar Categorias" id="btnCargarCategorias" />

This load is made through a partial view which I charge inside a <div>

 <div id="divTabla">

    </div>

My javascript code that loads the table by clicking on the button is the following...

 <script>
        $("#btnCargarCategorias").click(function () {

            $(this).prop("disabled", "disabled");

            var url = '@Url.Action("CargarCategorias","Categorias")';

            $.get(url).done(function (data) {
                $("#divTabla").append(data);
            })

            $("#btnCargarCategorias").removeAttr("disabled");
        })
    </script>

My action in the controller:

 public PartialViewResult CargarCategorias()
        {
            var categorias = db.Categorias.ToList();

            return PartialView("_TablaCategorias", categorias);
        }

The problem is that when you click the button a second time, it reloads the table below the first one and so on if I keep pressing the button ...

Expected behavior: regardless of the times you click on the button, the table is loaded in the same place

behavior obtained: each time the button is pressed, a new table is loaded below the previous one

What do I have to do in my code to obtain the desired behavior? I have to occupy Ajax technology? any help for me?

Answer 1

Because you did not clear you div before appending data into it.

You may do the following

$.get(url).done(function (data) {
    $("#divTabla").html(data);
})

Which will clear the inner body of the div, and then put the data inside.