如何从脚本函数调用局部视图？

Question

我正在开发MVC应用程序。

我想从视图脚本的函数中调用局部视图（控制器中没有任何方法）。

但它不起作用......

$('#PurchaseOrderId').blur(function (){
           @Html.Partial("ReturnsOfSinglePO")
});

Answer 1

您正在混淆服务器端剃刀命令和客户端JavaScript。

忽略此位以进行部分视图加载

您可以将页面URL注入JavaScript（如果它位于剃刀页面中），但您需要通过$ .ajax调用或类似方法（或设置window.location进行简单重定向）来加载它

e.g。

这会将URL注入JavaScript常量并将其分配给blur：上的window.location：

$('#PurchaseOrderId').blur(function (){

           window.location = '@Url.Action("ReturnsOfSinglePO")';
});

但是javascript必须在Razor注入的视图中才能工作。

如果Javascript不在同一个剃刀页面上，您可以将页面位置注入页面上的属性（例如DIV容器）作为data-属性，并在客户端代码中选择它

$('#PurchaseOrderId').blur(function (){
           window.location = $('.someClassYouAdded').data('url');
});

这假设您已将页面URL注入到视图中，如下所示：

   <div class="someClassYouAdded" data-ulr="@Url.Action("ReturnsOfSinglePO")"/>

“部分视图改变了一些事情”

您使用术语“部分视图”意味着您希望将其加载到当前页面中。使用其中一种ajax方法（例如$.get()，.load()或$.ajax()等）。您需要提供更多有关如何更新页面的详细信息，以便为此提供一个很好的示例。

您需要一个“某处”的控制器方法来返回局部视图。控制器仅用于将方法映射到URL。如果没有控制器方法，则无法返回随机局部视图。

对于此示例，将以下内容添加到呈现当前页面的同一控制器：

public ActionResult ReturnsOfSinglePO()
{
    return PartialView();
}

这假设您的部分视图位于Views/currentcontrollername/ReturnsOfSinglePO.cshtml或/Views/Shared/ReturnsOfSinglePO.cshtml

这会收到/currentcontrollername/ReturnsOfSinglePO之类的传入网址请求，并返回您的部分视图。

当然，如果你这样做，你可以在Jquery中硬连接URL：

$('#PurchaseOrderId').blur(function (){

           $('.someClassYouAdded').load('/currentcontrollername/ReturnsOfSinglePO');
});

其中someClassYouAdded是添加到要用局部视图填充的元素的类。 我确信还有其他方法可以做到这一点，但您必须清楚地将服务器端HTML生成与客户端代码分开（至少在您的脑海中）：）