在 Asp.net MVC 5 中通过 AJAX 调用部分视图

Question

我正在使用以下代码来调用局部视图：

$('#btnGetMilestones').click(function () {
$.ajax({
    url: "GetMilestones",
    type: "get",
    success: function (result) {
        $('#milestonesContainer').html(result);
    },
    error: function (xhr, status, error) {
        var msg = "Response failed with status: " + status + "</br>"
        + " Error: " + error;
        $('#milestonesContainer').html(msg);
    },
    complete: function (xhr, status) {
        var doneMsg = "Operation complete with status: " + status;
        alert(doneMsg);
    }
});

});

对于这个 ActionResult：

public PartialViewResult GetMilestones()
    {
        return PartialView("_GetMilestones");
    }

局部视图具有项目的里程碑（里程碑和项目是模型）。当我这样调用局部视图时：

<div id="milestonesContainer">
    @Html.Partial("_GetMilestones")
</div>

它运行良好，它获得了项目的所有里程碑。 但是当我尝试通过 ajax 调用部分视图时，错误被调用： Response failed with status: error

错误：错误请求

我在一个项目的详细信息视图中，所以 url 是这样的http://localhost:55623/Projects/Details/2002

我是 ajax 和 javascript 的新手，所以如果可能的话，请像对初学者一样向我解释一下。

更新：

在得到一些答案并四处寻找解决方案后，我明白为什么会出现错误。 我在详细信息视图中，所以 url 是这样的：http://localhost:55623/Projects/Details/2002 看到有一个 ID 参数。 当我进行 ajax 调用时，url 就像这样 http://localhost:55623/Projects/Details 没有 id 参数。所以作为回报，我得到一个 400 错误代码

Answer 1

以我的评论为基础：

抱歉，我对 url 这个词的表述含糊不清。这就是我的意思：

除非您在浏览器中的当前网址是http://<hostname>/<Controller that contains GetMilestones>，否则您的 AJAX 网址不正确。 AJAX url 需要是/<Controller>/GetMilestones。

开头的/ 将您带到项目的根目录，然后由您的路由配置处理其余部分（通常为/Controller/Method/Id）。这就是为什么 AJAX url 通常需要为/Controller/Method。但是，如果您在 Index 视图中，您的 url 通常是 http://<hostname>/Controller。因此，如果是这种情况并且您的 AJAX url 只是 Method，它将带您到 http://<hostname>/Controller/Method，因为您没有在 AJAX url 前面加上 /。

Answer 2

尝试使用url: "@Url.Action("GetMilestones")" 代替url: "GetMilestones"，它将呈现操作的实际相对路径，即/{Controller}/GetMilestones。

还要确保您在控制器中引用正确的文件名，因为在您的视图中您引用“_GetMilestone”并且您说这有效，但在您的控制器中您引用“_GetMilestones " 如果您的文件名确实是 "_GetMilestone"，这将无法解决

如果您收到 500 错误，这意味着您很可能正在点击该操作，并且在渲染局部视图之前或期间发生了异常。尝试通过键入localhost:port/Projects/GetMilestones 在浏览器中直接导航到局部视图的操作，然后查看是否出现异常页面。确保在 Startup 类的 Configure 方法中执行以下操作：

public void Configure (IApplicationBuilder app) 
{    
    app.UseDeveloperExceptionPage();
}

Answer 3

您应该考虑利用 Url.Action 等辅助方法来生成要通过 ajax 调用的操作方法的正确相对路径。如果你是 js 代码在视图里面，你可以简单地调用类似的方法

url: "@Url.Action("GetMilestones","Project")",

如果在外部js文件中，你仍然可以使用helper方法生成路径并将其设置为外部js文件的变量。确保在这样做时进行 javascript 命名空间，以避免可能覆盖 js 全局变量。

所以在你的视图/布局中你可以这样做

<script>
    var myApp = myApp || {};  
    myApp.Urls = myApp.Urls || {};     
    myApp.Urls.mileStoneUrl= '@Url.Action("GetMilestones","Project")';
</script>
<script src="~/Scripts/PageSpecificExternalJsFile.js"></script>

在您的PageSpecificExternalJsFile.js 文件中，您可以像这样阅读它

$(function(){
   $('#btnGetMilestones').click(function () {
      $.ajax({
           url: myApp.Urls.mileStoneUrl,
           //Your existing code goes here

           })
     });
});

Answer 4

您需要将第一个 url 更改为与路由匹配的内容：

 '/<Controller>/GetMilestones/'

从 PartialViewResult 切换到 ActionResult

去 ajax 之类的：

url: "GetMilestones",
type: "get",
contentType: 'application/html; charset=utf-8',
dataType : 'html'

Answer 5

感谢大家的回答。我的问题得到了答案，也许有点出乎意料。她是： 更改ajax方法：

$('#btnGetMilestones').click(function () { 
        $.ajax({
            url: '/Projects/GetMilestones/' + "?id=" + window.location.href.split('/').pop(),                
            type: "GET",
            success: function (data) {
                $('#milestonesContainer').html(data);
            },
            error: function (xhr, status, error) {
                var msg = "Response failed with status: " + status + "</br>"
                + " Error: " + error;
                $('#milestonesContainer').html(msg);
            },
            complete: function (xhr, status) {
                var doneMsg = "Operation complete with status: " + status;
                alert(doneMsg);
            }
        });
    });

以及动作结果：

public ActionResult GetMilestones(int? id)
    {             
        var forProject = db.Projects.Where(x => x.ID == id).SingleOrDefault();
        return PartialView("_GetMilestones",forProject);
    }

或相同的操作结果，但 ajax 请求略有不同：

$('#btnGetMilestones').click(function () { 
  var id;
   id = @Model.ID;

    $.ajax({
        url: '/Projects/GetMilestones',
        type: "GET",
        data: "id="+id,
        success: function (data) {
            $('#milestonesContainer').html(data);
        },
        error: function (xhr, status, error) {
            var msg = "Response failed with status: " + status + "</br>"
            + " Error: " + error;
            $('#milestonesContainer').html(msg);
        },
        complete: function (xhr, status) {
            var doneMsg = "Operation complete with status: " + status;
            alert(doneMsg);
        }
    });
});