使用jQuery .load（）和no Razor加载局部视图

我有一个视图，它是PartialView的容器。假设一个Customer - Orders关系。视图应该收到CustomerViewModel而部分视图是订单的集合，例如IEnumerable<OrderViewModel>。使用jQuery .load（）和no Razor加载局部视图

我基本上有两种方法来做到这一点（更不用说Angular了），无论是Razor还是jQuery。随着剃刀是非常简单的利用@Html.Partial("_CustomerOrdersPartial", Model.Orders)。但是让我们假设我不能使用Razor语法，这里是我最终发布这个问题的方式。我已经阅读了许多关于此事的帖子，但其中大多数（不提全部）建议使用$("#container").load('@Url.Action("ActionName", new { parameterX = valueY }))。那么这里是我的问题：

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

最后一个问题与上面的代码需要在服务器端的一个动作被称为事实做，而上面提到的将只是调用View（客户端）和发送@Html.Partial("_CustomerOrdersPartial", Model.Orders)给定型号英寸

任何想法如何解决这将是非常有益的。

在此先感谢您的时间和想法。

来源

2016-07-22 yopez83

因为使用'@ Url.Action（）'将始终确保您的url正确生成。 –

'@ Url.Action'本身是一个Razor语法，它根据控制器和操作方法生成URL。请记住，从回调中创建的部分视图无需刷新整个页面。 –

斯蒂芬说的正是如此。您的URL由MVC路由基础结构维护。其主要目的之一是确保如果您稍后要更改URL，应用程序中只有1个位置需要更改。使用'@ Url.Action'确保URL从路由中生成，而不是在视图中被硬编码。 – NightOwl888

此代码应该这样做。诀窍是获取URL，然后确保您获得正确的参数列表。我使用了一个小剃刀来获取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的功能，如$不用彷徨，$。员额和$就这是$ .load更多的专门版本。看看这个链接，可能会回答你关于通过模型中的所有问题：
Pass Model To Controller using Jquery/Ajax

希望这有助于

来源

2016-07-22 05:31:43

谢谢，但我仍然需要有一个操作方法，而当使用'@ Html.Partial（）'我不必。我正在寻找一种方法来在不调用操作方法的情况下使用jQuery将一个局部视图注入视图。 – yopez83

好吧，如果你做这个警报（网址）;在代码中，您将看到Url.Action只是获取MVC中路由系统的一部分的控制器名称。所以URL变成'/ controllerName/actionName'你只是想弄清楚URL而不使用Razor。无论你如何切片，JQuery.Load都需要这个URL。 –

我已经更新了我的答案。在更深入地阅读你的问题之后。 –

这个问题，并感谢结束了对@斯蒂芬 - muecke和@查尔斯·麦金托什对自己的帮助：

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

来源

2016-07-28 02:10:03 yopez83

我的解决方案是：

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

来源

2017-07-25 20:28:29

使用jQuery .load（）和no Razor加载局部视图

回答

相关问题