如何使用 javascript 在 MVC 项目中加载视图，然后在其中加载部分视图？

Question

无论我做什么，我总是得到相反的顺序。我只想在 ajax 完成某个动作后刷新整个页面，然后简单地加载某个局部视图，这是我的尝试：

$.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: '@Url.Action("DeleteSensor", "PredefinedViews")',
                    data: JSON.stringify({ pviID: PredefineViewsItemID, pID: PredefineViewID }),
                    dataType: "json",
                    complete: function (result) {
                        location.reload(true);
                    },
                    success: function (result) {;
                        var urlShowSensors = "@Url.Action("ShowSensorNames", "PredefinedViews", new { predefinedViewID = "PredefID" })";
                        urlShowSensors = urlShowSensors.replace("PredefID", PredefineViewID);
                        $(divSensorNames).load(urlShowSensors);

在调试中，我看到它成功加载了局部视图，但它最终执行了 location.reload(true);最后 这反过来又让我有一个开放的视图，而没有开放的局部视图。 有没有办法让我先让它做 location.reload(true);然后加载我的部分视图？

更新！ 看来我从来没有将 document.ready 放在我的脚本标签中，这是我的整个脚本：

<script type="text/javascript">
    $(function () {
        $(".sensor-delete-table").on("click", function () {
            var divSensorNames = $("#sensorNames");
            var tr = $(this).parents('tr:first');
            var PredefineViewsItemID = tr.find("#PredefineViewsItemID").html();
            var PredefineViewID = tr.find("#PredefineViewID").html();
            var amount = parseInt($("[data-id='" + PredefineViewID + "']").text());
            var flag = confirm('@Html.Localize("deleteCheck")');
            var urlShowNewSensors = "@Url.Action("ShowSensorNames", "PredefinedViews", new { predefinedViewID = "PredefineViewID" })";
            urlShowNewSensors = urlShowNewSensors.replace("PredefineViewID", PredefineViewID);
            if (PredefineViewID != "" && flag) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: '@Url.Action("DeleteSensor", "PredefinedViews")',
                    data: JSON.stringify({ pviID: PredefineViewsItemID, pID: PredefineViewID }),
                    dataType: "json",
                    success: function (result) {
                        location.reload(true);
                    },
                    complete: function (result) {

                        var urlShowSensors = "@Url.Action("ShowSensorNames", "PredefinedViews", new { predefinedViewID = "PredefID" })";
                        urlShowSensors = urlShowSensors.replace("PredefID", PredefineViewID);
                        $(divSensorNames).load(urlShowSensors);
                    },

                });
            }
        });
    });
</script>

我认为我可以这样做，那么任何人都可以在这里更正我的代码吗？基本上，当我单击一个按钮时，它会在我的局部视图中删除表中的一行，然后它会转到一个控制器，从数据库中删除记录。现在，如果一切顺利，我想在我的主视图中刷新一个表，这就是为什么我坚持做一个 location.reload 然后我想加载我的部分视图，这就是为什么我需要在某个 div 上加载一个 url .

Answer 1

在 document.ready 函数中加载局部视图

并将 location.reload() 放入成功块

       $(document).ready(function()
       {
           var urlShowSensors = "@Url.Action("ShowSensorNames", "PredefinedViews",
                        new {                 predefinedViewID = "PredefID" })";
                    urlShowSensors = urlShowSensors.replace("PredefID",  
                                                PredefineViewID);
                    $(divSensorNames).load(urlShowSensors);
       });


       $(".sensor-delete-table").on("click", function () {
       $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '@Url.Action("DeleteSensor", "PredefinedViews")',
                data: JSON.stringify({ pviID: PredefineViewsItemID, pID: PredefineViewID
                    }   ),
                dataType: "json",
                success: function (result) {
                             location.reload(true);}});
       });

Answer 2

它完全按照您的编码进行。

您已覆盖的complete 和success 回调在您调用@Url.Action("DeleteSensor", "PredefinedViews") 时被调用。因此，您会被排除在外，就好像用户第一次访问该页面一样。在success callback 中加载部分视图没有意义，因为整个页面在complete callback 中重新加载。

据我了解，通过查看您的代码，您应该在 document ready 内调用 success 回调中的任何内容。

$(function(){
    var urlShowSensors = "@Url.Action("ShowSensorNames", "PredefinedViews", new { predefinedViewID = "PredefID" })";
    urlShowSensors = urlShowSensors.replace("PredefID", PredefineViewID);
    $(divSensorNames).load(urlShowSensors);
});

不确定您必须检查哪些条件。但您似乎没有使用来自success callback 中的ajax 调用的响应。所以上面应该可以工作。

更新 回答您的更新

既然您已经在使用分部视图并且您似乎了解它的概念，为什么不将表格也移动到分部视图并调用它，就像您尝试加载 ShowSensorNames 部分和注释掉location.reload(true); 代码。

首先创建一个局部视图（例如，将其命名为 MyTable.cshtml）并将您的表格 html 移动到其中并使用模型强输入它。

现在在您的视图中，表曾经是。执行以下操作

<div id="myTableContainer">
    @Html.Partial("MyTable", Model)
</div>

现在在您的控制器中创建一个名为 MyTable 的操作，该操作返回一个局部视图

public ActionResult MyTable()
{    
    var myTableDataModel = //retrieve table data

    return PartialView(myTableDataModel);
}

现在让我们来看看 javascript 代码

<script type="text/javascript">
$(function () {
    $(".sensor-delete-table").on("click", function () {
        var divSensorNames = $("#sensorNames");
        var tr = $(this).parents('tr:first');
        var PredefineViewsItemID = tr.find("#PredefineViewsItemID").html();
        var PredefineViewID = tr.find("#PredefineViewID").html();
        var amount = parseInt($("[data-id='" + PredefineViewID + "']").text());
        var flag = confirm('@Html.Localize("deleteCheck")');
        var urlShowNewSensors = "@Url.Action("ShowSensorNames", "PredefinedViews", new { predefinedViewID = "PredefineViewID" })";
        urlShowNewSensors = urlShowNewSensors.replace("PredefineViewID", PredefineViewID);
        if (PredefineViewID != "" && flag) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '@Url.Action("DeleteSensor", "PredefinedViews")',
                data: JSON.stringify({ pviID: PredefineViewsItemID, pID: PredefineViewID }),
                dataType: "json",
                success: function (result) {
                    ///location.reload(true);
                },
                complete: function (result) {

                    var urlShowSensors = '@Url.Action("ShowSensorNames", "PredefinedViews", new { predefinedViewID = "PredefID" })';
                    var urlMyTable = '@Url.Action("MyTable", "PredefinedViews")';
                    urlShowSensors = urlShowSensors.replace("PredefID", PredefineViewID);
                    $(divSensorNames).load(urlShowSensors);
                    $("#myTableContainer").load(urlMyTable);
                },

            });
        }
    });
});
</script>