使用 javascript 重新加载 mvc/razor 部分视图

Posted 2023-05-08

【中文标题】使用 javascript 重新加载 mvc/razor 部分视图

【英文标题】：Do a reload of mvc/razor partial view with javascript

【发布时间】：2021-08-13 19:09:00

【问题描述】：

在我的项目中，我从部分视图加载了多行模块。 所以想象一个带有信息的小方块网格。 它们都有一个弹出对话框，显示点击模块的数据。

目前，当我在对话框中提交更改时，javascript 会重新加载整个页面。但是，这需要很长时间，我只需要能够刷新一个对话框。

我可以想象为每种类型的模块做一个单独的js函数，然后传入一些数据，这样jquery就可以找到具体的模块，然后对数据做一个ajax get。但这需要我始终从 js 中插入所有数据。而不是使用 razor 和 MVC 的内置功能。

有谁知道在 div 中调用局部视图的方法？ 同样在将来，我需要在间隔刷新中重新加载“一些”但不是所有模块。因此，为了将来的验证目的：

我正在寻找的东西是这样的：

function reloadElement(row, column, id)
   var target = $("#div1");
   // todo find row and column
   target.html.partial("url", model); //<----- looking for something like this. cross fingers.

【问题讨论】：

如果你在一个时间间隔内重新加载一个 div 中的数据，你可以在 js 中设置一个计时器来执行一个对你的服务器的 ajax 调用。 ajax 调用将触发一个控制器操作，该操作可以仅返回您的视图在 json 中需要的新数据，也可以返回您在页面上替换的整个部分视图

@GregH“返回您在页面上替换的整个部分视图”，这听起来像是我正在寻找的内容。您能否通过代码示例来回答这个问题会看吗？

【参考方案1】：

感谢 GregH 提供的几个关键词，它们带来了一些想法。

我自己解决了，所以如果你也遇到这个问题，我是这样解决的：

控制器：

你想让你的控制器return PartialView("somePartialViewUrl", new SomeModel())，显然保存模型并依赖数据收集还不够好，我不得不创建一个模型的新实例。

Javascript

在处理事件的“点击”中，输入：

$.ajax(
    url: "controllerName/actionName",
    data: JSON.stringify( row:1,column:2 .... ),
    contentType: "application/json", 
    dataType: "html", 
    type: "POST",
    success: function (partial) 
        $("#div2").html(partial);
    
);

这将覆盖“#div2”中的 html。

我相信您也可以使用$("#div2").innerHTML = partial; 或$("#div2").load("url",parameters); 以及可能许多其他方式。

完成。