ASP.NET MVC4 IN ACTION學習筆記-第六波[Ajax in ASP.NET MVC][2/3]

閱讀第六波導航：

ASP.NET MVC4 IN ACTION學習筆記-第六波[Ajax in ASP.NET MVC][1/3]

ASP.NET MVC4 IN ACTION學習筆記-第六波[Ajax in ASP.NET MVC][3/3]

         原著：ASP.NET MVC 4 IN ACTION

         大家好!

         我是茗洋芳竹,首先聲明,我不是一個翻譯人員,我是個90後程式員.

         本波原文含有一些JQuery基礎的教程,在本波中我省略了.所以如果你沒有JQuery基礎,我認為你沒有必要繼續閱讀下去,建議你還是先瞭解一下JQuery相關的內容!由於你們的支援,我打算把自己的部落格做的有品質點.前幾天學了一點前端的知識,所以MVC4系列部落格拖到了今天才發布了,與原計劃晚了幾天,首先道個歉.

         老實說,這篇部落格的內容真的很多~

 

7.2     ASP.NET MVC Ajax Helpers

           到目前為止，我們都是看了在用戶端如何寫JavaScript代碼發送資料到伺服器和從伺服器取回資料。我們現在來看一下使用ASP.NET MVC操作Ajax，我們使用Ajax Helpers.

           一開始，我們會看幾個Ajax方法，還有它們和jQuery或者JavaScript庫關聯的。通過它們也可以實現我們手工寫jQuery代碼的部分實現的效果。

           這些使用到的helpers，是AjaxHelper類的拓展方法，這個類可以通過Ajax發送和獲得資料後，自動地用來產生HTML標籤，這些Helpers如下：

（這裡英文的不要緊，不要怪我了，因為我覺得翻譯過來也不太好理解，還不如寫demo理解出來）

在這些技術下，Ajax Helper利用了JavaScript庫進行了真實的Ajax請求。這些標籤沒有和任何一個特定的庫進行綁定，而是利用了一個適配器層，這個適配器層知道如何發出Ajax請求。ASP.NET MVC有個能調節Microsoft Ajax和jQuery的適配器，就是這個適配器。它們兩個哪個被使用取決於這個應用程式的配置。

當你建立一個新的ASP.NETMVC項目的時候，在最外層的web.config中有下面一行代碼

如果設定被啟用（true的時候），通過Ajax Helper產生的標籤（markup）將會使用和上波文章7.1節位置的代碼一樣，就可以使用unobtrusive JavaScript這種簡單的方法實現Ajax效果。但是設定被禁用（false）的時候，這些Helpers就會使用Microsoft Ajax庫替代產生markup。推薦把它設定為true，我們會在7.2.4節中講到如果設定為false的時候，會發生什麼。

NOTE：除了在web.config中設定UnobtrusiveJavaScriptEnabled為true外，你也可以在Global.asax檔案的Application_Start中設定HtmlHelper.UnobtrusiveJavaScriptEnabled屬性為true作為一個全域的設定，一個替代的思路。

 

 

根據UnobtrusiveJavaScriptEnabled是true還是false，ASP.NET MVC's Ajax helpers 將會產生一個相容特定的適配器層的markup，這個適配器層知道如何接受這些標籤，然後調用合適的JavaScript庫去實際工作。

 

 

下面是ASP.NET MVC Ajax helpers和

JavaScript庫的關係圖

 

 

 

 

 

 

 

 

 

 

7.2.1    Ajax.ActionLink

         接下來我們使用一下ActionLink Ajax Helper，修改Index.cshtml檔案代碼如下：

接下來我們使用一下ActionLink Ajax Helper，Controller我們就不要修改了，我們修改Index.cshtml視圖.你可以對比一下，Html的ActionLink和Ajax的ActionLink： 第一個參數-要顯示的文本，第二個參數-請求的控制器中的action名字，在Ajax的ActionLink中，有個AjaxOptions參數，這裡代碼的意思是，將請求成功後的資料，以替換（replace）的方式，把id為privacy的DOM元素中的html代碼全部替換掉。 InsertionMode是個枚舉，你可以自己試著用一下。

   1:  @{

   2:      ViewBag.Title = "Index";

   3:  }

   4:  @section head{

   5:      <script type="text/javascript"  src="@Url.Content("~/scripts/AjaxDemo.js")"></script>

   6:       <script type="text/javascript" src="@Url.Content("~/scripts/jquery.unobtrusive-ajax.js")"></script>

   7:      }

   8:   

   9:      @Html.ActionLink("Show the privacy policy",

  10:              "PrivacyPolicy", null, new { id = "privacyLink" })

  11:  <br />

  12:  @Ajax.ActionLink("Show the privacy policy2", 

  13:                             "PrivacyPolicy", new AjaxOptions {

  14:                               InsertionMode = InsertionMode.Replace, UpdateTargetId = "privacy" 

  15:                             })

  16:  <div id="privacy"></div>

按下F5運行程式，我們可以查看到通過Ajax助手產生的html代碼是下面這個樣子的，我們看到了熟悉的unobtrusive javascript風格的代碼

<a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#privacy" href="/AjaxHelper/PrivacyPolicy">Show the privacy policy2</a>

當頁面載入的時候，在jquery-unobtrusive.ajax的指令碼將會尋找含有data-ajax屬性的所有連結，找到後綁定單擊事件。同樣地，如果瀏覽器禁用了Javascript，這個link將作為一個正常的link的作用，回到了non-Ajax（無Ajax）行為。

 HTML5 Data Attributes

data-*屬性，比如data-ajax和data-ajax-update都是著名的HTML5的屬性（Attribute），它提供了使用額外的中繼資料（  metadata）來實現註解（annotate）HTML element元素。雖然你在這裡你提供了Ajax請求的相關資訊，但是你在這裡可以在用戶端，寫你自己將要訪問的中繼資料（metadata）

雖然這些自訂屬性是HTML5詳細指南的一部分，但是它們在不支援（例如IE6）HTML的瀏覽器上沒有任何問題，可以正常的工作。

7.2.2    Ajax.BeginForm

 

 

   同樣地你也可以使用 ASP.NET’s  Ajax.BeginForm helper 也可以實現非同步提交表單資料。

  開啟這個頁面，我們繼續寫代碼

添加代碼後代碼如下：

@model IEnumerable<string> 

@{

    ViewBag.Title = "Index";

}

@section head{

    <script type="text/javascript" src="@Url.Content("~/scripts/jquery.unobtrusive-ajax.js")"></script>

}

<h4>Comments</h4>

<ul id="comments">

    @foreach (var comment in Model)

    {

        <li>@comment</li>

    }

</ul>

@using (Ajax.BeginForm("AddComment", new AjaxOptions { UpdateTargetId = "comments", InsertionMode = InsertionMode.InsertAfter }))

{

    @Html.TextArea("Comment", new { rows = 5, cols = 50 })

    <br />

    <input type="submit" value="Add Comment" />

}

@*@Html.ActionLink("Show the privacy policy",

            "PrivacyPolicy", null, new { id = "privacyLink" })*@

<br />

@Ajax.ActionLink("Show the privacy policy2",

                           "PrivacyPolicy", new AjaxOptions

                           {

                               InsertionMode = InsertionMode.Replace,

                               UpdateTargetId = "privacy"

                           })

<div id="privacy"></div>

跟我們在第二章看到的Html.BeginForm一樣，這個Ajax.BeginForm,也用using包裹，BeginForm建立一個表單。用}表示結束，等同於<form/>

我們重載了BeginForm的兩個參數-第一個控制器中的action名字，controller不寫，就代表當前的view所對應的controller。AjaxOptions對象跟Ajax.ActionLink的一樣的

AjaxHelpersController裡面添加代碼如下

  static readonly List<string> _comments = new List<string>();

        public ActionResult Index()

        {

            return View(_comments);

        }

        [HttpPost]

        public ActionResult AddComment(string comment)

        {

            _comments.Add(comment);

            if (Request.IsAjaxRequest())

            {

                ViewBag.Comment = comment;

                return PartialView();

            }

            return RedirectToAction("Index");

        }

        public ActionResult PrivacyPolicy()

        {

            if (Request.IsAjaxRequest())

            {

                return PartialView();

            }

            return View();

        }

然後同樣的，我們複製一下CustomAjax檔案夾的下的AddComment.cshtml到AjaxHelper檔案夾下。

當運行這個頁面的時候，原理都一樣的，雖然表單被額外的 data-ajax屬性修飾了，跟ActionLink很像，下面是：

：

這樣，關於表單的 漸進增強模式（progressive enhancement）已經完成了，以前我們完成的HTML.ActionLink變成了Ajax.ActionLink,現在是表單過渡了。表單有Html.BeginForm變成了Ajax.BeginForm，通過使用了jquery.unobtrusive-ajax 指令碼，表單就會以Ajax形式提交了，但是如果用戶端禁用了JavaScript，這個表單就會以普通的表單發送post請求。

7.2.3    Ajax Options

在幾節裡面，你看到了ActionLink和BeginForm 的Ajax helper都有AJaxOptions對象，這個對象表明了Ajax的結果怎麼被處理。它定義的屬性如下：

如果你以前有jQuery經驗，這些好多都能看的懂。

除了LoadingElementDuration，所有的這些選項在以前的ASP.NET MVC2中都有。但是把這些option放到頁面的標籤裡不一樣了。你看到了，在HTML elements裡，這些選項（options）都以data-*形式產生，然而在MVC2中，他們是被插入到頁面裡面的，以一種更unobtrusive的作法完成。

 

7.2.3    跟以前版本的ASP.NET MVC不同的地方

雖然Ajax helpers 在MVC1就已經是MVC中的一部分了，現在jQuery是預設的。在以前版本的架構，這些helpers都是使用Microsoft Ajax Library，而且沒有採用unobtrusive的方式產生JavaScript。我們可以通過修改web.config節點下的AppSettings下的UnobtrusiveJavaScriptEnabled屬性改為false，就可以恢複以前版本架構的行為了

比如，現在是true，我們把UnobtrusiveJavaScriptEnabled改為false後運行項目：

現在我們使用Ajax.ActionLink後產生的程式碼如下：

把UnobtrusiveJavaScriptEnabled設為false後，沒有再採用data-ajax屬性了，所有的中繼資料都被OnClick事件替代了，為了讓程式正確運行，所以架構要求你必須引用MicrosoftAjax.js 和 MicrosoftMvcAjax.js ，跟unobtrusive風格的代碼比，可讀性不強，不直觀，它也破壞了 Unobtrusive Javascript原則

如果你正在把你以前ASP.NET MVC版本的網站升級，你需要保留這些行為，為了提高相容性，需要把UnobtrusiveJavaScriptEnabled設為false。但是在其他的情形下，把UnobtrusiveJavaScriptEnabled設為true是最好的，因為這樣，HTML產生的時候更直觀，可讀性強，而且微軟很看重ajax的這種Unobtrusive寫法，並且在更新和研究。

 

 博主留言

為了讓讀者有更好的閱讀體驗,打算將每章的內容分開寫.讓每篇的閱讀起來更舒服一點.

同時我每天可以寫一點,同時每天都可以上傳一點,而不必一次性寫完每章的部落格,而一次性發布

內容過多,那麼每次讀者學習,查看的時候,下載的也就越多了.考慮到這個,所以本篇部落格寫到這裡..

晚安,大家!由於源碼檔案過大，先不發布了，等本章部落格全部完成後，一次性發布。