ASP. NET MVC Learning Ajax (end)

Website: https://www.cnblogs.com/yaozhenfa/p/asp_net_mvc_ajax.html

I. Preface

Through the above study, we must have a lot of harvest. But there will always be a time to end, but this end also means a new beginning.

If you are working in ASP. NET development, and you also use third-party controls, you will find that ASP. ASP. NET MVC is a very simple way to develop Ajax, so this is the last section of ASP. Through this section of the study we will be able to implement the form via Ajax, and below we begin to learn.

Two. Preparatory work

1. First ensure that the following JS libraries are referenced in _layout:

2. Create a new HomeController and write the following code in it:

1 namespace mvcstudy.controllers 2 {3 Public     class Homecontroller:controller 4     {5 public         ActionResult Inde X () 6         {7             return View (); 8         } 9         [httppost]11 public         ActionResult Index ([Bind (prefix= "name")] String reg)         {             Partialview ("Result", Reg);         }15     }16}

3, create a new home folder under the views, and create a new index view in it, while creating a new result view in views/shared, so that the preparation work is done.

Three. Using AJAX to submit a form

First we open the new index view and write the following code in it:

1 @{2     viewbag.title = "Index"; 3     ajaxoptions option = new Ajaxoptions 4     {5         Updatetargetid = "Targetdiv" 6     }; 7} 8  9 @using (ajax.beginform (option)) {     <div id= "Targetdiv" >12     </div>13     @ Html.textbox ("name")     <div>15         <input type= "Submit" value= "register"/>16     </div>17}

where ajaxoptions sets AJAX-related parameters, while ajax.beginform indicates that the form is submitted in Ajax, where Ajaxoptions Updatetargetid represents the container that completes the output of the content after the AJAX request.

Open the result view under views/shared and write:

1 @{2     String text = (string) model;3}4 5 @text

As a simple example, the author directly outputs the model.

Then we can F5 run, enter a value in the text box, and finally we can find that the page is not refreshed. But the content is presented from the specified Div, and the principle is simple, and ASP. NET MVC uses Ajax in jquery to submit the parameters in the form to the specified action, which is then returned directly from the HTML code, and finally in the container from the specified ID.

Four. Implementing Effects in Load

Many web sites now present a section of markup that represents loading during an AJAX request, and Ajax from ASP. NET MVC gives us this functionality, and we'll modify the index view as follows:

1 @{2     viewbag.title = "Index"; 3     ajaxoptions option = new Ajaxoptions 4     {5         Updatetargetid = "Targetdiv", 6         Loadingelementid = "Wait", 7         loadingelementduration = 8     }, 9}10 <div id= "Wait" style= "display:n One ">12     patiently waiting ... </div>14 @using (option) ajax.beginform {     <div id= "Targetdiv" >17 </div>18     @ Html.textbox ("name")     <div>20         <input type= "Submit" value= "register"/>21     </div>22}

We use Loadingelementid to set the loaded label and loadingelementduration to indicate the duration of the animation, here we write a div to render, and the div display to be set to none, so we re-open the page and submit again, we can see the effect in the load.

Five. Ajax Links

There are times when it's not always necessary to submit a form for Ajax, and there's a lot of Ajax requests just by clicking a button, and we're using ajax.actionlink to do that, just fill in the following code in the index view:

1 @Ajax. ActionLink ("Point Me", "Index", new {name= "Oh no"},new ajaxoptions{2     updatetargetid = "Targetdiv", 3     Confirm = "Are you sure?" ", 4     httpmethod =" Post "5});

Here is not introduced, because and Html.ActionLink 's usage is very similar, the only difference is that one more ajaxoptions parameter, we refresh the page. Click on this link to see the effect, if you want to ask where the button, the problem seems to be no question, there is no universal CSS?

Six. Ajax callbacks

For some readers who love to write JavaScript, these are undoubtedly disasters. This way your JavaScript level how to reflect, in fact, ASP. NET MVC has a lot of problems, so this time we can listen to its process, so that we can better complete the function, below we listen to all of its events, we are still modifying the index view of the code:

1 @Ajax. ActionLink ("Point Me", "Index", new {name= "Oh no"},new ajaxoptions{2     updatetargetid = "Targetdiv", 3     Confirm = "Are you sure?" ", 4     httpmethod =" Post ", 5     onbegin =" Onbegin ", 6     oncomplete =" OnComplete ", 7     onfailure =" OnFailure ", 8     onsuccess = "onsuccess" 9}); Ten <script type= "text/javascript" >12     function Onbegin () {         console.log ("start");     function OnComplete (request, status) {         Console.log ("Finished, good off");     }19     function OnFailure ( Request, error) {         Console.log ("error, to work overtime"),     }23     function onsuccess (data) {         Console.log ( "Change it, leave it");     }27 </script>

Here we listen to all the events, below we can see the output under the correct call:

Of course, I personally think that the Ajax of ASP. NET MVC is a little chicken, with a backbone.js framework and ASP. NET Web API basically directly seconds to kill, of course, for the simple page with its own or pretty fast.

ASP. NET MVC Learning Ajax (end)