Ajax helper Methods

The use of Ajax technology can help the site to reduce the opportunity to switch pages, speed response speed, reduce network download traffic, but also to make users experience better. With the help of Ajax in the ASPNET MVC, many Ajax interactions can be achieved quickly and easily.

  Before using AJAX, it is necessary to load the JQ and the Jquery.unobtrusive-ajax.js file contained in the MVC4.0 project template before the page can perform properly,  in order for the website to load the appropriate JS library, You must now load the appropriate JS file into the layout page, in fact in Mvc4. 0 of the Internet Project template has been added on the _layout.cshtml page JQ loading, you can open the main page to see the bottom of the @scripts.render ("~/bundles/jquery") @RenderSection (" Scripts ", Required:false)   The first sentence means to load the Jquery-1.7.1.js file in the project, because AJAX functionality is not required for every page, so presets are not loaded and can be reserved by the main page Rendersection zone to load jquery.unobtrusive-ajax.js file   If you need to use Ajax helper methods on the page, add the following @section syntax at the top of this page   @section scripts{ }   using Ajax Hyperlinks The Ajax helper method will have a ajaxoptions type parameter than the HTML helper to control the various parameters of Ajax execution, public ActionResult GetTime () {return Content (Datetime.Now.ToString (F "))}  @Html. ActionLink (" Get Current Time "," GetTime ")   Output < label a href= "/home/gettime" > Get current Time </label a>  when this hyperlink is clicked, it is linked to another/home/gettime page, If you want to use Ajax instead of dynamically uploading the results of/home/gettime Web pages to one of the current Web pages, you can rewrite @ajax.actionlink ("Get Current Time", "GetTime", new Ajaxoptions{updatetargetid = "Now"})  < tag div id= "Now" ></label div>  output < label a data-ajx= "true" Data-ajax-mode= "Replace" Data-ajaX-update= "#now" href= "/home/gettime" > Get current time </label a> < tag Div id= "Now" ></label div>  after opening Web page , click this hyperlink, the browser will automatically get the full content of the/home/gettime page, and fill in now div block. Note: In the process of getting web content through Ajax, the browser will be able to make the execution more efficient, it will preset the Web content through Ajax, as long as the AJAX call URL does not change, and the remote HTTP does not contain the cache-related headers, then the browser will not again emit AJAX requirements, just for example. , when the first click to get back to the current server time, when the second point to select the same URL, the case should see the update time is right, but the results will never be updated, unless the browser cache,  if the need for AJAX callback data must be updated in a timely manner, Then you have to adjust your action method definition, add a OutputCache property, force the browser not to cache this page's requirements [OutputCache (nostore=true,duration=0)]public ActionResult GetTime () {return Content (Datetime.Now.ToString (F "))}  uses AJAX form functions such as @using ( Html.BeginForm ()) {To change to ajax@using ( Ajax. BeginForm (New ajaxoptions{updatetargetid= "Now"}))  @ Ajax.actionlink execution Process 1, the user click Hyperlink 2, the action URL defined by the href attribute on the hyperlink issued an HTTP request 3, the content is retrieved and then filled in the Ajaxoptions object's Updatetargetid property specified by the ID element  @ Ajax.beginform execution Flow 1, the user sends out Form 2, the action URL of the Action property on the form element is issued an HTTP request, and the form all data passed, 3, the content is retrieved and then filled in the Ajaxoptions object Updatetargetid property specified by the I The D element.   Understanding Ajaxoptions Type Whether you use Ajax.actionlink or ajax.beginform, you need to pass in the Ajaxoptions object as a parameter, which will determine how ASP. NET MVC works. Ajaxoptions Property Name Confirm a confirmation dialog box HttpMethod set the HTTP setting method before executing Ajax insertionmode setting to retrieve data through an AJAX-assisted method There are three ways to add data to an element specified by Upfatetargetid (named UTI): insertionmode.replace: Replace UTI content (preset) Insertionmode.insertbefore: Insert Insertionmode.insertafter before UTI Insert  loadingelementid in the element ID value that is displayed before Ajax has completed all work   Onbegin the JS function name to be executed at the beginning of the set start  oncomplete the JS function name to be executed at the end of the set  onfailure set to execute when the  onsuccess setting is completed.  updatetargetid set the callback value to show on which ID  url set AJAX request URL   when using onbegin,oncomplete,onfailure,onsuccess  With these four attributes, if the specified function name does not exist in the Web page, a JS error    instance will occur: @Ajax. ActionLink ("Delete data", "GetTime", new {controller= "Home", id=3,new ajaxoptions{onsuccess= "Delete", confirm= "Are you sure you want to delete it?" ", httpmethod=" POST ", loadingelementid=" Ajaxload "}})   <<span > tag Script tag >function Delete ( Data) {alert (data);} </</span> Tag Script tab >

Ajax Helper Methods