An analysis of AJAX usage _ajax correlation in asp.net MVC

First, the use of System.Web.Mvc.Ajax

1.1 System.Web.Mvc.Ajax.BeginForm

1.2 System.Web.Mvc.Ajax.ActionLink

Second, by hand to create their own "non-intrusive" Javascript

First, the use of System.Web.Mvc.Ajax

1.1 System.Web.Mvc.Ajax.BeginForm

The first step: Create a form with Ajax.beginform

  @using (Ajax.beginform (
    new Ajaxoptions ()
    {
      HttpMethod = "Post",
      Url = @Url. Action ("Index", "reviews" ),
      Insertionmode = insertionmode.replace,
      updatetargetid = "Restaurantlist",
      Loadingelementid = " Loding ",
      loadingelementduration =})"
  {
     <input type= "search" name= "Searchitem"/>
     <input type= "Submit" value= "Search by name"/>
  }

The resulting form is as follows:

 <form id= "Form0" method= "post" data-ajax-url= "/reviews" data-ajax-update= "
    #restaurantList"
    Data-ajax-mode= "Replace"
    data-ajax-method= "post"
    data-ajax-loading-duration= "
    data-ajax-loading= "#loding"
    data-ajax= "true"
    action= "/reviews" novalidate= "Novalidate" >

Step two: Create the URL of the Ajax.beginform new Ajaxoptions () object that points to the action

 New Ajaxoptions ()
    {
...
      URL = @Url. Action ("Index", "reviews")
      ...
       }
    Public ActionResult Index (string searchkey = null)
    {
      var model = _restaurantreviews.where (r => Searchkey = = nul L | | R.name.tolower (). Contains (Searchkey.tolower (). Trim ())
        . OrderByDescending (R => r.rating)
        . Take (MB)
        . Select (r=>new restaurantreview ()
        {City
          = r.city,
          Country = r.country,
          Id = r.id,
          Name = R. Name,
          Rating = r.rating
        }). ToList ();
      if (Request.isajaxrequest ())
      {
        System.Threading.Thread.Sleep (1000 * 3);//Simulate the time required to process the data
        //return View ( Model) Returns the entire page, so a partial view is returned. return
        Partialview ("_restaurantpatialview", model);
      }
      return View (model);
    }

Attention:

Instructions for using System.Web.Mvc.Ajax:

Controller action Method:

(1) when the [HttpPost] is explicitly added, the HttpMethod of the Ajaxoptions () passed to System.Web.Mvc.Ajax can only be "post",

(2) when the [HttpGet] is explicitly added, the HttpMethod of the Ajaxoptions () passed to System.Web.Mvc.Ajax can only be "get",

(3) When none is explicitly added [HttpPost] and [HttpGet], the HttpMethod to the System.Web.Mvc.Ajax ajaxoptions () can be either "get" or "post",

Step three: Add the HTML element to host the update page,

This is the HTML element with the ID restaurantlist specified by the Updatetargetid parameter that adds the AJAXOPTIONSD object:

Here, add the page: <div> with ID restaurantlist:

<div id= "Restaurantlist" ....
</div>

Fourth step: (optional) to enhance the user experience, add the Ajaxoption object's Loadingelementid parameter to the HTML element with the ID loding specified:

  New Ajaxoptions ()
    {
      ....
      Loadingelementid = "Loding",
      loadingelementduration =
    }))

Here in the page add: ID loding element, added contains a dynamic refresh picture <div>:

Add in cshtml file:

<div id= "loding" hidden= "hidden" > 
</div>

1.2 System.Web.Mvc.Ajax.ActionLink

System.Web.Mvc.Ajax.ActionLink is basically consistent with System.Web.Mvc.Ajax.BeginForm usage

            First: Create a hyperlink using System.Web.Mvc.Ajax.ActionLink                 

 @* @Html. ActionLink (item. Name, "Details", "reviews", New{id = Item. id},new {@class = "Isstar"}) *@
            @*<a class= "Isstar" @Url. Action ("Details", "href=", new {id = Item. ID}) "> @item. name</a>*@
            @* uses Ajax hyperlinks *@
            @{
              var ajaxoptions = new Ajaxoptions ()
              {
                HttpMethod = "POST",
                //url = @Url. Action (""),
                Updatetargetid = "Renderbody",
                insertionmode = insertionmode.replace,
                loadingelementid = "Loding"
                , Loadingelementduration =
              n};
              @Ajax. ActionLink (item. Name, "Details", "reviews", new {id = Item. Id}, Ajaxoptions, new {@class = "Isstar"}) 
            }

The final HTML that corresponds to the generated is:

<a class= "Isstar" href= "/REVIEWS/DETAILS/1" "data-ajax-update=" 
#renderBody " 
data-ajax-mode=" Replace " 
data-ajax-method=" post " 
data-ajax-loading-duration=" 
data-ajax-loading= "#loding" 
data-ajax= "true" >

Step two: Define the action that responds to the hyperlink:

 <summary>
    ///instructions for using System.Web.Mvc.Ajax:
    ///Controller action method:
    ///  (1) when explicitly adding [ HttpPost], the HttpMethod of the Ajaxoptions () passed to System.Web.Mvc.Ajax can only be "post",
    ///  (2) when explicitly added [HttpGet], The HttpMethod of Ajaxoptions () passed to System.Web.Mvc.Ajax can only be "get", and
    ///   (3) does not explicitly add [HttpPost] and [HttpGet]. The HttpMethod of Ajaxoptions () passed to System.Web.Mvc.Ajax can be either "get" or "post",
    ///</summary>
    ///<param Name= "id" ></param>
    ///<returns></returns> public
    actionresult Details (int id=1)
    {
      var model = (from R in _restaurantreviews
        where r.id = = Id
        Select r). FirstOrDefault ();
      if (Request.isajaxrequest ())
      {return
        Partialview ("_restaurantdetails", model);
      }
      return View (model);
    }

Step three: Define the HTML element that hosts the update section:

   <div id= "Renderbody" > ...
             .     
        </div>   

Fourth step: (optional) to enhance the user experience, add the AJAXOPTIONSD object's Loadingelementid parameter to the HTML element with the ID loding specified:

The same as the fourth step of 1.1.

Second, by hand to create their own "non-intrusive" Javascript

First step: Add the form:

@*---------------------------------------------------------
     need to manually add some attribute tags to the form for the anchor point to
  mimic the MVC framework's build Own " Non-intrusive JavaScript "mode
  -------------------------------------------------------*@
<form method=" POST "
   Action= "@Url. Action (" Index ")"
   data-otf-ajax= true "
   data-otf-ajax-updatetarget=" #restaurantList ">
  <input type= "search" name= "Searchitem"/> <input "
  submit" type= "Searching by name" Value=
Form>

The resulting form is:

<form data-otf-ajax-updatetarget= "#restaurantList" 
     data-otf-ajax= "true" 
     action= "/reviews" 
     method = "POST" 
     novalidate= "Novalidate" >

Step Two: Add action to process the form:

This is the same as the second step of 1.1.

Step three: Add JS processing form:

$ (function () {
  var ajaxformsubmit = function () {
    var $form = $ (this);
    var ajaxoption = {
      type: $form. attr ("method"),
      URL: $form. attr ("action"),
      Data: $form. Serialize ()
    };
    $.ajax (ajaxoption). Done (function (data) {
      var updatetarget = $form. attr ("Data-otf-ajax-updatetarget");
      var $updateTarget = $ (updatetarget);
      if ($updateTarget. length > 0) {
        var $returnHtml = $ (data);
        $updateTarget. Empty (). append (data);
        $returnHtml. Effect ("highlight");
      }      
    );
    return false;
  $ ("form[data-otf-ajax= ' true ']"). Submit (Ajaxformsubmit);

Attention:

The so-called "non-intrusive JavaScript" mode means that if you do not add this step, the form can still be processed, but it is useless to Ajax.