重复部分视图 Jquery + MVC 5答案

【问题标题】：Repeat partial view Jquery + MVC 5重复部分视图 Jquery + MVC 5
【发布时间】：2018-05-25 02:02:58
【问题描述】：

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

 <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技术吗？对我有什么帮助吗？

【问题讨论】：

不要追加。 $("#divTabla").html(data);
你的评论能说得清楚一点吗？你说我不应该在局部视图中附加表格？你建议附加在同一个主视图中吗？ @贾森
你说你不想重复。当您使用追加时，您正在添加到现有内容。因此，不要追加。
但是我应该怎么做才能让它不再附着呢？我应该采用什么方法？ @贾森
再次阅读我的第一条评论。

标签： javascript jquery ajax asp.net-mvc partial-views

【解决方案1】：

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

你可以这样做

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

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

【讨论】：

你不需要$("#divTabla").html(""); - 使用$("#divTabla").html(data); 替换已经存在的内容
@StephenMuecke 你说得对！谢谢指正。