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

Posted 2023-05-08

【中文标题】如何使用 jQuery 的 ajax 方法调用局部视图

【英文标题】：How to call partial view using ajax method from jQuery

【发布时间】：2019-12-22 11:56:21

【问题描述】：

我与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（未找到）

【问题讨论】：

Url.Actio 中有拼写错误。更正它。

@RahulNikate 谢谢，已修复，但出现同样的错误

您在哪里编写Jquery 代码？是在.cshtml 还是单独的.js 文件中。

@RahulNikate 在 .js 文件中，在 cshtml 中创建的部分视图

请查看我对您的错误的回答。谢谢@qunzor。如果这对你有用，也请告诉我。

【参考方案1】：

不工作的原因：

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

解决方案：

在您的.cshtml 中创建此<div>：

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

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

$("#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) 

        
);