The use of Ajax in ASP. NET MVC [share]

Article transferred from http://www.huiyoumi.wang/upload/forum.php?mod=viewthread&tid=75&extra=

ASP. NET MVC discards the highly encapsulated controls of ASP. WebForm, which gives us more familiarity with the underlying HTML. You can control the structure, style, and behavior of HTML more freely and flexibly. And this is really a lot better for Ajax than WebForm. I made a discussion about ASP. NET MVC more convenient to use Ajax, to share, welcome to shoot bricks. The following three ways to demonstrate the use of Ajax, both with a simple demo show you want to study more, ask questions and share experience.

First, directly write the JS code to achieve Ajax:

Because the code in the ASP is better controlled, we can make AJAX requests directly in HTML via JS, and return XML or JSON in the Controller's action to implement the Ajax effect, which is the most primitive method. Browser and many issues need to be considered, not recommended.

The reference code is as follows: JS code:

2. var xhr;
   
4. function Getxhr ()
   
6. {
   
8. try {
   
10. Xhr=new ActiveXObject ("msxml2.xmlhttp");
    
12. } catch (e) {
    
14. try {
    
16. Xhr=new ActiveXObject ("Microsoft.XMLHTTP");
    
18. } catch (e) {
    
20. Xhr=false;
    
22. }
    
24. }
    
26. if (!xhr&&typeof xmlhttprequest!= ' undefined ')
    
28. {
    
30. Xhr=new XMLHttpRequest ();
    
32. }
    
34. return XHR;
    
36. }
    
38. function Openxhr (method,url,callback)
    
40. {
    
42. GETXHR ();
    
44. Xhr.open (Method,url);
    
46. Xhr.onreadystatechange=function ()
    
48. {
    
50. if (xhr.readystate!=4) return;
    
52. Callback (XHR);
    
54. }
    
56. Xhr.send (NULL);
    
58. }
    
60. function LoadXML (method,url,callback)
    
62. {
    
64. GETXHR ();
    
66. Xhr.open (Method,url);
    
68. Xhr.setrequestheader ("Content-type", "Text/xml");
    
70. Xhr.setrequestheader ("Content-type", "GBK");
    
72. Xhr.onreadystatechange=function ()
    
74. {
    
76. if (xhr.readystate!=4) return;
    
78. Callback (XHR);
    
80. }
    
82. Xhr.send (NULL);
    
84. }

Copy Code

Background code:

1. Public ActionResult getnews (int CategoryID)
   
2. {
   
3. Newscollectionmodel newscollection = new Newscollectionmodel ();
   
4. ............
   
5. Jsonresult Myjsonresult = new Jsonresult ();
   
6. Myjsonresult = newscollection;
   
7. return myjsonresult;
   
8. }

Copy Code

The second type: Ajax calls with jquery:

In VS 2010, the IDE fully supports the Smart Display of jquery, the use of JQ in development to achieve the JS effect is very good, and can save a lot of energy and time. So it's also a good idea to use jquery for development in Ajax.

The approximate implementation code is as follows:

2. <% using (Html.BeginForm ("AddComment", "Comment", formmethod.post,new {@class = "Hijax"})) {%>
   
4. <%= Html.textarea ("Comment", New{rows=5, cols=50})%>
   
6. <button type= "Submit" >add comment</button>
   
8. <span id= "indicator" style= "Display:none" ></span>
   
10. <%}%>
    
12. To reference jquery in view:
    
14. <script src= "Http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js" type= "Text/javascript" ></script>
    
16. Add the following script:
    
18. <script type= "Text/javascript" >
    
20. Execute when the DOM has been loaded
    
22. $ (document). Ready (function () {
    
24. Wire up to the form submit event
    
26. $ ("Form.hijax"). Submit (Function (event) {
    
28. Event.preventdefault (); Prevent the actual form post
    
30. Hijack (this, update_sessions, "html");
    
32. });
    
34. });
    
36. 
    
38. function hijack (form, callback, format) {
    
40. $ ("#indicator"). Show ();
    
42. $.ajax ({
    
44. Url:form.action,
    
46. Type:form.method,
    
48. Datatype:format,
    
50. Data: $ (form). Serialize (),
    
52. Completed: $ ("#indicator"). Hide (),
    
54. Success:callback
    
56. });
    
58. }
    
60. 
    
62. function Update_sessions (Result) {
    
64. Clear the form
    
66. $ ("Form.hijax") [0].reset ();
    
68. $ ("#comments"). Append (result);
    
70. }
    
72. 
    
74. </script>

Copy Code

The third method: Use Microsoft's own AJAX helper framework to implement.

2. <% using (Ajax.beginform ("AddComment", New ajaxoptions
   
4. {
   
6. HttpMethod = "POST",
   
8. Updatetargetid = "Comments",
   
10. Insertionmode = Insertionmode.insertafter
    
12. })) {%>
    
14. 
    
16. <%= Html.textarea ("Comment", New{rows=5, cols=50})%>
    
18. <button type= "Submit" >add comment</button>
    
20. 
    
22. <%}%>

Copy Code

The second and third method in the blog park has a blog, I have a direct reference, the specific address is as follows:http://www.cnblogs.com/zhuqil/archive/2010/07/18/1780285.html

It is primarily a matter of my own opinion and attention to the Ajax helper record.

First, Ajax Helper is a Microsoft-provided AJAX framework, in order to use AJAX helper must use the Microsoft provided two JS framework:

<script src= "Http://www.cnblogs.com/Scripts/MicrosoftAjax.js" type= "Text/javascript" ></script> < Script src= "Http://www.cnblogs.com/Scripts/MicrosoftMvcAjax.js" type= "Text/javascript" ></script>

Second, Ajax Helper has several uses

Ajax.actionlink (): It renders a hyperlink tag, similar to Html.ActionLink (). When it is clicked, it gets the new content and inserts it into the HTML page.

ajax.beginform (): It renders as an HTML form form, similar to Html.BeginForm (). When it commits, it gets the new content and inserts it into the HTML page.

Ajax.routelink (): Ajax.routelink () is similar to Ajax.actionlink (). However, it can generate a URL based on any of the routing parameters, without having to include the invoked action. The most used scene is a custom icontroller with no action in it.

ajax.beginrouteform (): same ajax.beginrouteform () similar to Ajax.beginform (). This Ajax equates to Html.routelink ().

and the parameters in each method will be different, the specific usage see:http://msdn.microsoft.com/zh-cn/library/system.web.mvc.ajaxhelper_methods (v=vs.98). ASPX

One of the important parameters is: ajaxoption, there are several properties, mainly to specify the behavior of Ajax.

The use of Ajax in ASP. NET MVC [share]