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


Calling partial view through AJAX in Asp.net MVC 5

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('#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：

1
2
3
4
public PartialViewResult GetMilestones()
    {
        return PartialView("_GetMilestones");
    }

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

1
    @Html.Partial("_GetMilestones")

它工作正常，它获得了项目的所有里程碑。
但是当我尝试通过ajax调用局部视图时，会调用错误：响应失败，状态为：error

错误：错误请求

我在项目的详细信息视图中，所以url就像这样http：// localhost：55623 / Projects / Details / 2002

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

更新：

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

相关讨论

您需要将第一个网址更改为与路线匹配的内容：

1
 '/<Controller>/GetMilestones/'

从PartialViewResult切换到ActionResult

去寻找ajax：

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

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

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

如果它在外部js文件中，您仍然可以使用辅助方法生成路径并将其设置为外部js文件的变量。确保在执行此操作时执行javascript命名空间，以避免可能覆盖js全局变量。

所以在你的视图/布局中你可以做到这一点

1
2
3
4
5
    var myApp = myApp || {};  
    myApp.Urls = myApp.Urls || {};    
    myApp.Urls.mileStoneUrl= '@Url.Action("GetMilestones","Project")';

<script src="~/Scripts/PageSpecificExternalJsFile.js">

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

1
2
3
4
5
6
7
8
9
$(function(){
   $('#btnGetMilestones').click(function () {
      $.ajax({
           url: myApp.Urls.mileStoneUrl,
           //Your existing code goes here

           })
     });
});
相关讨论

以我的评论为基础：

对不起，我对url一词含糊不清。这就是我的意思：

除非您在浏览器中的当前网址是http:///，否则您的AJAX网址不正确。 AJAX网址必须//GetMilestones。

开头/将您带到项目的根目录，然后其余部分由您的路由配置(通常为/Controller/Method/Id)处理。这就是AJAX网址通常需要/Controller/Method的原因。但是，如果您位于Index视图，则您的网址通常为http:///Controller。因此，如果是这种情况并且您的AJAX网址只是Method，则会将您带到http:///Controller/Method，因为您没有在/前面添加您的AJAX网址。

相关讨论

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

还要确保你在控制器中引用正确的文件名，因为在你的视图中你引用了"_GetMilestone"并且你说它有效，但在你的控制器中你引用了"_GetMilestones"，如果你的文件名确实是" _GetMilestone"

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

1
2
3
4
public void Configure (IApplicationBuilder app)
{    
    app.UseDeveloperExceptionPage();
}
相关讨论

感谢大家的回答。我得到了一个问题的答案，也许这有点不可预料。她是：
更改ajax方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#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);
            }
        });
    });

和行动结果：

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

或者相同的动作结果但是ajax请求略有不同：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('#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);
        }
    });
});