asp.netMVC下使用jquery进行异步提交的两种方式

由于mvc架构和传统的.net程序有所不同，所以进行异步提交的时候，就和过去的方法参数有所差别，下面我就介绍下两种常用的提交方式在MVC下如何调用。

1.直接提交数据到Action

假设一个发布BLOG的页面的回复功能，有一个ID为'ReInfo'的div负责显示回复的消息。

点击提交按钮后，qj的post方法将数据传递到/Blog/BlogRe这个Action，参数是ReInfo和BlogId

然后，执行post的第三个匿名方法将刚回复的数据添加到ReInfo中

代码如下：

1. <div id='ReInfo'></div> 
2.  
3. <fckeditorv2:fckeditor id="FCKeditor1" runat="server" Width="580px" EnableXHTML="true" EnableSourceXHTML="true" basepath="~/FCKeditor/" height="500px"></fckeditorv2:fckeditor> 
4.     <script type="text/javascript"> 
5.         function getEditorHTMLContents() { 
6.  
7.             var oEditor = FCKeditorAPI.GetInstance("FCKeditor1"); 
8.             return (oEditor.GetXHTML(true)); 
9.         } 
10.         function UpdateMsg() { 
11.             var Con = getEditorHTMLContents(); 
12.             $.post("/Blog/BlogRe", { ReInfo:encodeURI(getEditorHTMLContents()) , BlogId: "<%=b.BlogId %>" }, function(data) { 
13.                 var $p = $("<div></div>"); 
14.                 $p.append("<div>" + getEditorHTMLContents() + "</div>"); 
15.                 $p.append("<br><b>" + data + "</b>"); 
16.                 $("#ReInfo").append($p); 
17.             }); 
18.         } 
19.     </script> 
20.     <input type=button value="提交" onclick="UpdateMsg()"> 

2.异步提交表单

直接用表单的submit进行处理，见注释

1. <script type="text/javascript" language="javascript"> 
2.     $(document).ready(function() 
3.         { 
4.             $('#f1').submit(function(){ 
5.                 jQuery.ajax({ 
6.                     url: "/Msg/MsgCtrlNew",   // 提交的Action 
7.                     data: $('#f1').serialize(), // 从表单中获取数据 
8.                     type: "POST",                   // 设置请求类型为"POST"，默认为"GET" 
9.                     beforeSend: function()          // 设置表单提交前方法 
10.                     { 
11.                          
12.                     }, 
13.                     error: function(request) {      // 设置表单提交出错 
14.                     alert("表单提交出错，请稍候再试" + request); 
15.                     }, 
16.                     success: function(data) { 
17.                         // 设置表单提交完成使用方法 
18.                     } 
19.                 }); 
20.                 return false; 
21.             }); 
22.         }); 
23.  
24. </script> 
25.  
26.   
27.  
28.     <form id=f1 action=Msg/MsgCtrl method=post> 
29.  
30.         <fieldset> 
31.             <legend>Fields</legend> 
32.              
33.             
34.             
35.  
36.              
37.             <div class="editor-label"> 
38.                 <%= Html.LabelFor(model => model.ReceiveUser) %> 
39.             </div> 
40.             <div class="editor-field"> 
41.                 <%= Html.TextBoxFor(model => model.ReceiveUser) %> 
42.                 <%= Html.ValidationMessageFor(model => model.ReceiveUser) %> 
43.             </div> 
44.              
45.              
46.             <div class="editor-label"> 
47.                 <%= Html.LabelFor(model => model.MsgConnent) %> 
48.             </div> 
49.             <div class="editor-field"> 
50.                 <%= Html.TextBoxFor(model => model.MsgConnent) %> 
51.                 <%= Html.ValidationMessageFor(model => model.MsgConnent) %> 
52.             </div> 
53.              
54.             <p> 
55.                 <input type="submit" value="Create" /> 
56.             </p> 
57.         </fieldset> 
58.  
59.     </form>