Asp.net MVC での Ajax の使用の簡単な分析

ASP.NET MVC ベータ版では、Ajax.BeginForm、Ajax.ActionLink を使用して Ajax 呼び出しを行うことができます。同様に、jQuery などの一部の Ajax サポート フレームワークを使用して Ajax 呼び出しを簡素化することもできます。

1. System.Web.Mvc.Ajaxを使用する

1.1 System.Web.Mvc.Ajax.BeginForm

1.2 System.Web.Mvc.Ajax.ActionLink

2. " by hand "JavaScript"

I. system.web.mvc.ajax を使用します

1.1 system.web.mvc.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="按名称搜索"/>
  }

最終的に生成されるフォームは次のとおりです以下の通り:

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

ステップ2: Ajax.BeginFormの新しいAjaxOptions()オブジェクトのUrlが指す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);
    }

注:

使用について 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」にすることができます,

ステップ 3: 更新されたページをホストする html 要素を追加します,

つまり、html 要素を追加しますその ID は、AjaxOptionsd オブジェクトの UpdateTargetId パラメーターで指定された restaurantList です:

ここでページに追加します:

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

ステップ 4: (オプション) ユーザー エクスペリエンスを向上させるために、IDml 要素を追加しますAjaxoption オブジェクトのloadingElementidパラメータでLodingのIDML要素に指定:

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

ページに追加: IDはLodingの要素であり、動的を追加します 画像を更新 & lt; :

CSHTML ファイル 追加:

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

E

1.2 System.web.mvc.ajax.actionLink

System.web.mvc.aCTINK およびSystemm と Systemm の使用法。 Web.Mvc.Ajax.BeginForm は基本的に同じです

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

ステップ 2: ハイパーリンクに応答するアクションを定義します:

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

ステップ 3: 更新部分を含む HTML 要素を定義します:

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

ステップ 4: (オプション) ユーザー エクスペリエンスを強化するには、AjaxOptionsd オブジェクトの LoadingElementId パラメーターで指定された Id が loding である HTML 要素を追加します:

1.1 の 4 番目のステップと同じです。

2 番目に、独自の「非侵入型」JavaScript を手動で作成します

ステップ 1: フォームを追加します:

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

生成されるフォームは次のとおりです:

@* ---------------------------------------------------------
     需要手工为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>

ステップ 2: 処理フォームを追加しますアクション:

これは 1.1 の 2 番目のステップと同じです

ステップ 3: フォームを処理するための Js を追加します:

<form data-otf-ajax-updatetarget="#restaurantList" 
     data-otf-ajax="true" 
     action="/Reviews" 
     method="post" 
     novalidate="novalidate">

上記は、皆さんの参考になれば幸いです。

関連記事:

JSONP を使用して JSON データを取得する AJAX クロスドメイン リクエスト

h5 ajax に基づいて携帯電話の測位を実装する

H5 機能 FormData を使用してファイルのアップロードを実現するリフレッシュせずに

以上がAsp.net MVC での Ajax の使用の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。