Question

我有一个View，它是PartialView的容器。让我们说一个客户 - 订单关系。视图应该收到CustomerViewModel，而部分查看收到订单，例如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)只会调用View（客户端）并发送给出模型。

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

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

Answer 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);
    }

Answer 2

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

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

这是我在工作中使用的真实世界的例子。 ReviewInfo是一个动作与此页面关联的控制器。它返回一个partialview结果。

$(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

希望这有帮助

Answer 3

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

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

使用jQuery .load（）加载部分视图，没有Razor

3 个答案: