重复部分视图 Jquery + MVC 5

Question

我有一个调用局部视图的按钮，其中 table 加载了我系统的所有类别

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

这个加载是通过我在 <div>

中充电的局部视图完成的

 <div id="divTabla">

    </div>

我的 javascript 通过单击按钮加载 table 的代码如下...

 <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);
        }

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

预期行为：无论您点击按钮多少次，table 都会加载到同一位置

获得的行为：每次按下按钮时，都会在前一个

下方加载一个新的table

我必须在我的代码中做什么才能获得所需的行为？我要占用Ajax技术？对我有什么帮助吗？

Answer 1

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

您可以执行以下操作

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

里面会清空div的内部body，然后把数据放到里面。

重复部分视图 Jquery + MVC 5

Repeat partial view Jquery + MVC 5

javascript

ajax

asp.net-mvc

jquery

partial-views