jQuery的AJAX形式ASP.NET MVC 3 [英] jquery ajax forms for ASP.NET MVC 3

问题描述

这可能是一个简单的问题，但是，我现在也不清楚，我要得到的东西排序在我的头上......也许有人可以帮助我与=）...

我知道MVC附带的Ajax助手。 我知道有微软图书馆也有jQuery的。 我知道，与MVC 3，他们推出了不显眼的JavaScript的它增加了一些特殊标签来的HTML cleannes ...

但如何北京时间一起玩？

例如：我想每发布AJAX远程形式（局部视图）将注释添加到一个博客帖子。没有张贴整页。

在我的局部视图，我会使用 Ajax.BeginForm（）是这样的话MvcAjax或jQuery的？ 或者我会用 Html.BeginForm（）和注册类似的表单的单击事件$。员额。这也将有纯HTML的后备如果JavaScript被禁用或不支持......

或一般的时候使用什么张贴评论博客文章？......我认为这是正确的，那我张贴到commentscontroller的创建行动，我会用JsonModelBinder将其转化为一个模型。从那以后，我将返回JSON和将它添加到我的评论列表...

这是合理的，为什么这样做呢？

解决方案

  

Ajax.BeginForm（）是这样的话MvcAjax或jQuery的？

默认情况下它是jQuery的。你需要引用 jquery.unobtrusive-ajax.js 脚本这个工作。

  

我会不会用Html.BeginForm（）和寄存器像在窗体的单击事件$。员额。

这是一种替代方法。个人，这就是我做的。

  

我认为它是正确的，那我张贴到commentscontroller的创建行动，我会用JsonModelBinder将其转化为一个模型。从那以后，我将返回JSON和将它添加到我的评论列表...

在JsonModelBinder已在ASP.NET MVC 3推出，它允许你发送一个JSON字符串将被映射回一个视图模型控制器动作。例如，如果您有以下视图模型：

 公共类PersonViewModel
{
    公共字符串名称{;组; }
    公众诠释年龄{获得;组; }
}
 

和以下操作：

 公众的ActionResult美孚（PersonViewModel人）
{
    ...
}
 

传统的方式来调用它的AJAX是：

  $。阿贾克斯（{
    网址：@ Url.Action（富），
    键入：POST，
    数据：{名称：'约翰'，年龄：20}，
    成功：函数（结果）{
        // 去做：
    }
}）;
 

在ASP.NET MVC 3，你可以发送一个JSON作为将被绑定到 PersonViewModel 操作参数请求参数：

  $。阿贾克斯（{
    网址：@ Url.Action（富），
    键入：POST，
    的contentType：应用/ JSON的，
    数据：JSON.stringify（{名称：'约翰'，年龄：20}），
    成功：函数（结果）{
        // 去做：
    }
}）;
 

this might be an easy question but for me right now it is not clear and I have to get things sorted in my head... maybe somebody can help me with that =)...

I know that MVC comes with Ajax Helpers. I know there is Microsoft library and there is also jquery. I know that with MVC 3 they introduced unobtrusive javascript which adds some special tags to html for cleannes...

but how does ist play together?

Example: I want to post a remote form (partial view) per ajax to add comments to a blog post. without posting the whole page back.

in my Partial View would I use Ajax.BeginForm() is this then MvcAjax or Jquery? Or would I use Html.BeginForm() and register something like $.post on the click event of the Form. This would also have a fallback of plain html if javascript is disabled or not supported....

Or in general when to use what for posting comments to a blog post?... and I assume that it is correct, that I am posting to the create action of the commentscontroller and I would use the JsonModelBinder to transform it to a model. After that I would return Json and would append it to my comments list...

Is this reasonable why of doing it?

解决方案

Ajax.BeginForm() is this then MvcAjax or Jquery?

By default it is jquery. You need to reference the jquery.unobtrusive-ajax.js script for this to work.

Or would I use Html.BeginForm() and register something like $.post on the click event of the Form.

That's an alternative. Personally that's what I do.

I assume that it is correct, that I am posting to the create action of the commentscontroller and I would use the JsonModelBinder to transform it to a model. After that I would return Json and would append it to my comments list...

The JsonModelBinder has been introduced in ASP.NET MVC 3 and it allows you to send a JSON string to a controller action which will be mapped back to a view model. For example if you have the following view model:

public class PersonViewModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}

and the following action:

public ActionResult Foo(PersonViewModel person) 
{
    ...    
}

the traditional way to invoke it in AJAX is:

$.ajax({
    url: '@Url.Action("foo")',
    type: 'POST',
    data: { name: 'john', age: 20 },
    success: function(result) {
        // TODO:
    }
});

and in ASP.NET MVC 3 you could send a JSON as request parameter which will be bound to the PersonViewModel action parameter:

$.ajax({
    url: '@Url.Action("foo")',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ name: 'john', age: 20 }),
    success: function(result) {
        // TODO:
    }
});

这篇关于jQuery的AJAX形式ASP.NET MVC 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！