从ASP.NET MVC2应用程序执行Ajax调用时出现问题

时间:2011-03-20 21:31:12

标签: jquery ajax asp.net-mvc-2

我正在将现有的ASP.NET应用程序转换为MVC2,并且我有一个现有的方法,它通过使用Ajax的jQuery调用,之前有效,但现在不起作用。因此,由于使用了我无法弄清楚的MVC2,我需要做一些改变。

我降低了代码的复杂性,但它仍然无效。这是我目前的代码:

点击按钮时触发的jQuery脚本

function leaveComment() {
if (validate()) {
    $.ajax({
        type: "POST",
        url: "/Pages/PostBlogComment",
        data: "{'name':'Test','url':'Test','email':'Test','body':'Test','postid':'Test'}",
        dataType: "json",
        success: function (msg) {
            //success code goes here
        },
        error: function (msg) {
           //error code goes here
        }
    });
}

};

在名为Pages的控制器中,我创建了以下方法:

public string PostBlogComment( string name, string url, string email, string body, string postid)
{
  return "This is a test";
}

调试时我可以看到调用了PostBlogComment方法,但是我遇到了两个主要问题:

  1. 该方法的所有参数都是null,因此我没有可用的有用数据。现在进行测试,所有参数都以Test的形式发送,如代码所示。
  2. 将结果返回到Ajax方法时,将调用错误路径,而不是成功路径,即使方法确实正常返回字符串(即使发送的参数为空)
  3. 对于那些经常使用这些东西的人来说,这个错误很容易被发现(至少我希望如此:))

1 个答案:

答案 0 :(得分:10)

以下是您需要进行的更改:

$.ajax({
    type: 'POST',
    url: '/Pages/PostBlogComment',
    data: { 
        name: 'Test', 
        url: 'Test', 
        email: 'Test', 
        body: 'Test', 
        postid: 'Test'
    },
    success: function (result) {
        alert(result.Value);
    },
    error: function (msg) {
       //error code goes here
    }
});

和您的控制器操作

public ActionResult PostBlogComment( 
    string name, 
    string url, 
    string email, 
    string body, 
    string postid
)
{
    return Json(new { Value = "This is a test" });
}

可以通过引入视图模型来改进:

public class PostViewModel
{
    public string Name { get; set; }
    public string Url { get; set; }
    public string Email { get; set; }
    public string Body { get; set; }
    public string Postid { get; set; }
}

然后:

public ActionResult PostBlogComment(PostViewModel model)
{
    return Json(new { Value = "This is a test" });
}

注意事项:

  1. jquery AJAX调用的data哈希属性需要作为我的示例,否则你将发送一个JSON编码的字符串,ASP.NET MVC的默认模型绑定器不知道如何解析为动作参数。在ASP.NET MVC 3中,这已经发生了变化,因为有JsonValueProviderFactory允许您发送JSON请求。因此,如果您使用的是ASP.NET MVC 3,您可以像这样发送您的AJAX请求,并且操作参数将被正确绑定:

    $.ajax({
        type: 'POST',
        url: '/Pages/PostBlogComment',
        data: JSON.stringify({ 
            name: 'Test', 
            url: 'Test', 
            email: 'Test', 
            body: 'Test', 
            postid: 'Test'
        }),
        contentType: 'application/json',
        success: function (result) {
            alert(result.Value);
        },
        error: function (msg) {
           //error code goes here
        }
    });
    
  2. ASP.NET MVC中的所有控制器操作都必须返回ActionResults。因此,如果您想要Json,请返回JsonResult

  3. 该操作将匿名类型传递给包含Value属性的Json方法,该属性在success回调中使用,服务器的响应如下所示:

    { 'Value': 'This is a test' }
    
  4. 永远不要在您的javascript文件中硬编码这样的网址,否则您的应用程序在部署时可能会中断。处理网址时始终使用网址助手:

    ...
    url: '<%= Url.Action("PostBlogComment", "Pages") %>',
    ...
    

    或者如果这是一个外部javascript文件,您可以使用在视图中初始化的一些全局js变量,指向正确的url或将此url作为DOM的一部分(例如,作为anchor href属性或HTML5 {{ 1}}属性)然后使用jQuery获取值。