重复部分视图Jquery + MVC 5

Question

我有一个按钮，它调用一个局部视图，在该局部视图中，表中加载了系统的所有类别

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

此负载是通过我在<div>内部加载的局部视图进行的

 <div id="divTabla">

    </div>

我的通过单击按钮加载表格的javascript代码如下：

 <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>

我在控制器中的动作：

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

            return PartialView("_TablaCategorias", categorias);
        }

问题是，当您第二次单击该按钮时，它将重新加载第一个按钮下方的表格，依此类推，如果我一直按下该按钮...

预期的行为：无论您单击按钮多少次，表都将被加载到同一位置

获得的行为：每次按下该按钮，都会在前一个表下方加载一个新表

为了获得所需的行为，我必须在代码中做什么？ 我必须占领Ajax技术吗？ 对我有帮助吗？

Answer 1

因为您没有在将数据附加到div之前清除div。

您可以执行以下操作

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

这将清除div的内部主体，然后将数据放入其中。