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

无论我做什么，我都会接受相反的命令。 我只想在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）; 然后加载我的局部视图？

UPDATE！ 看来我从未在我的脚本标签中放置文件。这是我的整个脚本：

  $(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); }, }); } }); });  

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

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

它完全按照你编码的方式完成。

在您调用@Url.Action("DeleteSensor", "PredefinedViews")调用已覆盖的complete回调和success回调。 所以你被遗忘了一个视图，好像用户第一次去了这个页面。 因为整个页面在complete callback被重新加载，所以无法在success callback中加载局部视图。

通过查看您的代码，我可以理解，您应该在document ready中的success回调中调用任何document ready 。

 $(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移动到它并用模型强烈输入。

现在在您的View中，Table曾经是这样的。 请执行下列操作

 
 @Html.Partial("MyTable", Model)  

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

 public ActionResult MyTable() { var myTableDataModel = //retrieve table data return PartialView(myTableDataModel); } 

现在让我们来看看javascript代码