A brief analysis of the use of Ajax in Asp.net MVC-JS Tutorial-php.cn

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="按名称搜索"/>
  }

Copy after login

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">

Copy after login

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);
    }

Copy after login

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>

Copy after login

## 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
    }))

Copy after login

The corresponding generated final html is:

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

Copy after login

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"}) 
            }

Copy after login

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">

Copy after login

## 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);
    }

Copy after login

The generated form is:

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

Copy after login

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>

Copy after login

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

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!