A brief analysis of the use of Ajax in Asp.net MVC

In ASP.NET MVC beta, we can use Ajax.BeginForm, Ajax.ActionLink to make Ajax calls. Similarly, we can also use some Ajax-supported frameworks such as jQuery to simplify ajax calls.

1. Using System.Web.Mvc.Ajax

　1.1 System.Web.Mvc.Ajax.BeginForm

　1.2 System.Web.Mvc .Ajax.ActionLink

2. Manually create your own "non-intrusive" Javascript"

1. Use System.Web.Mvc.Ajax

1.1 System.Web.Mvc.Ajax.BeginForm

Step 1: Create Form## with Ajax.BeginForm

#

  @using (Ajax.BeginForm(
    new AjaxOptions()
    {
      HttpMethod = "post",
      Url = @Url.Action("Index","Reviews"),
      InsertionMode = InsertionMode.Replace,
      UpdateTargetId = "restaurantList",
      LoadingElementId = "loding",
      LoadingElementDuration = 2000
    }))
  {
     <input type="search" name="searchItem"/>
     <input type="submit" value="按名称搜索"/>
  }

The final generated 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="2000"
    data-ajax-loading="#loding"
    data-ajax="true"
    action="/Reviews" novalidate="novalidate">

Step 2: Create Ajax.BeginForm The new AjaxOptions() object's Url points to Action

 new AjaxOptions()
    {
　　　　　　 ...
      Url = @Url.Action("Index","Reviews")　　　
      ...
       }
    public ActionResult Index(string searchKey = null)
    {
      var model = _restaurantReviews.Where(r => searchKey == null || r.Name.ToLower().Contains(searchKey.ToLower().Trim()))
        .OrderByDescending(r => r.Rating)
        .Take(100)
        .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);//模拟处理数据需要的时间
        //return View(model)会返回整个页面，所以返回部分视图。
        return PartialView("_RestaurantPatialView", model);
      }
      return View(model);
    }

Note:

Instructions on using System.Web.Mvc.Ajax:

Action method of Controller:

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

　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　himgate in us in in in\\Ajax[HttpGet], The HttpMethod passed to AjaxOptions() of System.Web.Mvc.Ajax can only be "get",

　　　 (3) When all Without explicitly adding [HttpPost] and [HttpGet], the HttpMethod passed to AjaxOptions() of System.Web.Mvc.Ajax can be "get" or "post",

Third Step: Add the html element to host the updated page,

That is, add the html element whose ID is restaurantList specified by the UpdateTargetId parameter of the AjaxOptionsd object:

Here add to the page: id is restaurantList的

：

<p id="restaurantList">...
</p>

## Step 4: (Optional) To enhance the user experience, add an AjaxOption object The ID specified by the LoadingElementid parameter is the HTML element of Loding:

的

# This is added to the page: The ID is the element of Loding, which adds one containing a containing one Dynamic refresh pictures & lt; p & gt;:

CSHTML files:

r 动

#1.2 System.Web.Mvc.Ajax.ActionLink

The usage of System.Web.Mvc.Ajax.ActionLink and System.Web.Mvc.Ajax.BeginForm are basically the same

The first step: Use System.Web.Mvc.Ajax.ActionLink to create a hyperlink

  new AjaxOptions()
    {
      ....
      LoadingElementId = "loding",
      LoadingElementDuration = 2000
    }))

The corresponding generated final html is:

<p id="loding" hidden="hidden">
  <img class="smallLoadingImg" src="@Url.Content("~/Content/images/loading.gif")" />
</p>

Step 2: Define the Action to respond to the hyperlink:

 @*@Html.ActionLink(item.Name, "Details", "Reviews",new{id = item.Id},new {@class ="isStar"})*@
            @*<a class="isStar" href="@Url.Action("Details","Reviews", new {id = item.Id})">@item.Name</a>*@
            @*使用Ajax的超链接*@
            @{
              var ajaxOptions = new AjaxOptions()
              {
                HttpMethod = "post",
                //Url = @Url.Action(""),
                UpdateTargetId = "renderBody",
                InsertionMode = InsertionMode.Replace,
                LoadingElementId = "loding",
                LoadingElementDuration = 2000
              };
              @Ajax.ActionLink(item.Name, "Details", "Reviews", new { id = item.Id }, ajaxOptions, new {@class="isStar"}) 
            }

Step 3: Define the bearer Update some html elements:

<a class="isStar" 
　　href="/Reviews/Details/1" 
　　data-ajax-update="#renderBody" 
　　data-ajax-mode="replace" 
　　data-ajax-method="post" 
　　data-ajax-loading-duration="2000" 
　　data-ajax-loading="#loding" 
　　data-ajax="true">

## Step 4: (Optional) To enhance the user experience, add the AjaxOptionsd object The Id specified by the LoadingElementId parameter is the loading html element:

Same as the fourth step in 1.1.

2. Manually create your own "non-intrusive" Javascript"

Step one: Add a form:

 /// <summary>
    ///关于使用System.Web.Mvc.Ajax的说明：
    /// Controller的Action方法：
    ///  （1）当显式添加[HttpPost]，传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod只能为 "post",
    ///  （2）当显式添加[HttpGet]，传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod只能为 "get",
    ///   (3) 当都没有显式添加[HttpPost]和[HttpGet]，传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod可以为 "get"也可以为"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);
    }

The generated form is:

   <p id="renderBody">
             ....     
        </p>

Step 2: Add Action to process the form:

This is the same as the second step in 1.1.

Step 3: Add Js to process the form:

@* ---------------------------------------------------------
     需要手工为Form添加些属性标签，用于锚点
  模仿MVC框架的构建自己的“非介入式Javascript”模式
  -------------------------------------------------------*@
<form method="post"
   action="@Url.Action("Index")"
   data-otf-ajax="true"
   data-otf-ajax-updatetarget="#restaurantList">
  <input type="search" name="searchItem" />
  <input type="submit" value="按名称搜索" />
</form>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

JSONP for AJAX cross-domain request to obtain JSON data

Realize mobile phone positioning based on h5 ajax

Use the H5 feature FormData to upload files without refreshing

##

The above is the detailed content of A brief analysis of the use of Ajax in Asp.net MVC. For more information, please follow other related articles on the PHP Chinese website!