ASP.NET MVC 4でのAJAX統合

おそらく、Ajaxのことを聞いたことのないWeb開発者はもういないでしょう。 この状況のマイクロソフトは、ASP.NET MVC開発者の皆様の生活を楽にするためにリリースするたびに、loしみないことはできません。 しかし、記事を続ける前に、このトピックから少し脱線します。



MVCフレームワークに@Ajax....



とき、それは2番目のバージョンでしかなく、 @Ajax....



などのヘルパーに直面してい@Ajax....



率直に言って、クライアント側での実装は感心しませんでした。 いいえ、いいえ、私は自分自身に思った、私は私の$.ajax



でjQueryを持っている、私はそれを私の目に持っています。 だから、3年目のリリースでこの瞬間を逃してしまったことを、残念ながら数年間忘れていました。 何だった。 幸運なことに、MVC 4について2冊の本を読んで考えました。次に、上記のヘルパーのおかげでコード行の記述を減らす方法を説明します。



そもそも、MVCは2つのバージョンのAjaxライブラリ（もちろん、ボックスを意味しますが、それ以上のことはありません）-jQueryとMicrosoft Ajaxで動作します。 どのアダプターのマークアップを作成するかを知るために、 web.config



UnobtrusiveJavaScriptEnabled



設定があり、対応する値はtrue



（jQueryを使用する場合）およびalse



（Microsoft Ajaxを使用する場合）です。 1つのビューの値のみを変更する必要がある場合は、メソッド@{Html.EnableUnobtrusiveJavaScript(bool);}



使用できます。 この設定は、クライアント側の検証データの形成にも影響することに注意してください。





希望するオプションに応じて、適切なアダプターを接続する必要があります。 Microsoft Ajaxの場合

 <script src="~/Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="~/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

、jQuery用

 <script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上で書いたように、jQueryのバージョンは私にとっては問題ありません。 したがって、控えめなJavaScriptのパス（つまり、 web.config



with />



）に従い、最も単純なものから始めます。

アクションリンク

この問題を考慮してください。 リンクがあり、それをクリックすると、コンテナの内容を更新したいです。 前にやったこと。



スライスアクションメソッド

 public ActionResult Index() { if (Request.IsAjaxRequest()) return PartialView("_IndexPartial"); return View(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Index



ビュー

 <script type="text/javascript"> jQuery(function($) { $('#update-container').click(function(e) { e.preventDefault(); $.ajax({ url: '@Url.Action("Index", "Home")', success: function(data) { $('#container').html(data); } }); }) }) </script> <div id="container"> @Html.Partial("_IndexPartial") </div> @Html.ActionLink(" ", "Index", "Home", new {}, new {id = "update-container"})
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

_IndexPartial



パーシャルビュー

 <div>     </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ほとんどは、 Html. ActionLink(...)



などのヘルパーメソッドに精通していHtml. ActionLink(...)



上記に示したHtml. ActionLink(...)



。 原則として、多くのコード行はなく、すでにそのようなプログラミングに慣れているように思われるので、すべては大丈夫ですが、私は非常に怠zyなプログラマーであり、私の能力の限りでは、清潔さとコードの削減のために戦っています。 したがって、プレゼンテーションを22行から5行に減らすことができます。そして、 Ajax.ActionLink(...)



が私の助けになります（もちろん、懐疑論者は.load



$.get



.load



または$.get



を使用できますが、本質的にはこれは変わらず、ビューを縮小しました。ビューは時々膨らみ始めます）



出来上がり、 Index



ビュー

 <div id="container"> @Html.Partial("_IndexPartial") </div> @Ajax.ActionLink(" ", "Index", "Home", new {}, new AjaxOptions{UpdateTargetId = "container"}, new {id = "update-container"}) //id     ,    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2つの高度なメソッドHtml.ActionLink



とAjax.ActionLink



は、 AjaxOptions



オブジェクトという1つのパラメーターのみにあります。 彼について話しましょう。

Ajaxoptions

ご覧のように、原則として、彼は多くのプロパティを持っていませんが、一方で、オブジェクトであろうとライブラリであろうと、銀の弾丸を作成し始めると良いでしょう。



どのプロパティが何に責任があるのか​​、MSDNとは言えません。







プロパティを見てみましょう。



Confirm



類似confirm(...)







HttpMethod



string



型、最も興味深いのは、MSが2つのメソッドのみHttpMethod



を強制したことHttpMethod



理由はわかりません。明らかに、アルゴリズムは、すべてがGET



、 null



または.Trim()



後の空の文字列ではないことです



InsertionMode



値が「 InsertAfter



」（コンテナの最後に挿入）、「 InsertBefore



」（コンテナの先頭に挿入）、または「 Replace



」（コンテナの内容をReplace



）の列挙



Loading...



元の非表示要素



On.....



$.ajax



に似たjavascript関数

• OnBegin
  
  
  
  - beforeSend
  
  
  
  
• OnComplete



complete
  
  
  
  
• OnFailure



error
  
  
  
  
• OnSuccess



success
  
  
  
  

Url



-ajaxリクエストから別のルート/コントローラー/アクション/パラメーターへのリクエストを解析する必要がある場合、個別のajaxリクエストアドレスへのリンク（必要に応じて下線を引く）

Ajaxヘルパーメソッド

最後に、私たちの生活を時折楽にする方法のプレートを提供したいと思います。

Ajax.ActionLink	コントローラーアクションへのハイパーリンクを作成します。クリックすると、Ajaxリクエストが送信されます。
Ajax.RouteLink	Ajax.ActionLink に似ていますが、コントローラーアクションではなく、特定のルートへのリンクを作成します
Ajax.BeginForm	特定のコントローラーアクションに入力を送信するフォーム要素を作成します
Ajax.BeginRouteForm	Ajax.BeginForm に似ていますが、コントローラーアクションではなく、特定のルートでリクエストを送信します
Ajax.GlobalizationScript	言語と地域の設定に関する情報を含むグローバリゼーションスクリプトへのリンクを作成します
Ajax.JavaScriptStringEncode	JavaScriptで安全に使用できるように文字列をエンコードします

段階的な劣化の確保

この状況を考慮してください。 AjaxリクエストはJSON / XML /パーシャルビューを返します-すべてが正常ですが、ユーザーがJavaScriptを無効にしている場合、またはブラウザーがJavaScriptをまったくサポートしていない場合、このアプローチはまったく受け入れられません。 このような場合、ページをユーザーに完全に返す必要があります。 1つの解決策は、1つのアクションメソッドでワイヤリングを使用して、このリクエストがAjaxリクエストであるかどうかを判断することです。 これは、前述のようにRequest.IsAjaxRequest()



を使用して実行できます。



問題の2番目の解決策は、2つの異なるアクションメソッドを作成することです。1つはAjaxリクエスト用で、もう1つは通常の方法です。 ユーザーから受け取ったコメントを保存する単純化されたタスクについて、このオプションを詳しく見てみましょう。



2つのアクションメソッドを作成します

 [HttpPost] public ActionResult AddComment(string comment) { //  return View(); } [HttpPost] public ActionResult AddCommentAjax(string comment) { //  return Json(new {resultMessage = "   !"}); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

AddComment



ビュー

 <h3>   !</h3>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フォームでのプレゼンテーション

 <script type="text/javascript"> function OnSuccessComment(data) { alert(data.resultMessage); } </script> @using (Ajax.BeginForm("AddComment", new AjaxOptions { Url = Url.Action("AddCommentAjax"), OnSuccess = "OnSuccessComment", HttpMethod = "POST" })) { @Html.TextArea("comment") <input type="submit" value=" "/> }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仕組み

次のフォームはブラウザ用にレンダリングされます

 <form id="comment-form" action="/Home/AddComment" method="POST" data-ajax-url="/Home/AddCommentAjax" data-ajax-success="OnSuccessComment" data-ajax-method="POST" data-ajax="true"> <textarea rows="2" name="comment" id="comment" cols="20"></textarea> <input type="submit" value=" "> </form>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

@using (Html.BeginForm("AddComment", "Home"))



との違いは、追加のdata-



属性のみであることが@using (Html.BeginForm("AddComment", "Home"))



ます。 つまり、無効なJavascriptの場合、フォームはpublic ActionResult AddComment(string comment)



れます。 JavaScriptが有効な場合、アダプターはdata-



属性からdata-



読み取り、フォームdata-



をインターセプトし、 public ActionResult AddCommentAjax(string comment)



要求を行います。 送信されたJSONの形式で成功した結果を取得し、指定されたjsでOnSuccessComment



関数を処理します。

まとめ

私の記事の目的は、車輪の再発明をせずに、少し加速できることを示すことだけでした（私は自分で判断するだけです）。

---

本の章は、私にこの記事を書くきっかけになりました。

ASP.NET MVCのAjax（ASP.NET MVC 4が動作中）

そして

URLおよびAjaxのヘルパーメソッド（pro ASP.NET MVC 4）

---