如何使用 jQuery 中的 ajax 方法调用局部视图

Question

我使用asp.net ，但asp.net一些问题。

我创建了带有错误消息的部分视图，我想使用jQuery调用视图。

我已经在controller中创建了返回局部视图的function 。 但是我一直被 ajax 困住，我总是遇到错误。

控制器：

[HttpGet]
public ActionResult LoadPartialView()
{
    return PartialView("_ErrorMessageWindow");
}

jQuery：

$.ajax({
        url: "@(Url.Action('LoadPartialView'))",
        type: "GET",
        cache: false,
        datatype: 'html',
        success: function (data) {
      }
});

错误：

jquery-3.3.1.min.js:2 GET https://localhost:5001/@(Url.Action ('LoadPartialView'))?_=1565937416181 404（未找到）

Answer 1

不工作的原因：

@Url.Action()是 Razor 服务器端代码，不会在外部.js文件中解析。

解决方案：

在你的.cshtml创建这个<div> ：

<div id="partial-view-url" data-request-url="@Url.Action("LoadPartialView", "ControllerName")"></div>

然后使用如下所示的data-request-url在您的单独/外部.js文件中获取部分视图data-request-url ：

$("#partial-view-url").data('data-request-url');

所以你的$.Ajax会变成这样：

$.ajax({
        url: $("#partial-view-url").data('data-request-url'),
        type: "GET",
        cache: false,
        datatype: 'html',
        success: function (data) {

        }
});

另一种方法是声明全局变量：在主.cshtml文件中创建全局变量并在外部.js文件中使用它。

//Declare this variable in your main `.cshtml` file.
var partial-view-url = @Url.Action("LoadPartialView","ControllerName");

//and then use it in your separate/external `.js` file.
$.ajax({
        url: partial-view-url,
        type: "GET",
        cache: false,
        datatype: 'html',
        success: function (data) {

        }
});