使用jQuery.Load()加载局部视图，不使用Razor

本文关键字：Razor 视图 Load jQuery 加载局 使用 | 更新日期: 2023-09-27 17:58:05

我有一个View，它是PartialView的容器。比方说客户订单关系。View应该接收一个CustomerViewModel，而PartialView是一个Order集合，例如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（客户端）并在中发送给定的Model。

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

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

使用jQuery.Load()加载局部视图，不使用Razor

我的解决方案是：

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

这段代码应该能做到。诀窍是获取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的更专业的版本。并查看此链接，它可能会回答您关于传递模型的所有问题：
使用Jquery/Ajax将模型传递给控制器

希望这能帮助

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

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