使用jQuery .load()和无Razor加载部分视图

21 浏览
0 Comments

使用jQuery .load()和无Razor加载部分视图

我有一个View，它是一个PartialView的容器。假设是一个Customer - Orders的关系。View应该接收一个CustomerViewModel，而PartialView应该是一个Orders的集合，比如IEnumerable。

我基本上有两种方法可以做到这一点（不要忘了Angular），一种是使用Razor，另一种是使用jQuery。使用Razor非常简单，只需使用@Html.Partial("_CustomerOrdersPartial", Model.Orders)。但假设我不能使用Razor语法，下面是我提出这个问题的方法。我已经阅读了很多关于这个问题的帖子，但是大多数（不要提全部）都建议使用$("#container").load('@Url.Action("ActionName", new { parameterX = valueY }))。然后下面是我的问题：

  • 为什么要混合使用Razor和jQuery？
  • 这是唯一的方法吗？
  • 有没有办法调用View并传递模型？

最后一个问题与上面的代码需要调用服务器端的一个操作有关，而上面提到的@Html.Partial("_CustomerOrdersPartial", Model.Orders)只会调用View（客户端）并传递给定的模型。

如果有任何解决方法，将非常有帮助。

提前感谢您的时间和想法。

0

3 答案

0 Comments

问题的出现原因是需要通过jQuery的.load()方法加载一个部分视图，但不使用Razor语法。解决方法是使用jQuery的.ajax()方法发送一个POST请求，将数据以JSON格式传递给后台控制器的方法。控制器方法根据传递的数据生成部分视图，并将其作为响应返回给前端页面。前端页面通过jQuery的.html()方法将部分视图插入到指定的div元素中。

具体的解决方案如下：

首先，在前端页面定义一个名为ReturnPanel的函数，该函数接受两个参数：div和panel。在函数内部，使用jQuery的.ajax()方法发送一个POST请求到指定的控制器方法。请求的URL为"ControllerName/GetPanel"，请求的数据为一个包含idCurso和panel的JSON对象。请求的contentType为'application/json; charset=utf-8'。

在控制器的GetPanel方法中，使用HttpPost特性将该方法标记为只接受POST请求。方法接受两个参数：idCurso和panel。在方法内部，创建一个Contenido对象，并将idCurso赋值给该对象的IdCurso属性。然后，使用PartialView方法生成一个指定名称的部分视图，并将Contenido对象作为模型传递给部分视图。

最后，在前端页面的成功回调函数中，将部分视图的内容插入到指定的div元素中，使用jQuery的.html()方法。在错误回调函数中，可以通过xhr对象的status属性获取HTTP状态码，并使用xhr对象的responseText属性获取错误的描述信息。

通过以上步骤，我们可以在不使用Razor语法的情况下，使用jQuery的.load()方法加载一个部分视图。

0
0 Comments

问题的出现原因是需要通过jQuery的.load()方法来加载一个部分视图，但是不想调用一个action方法来获取URL。解决方法是使用jQuery的.load()方法来加载部分视图，并通过指定URL和参数列表来确保匹配正确。以下是解决方法的示例代码：

var url = '/controllerName/ActionName';
$('#pnlFillMee').load(url, {NameOfParam: $('#elementID').val() },
function () {CallMeAfterLoadComplete(); });

这里是一个实际工作中使用的示例代码。ReviewInfo是与该页面相关的控制器中的一个action方法，它返回一个部分视图结果。

$(document).ready(function () {
    var url = '/supervisor/reviewinfo';
    $('#pnlReviewInfo').load(url, { FCUName: $('#FCU').children(':selected').text(), AccountsFromDate: $('#AccountsFrom').val()}, function () {
        InitializeTabs(true); 
    });
});

将上述代码添加到表单中的适当位置即可。例如：

另外，还可以查阅其他jQuery函数，如$.get、$.post和$.ajax，它们是$.load方法的更专门版本，并且可以查看链接来解答有关传递模型的问题。希望这些信息对您有帮助。

0
0 Comments

问题的原因是：使用jQuery的.load()方法加载Partial View时，需要通过一个action method来返回HTML代码，如果不使用Razor语法，则需要手动指定URL或使用Angular。

解决方法是：可以使用Partial()方法或RenderPartial()方法来加载Partial View。如果需要在显示之前对Partial进行操作，则使用Partial()方法返回一个字符串，否则使用RenderPartial()方法将HTML代码写入流输出。另外，可以使用.load()方法加载Partial View，但需要确保有一个action method来返回HTML代码。如果无法使用Razor语法，可以手动指定URL或使用Angular。

根据问题中的讨论，我们可以得出以下结论：

- 使用Partial()方法返回Partial View的字符串，可以在显示之前对其进行操作。

- 使用RenderPartial()方法将Partial View的HTML代码写入流输出。

- 使用.load()方法加载Partial View时，需要确保有一个action method返回HTML代码。

- 如果无法使用Razor语法，可以手动指定URL或使用Angular。

以上是针对问题的原因和解决方法的总结。

0