时间戳

首页 > 解决方案 > 重复部分视图 Jquery + MVC 5

javascript - 重复部分视图 Jquery + MVC 5

问题描述

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

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

标签： javascriptjqueryajaxasp.net-mvcpartial-views

解决方案

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

您可以执行以下操作

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

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

推荐阅读