使用 jQuery .load() 加载局部视图，不使用 Razor答案

【问题标题】：Load a Partial View using jQuery .load() and no Razor使用 jQuery .load() 加载局部视图，不使用 Razor
【发布时间】：2016-07-22 03:09:38
【问题描述】：

我有一个 View，它是 PartialView 的容器。假设客户 - 订单关系。 View 应该收到一个CustomerViewModel，而 PartialView 应该收到一个 Orders 的集合，例如 IEnumerable<OrderViewModel>。

我基本上有两种方法（更不用说 Angular），Razor 或 jQuery。通过使用@Html.Partial("_CustomerOrdersPartial", Model.Orders)，Razor 非常简单。但是让我们假设我不能使用 Razor 语法，这就是我最终发布这个问题的方式。我已经阅读了很多关于这个问题的帖子，但是其中大多数（更不用说全部）建议使用$("#container").load('@Url.Action("ActionName", new { parameterX = valueY }))。然后是我的问题：

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

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

任何关于如何解决这个问题的想法都会非常有帮助。

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

【问题讨论】：

因为使用'@Url.Action() 将始终确保您的网址正确生成。
@Url.Action 本身是一种 Razor 语法，它根据控制器和操作方法生成 URL。请记住，从回调创建的部分视图，无需刷新整个页面。
正是斯蒂芬所说的。您的 URL 由 MVC 路由基础结构维护。它的主要目的之一是确保如果您以后想更改 URL，应用程序中只有 1 个位置可以更改。使用 @Url.Action 可确保 URL 是从路由生成的，而不是在您的视图中硬编码。
@Html.Partial() 是服务器端代码，而不是客户端代码。不太确定你在这里问什么。 $.load() 是客户端代码。为什么你要把你的模型发送到视图，然后再将它原封不动地发送回服务器，以获取基于它的局部视图，或者只是首先渲染它。您通常使用 $.load()（或任何 ajax 方法）来响应客户端事件
因为Html.Partial() 是服务器端代码。该方法搜索具有匹配名称的视图并将其添加到服务器端正在生成的 html 中。它不需要 url，因为它已经在服务器上。然而，使用.load() 是客户端代码。客户端不知道服务器上有什么，除非它调用服务器返回一些东西，而要做到这一点，你需要提供一个 url。

标签： c# jquery asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

我的解决办法是：

function ReturnPanel(div, panel) {

    $.ajax({
        type: "POST",
        url: "@Url.Action("GetPanel", "ControllerName")",
        data: JSON.stringify({ 'idCurso': idCurso, 'panel': panel }),            
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
            $("#" + div).html(response);
        },
        error: function (xhr, status, errorThrown) {
            //Here the status code can be retrieved like;                
            alert("Error: status = " + xhr.status + " Descripcion =" + xhr.responseText);
        }
    })
}

在cs中。

 [HttpPost]
    public ActionResult GetPanel(int idCurso, string panel)
    {
        Contenido contenido = new Contenido();
        contenido.IdCurso = idCurso;
        return PartialView(panel, contenido);
    }

【讨论】：

【解决方案2】：

这段代码应该可以做到。诀窍是获取 URL，然后确保获取正确的参数列表。我使用了一点 Razor 来获取 URL，但您不必这样做。此外，如果您未能匹配参数列表，您的呼叫甚至不会被确认。你被警告了。我试图以一种有帮助的方式命名每一件事。

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

这是我在工作中使用的真实示例。 ReviewInfo 是与此页面关联的控制器。它返回一个局部视图结果。

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

这会出现在您表单的某个位置。

<div id="pnlReviewInfo" style="width: 85%"></div>

编辑：我还会查找其他 jQuery 函数，例如 $.get、$.post 和 $.ajax，它们是 $.load 的更专业版本。并查看此链接，它可能会回答您有关传递模型的所有问题：
Pass Model To Controller using Jquery/Ajax

希望对你有帮助

【讨论】：

谢谢，但我仍然需要一个操作方法，而使用@Html.Partial() 时我不需要。我正在寻找一种在不调用操作方法的情况下使用 jQuery 将部分视图注入视图的方法。
如果你这样做 alert(url);在代码中，您将看到 Url.Action 只是获取控制器名称，它是 MVC 中路由系统的一部分。所以 URL 原来是 '/controllerName/actionName' 你只是想在不使用 Razor 的情况下找出 URL。无论你如何切片 JQuery.Load 都需要 URL。
我已经更新了我的答案。在对您的问题进行更深入的阅读之后。
谢谢@charles-mcinstosh

【解决方案3】：

结束这个问题，感谢@stephen-muecke 和@charles-mcintosh 的帮助：

使用@Html.Partial(partialViewName)，服务器返回一个string，从传入的局部视图产生。如果您需要在显示之前操作局部视图，则首选方法。否则，使用@Html.RenderPartial(partialViewName) 会将给定部分的 HTML 代码写入发送到浏览器的流输出中。
根据jQuery API，$(elem).load(url[,data][,complete]) 会将返回的 HTML 放入匹配元素中。因此，它需要给定 url 的操作方法。
如果出于某种原因无法在 UI 上使用 Razor，您很可能会像上面由@charles-mcintosh 提供的示例代码那样对 url 进行硬编码，或者使用 Angular。

【讨论】：