拋磚引玉

      講解一個(gè)英文單詞Unobtrusive，因?yàn)檫@個(gè)單詞在本文中會(huì)很常見(jiàn),也是跟讀者的一個(gè)約定

   1:  <!--以下是常規(guī)Javascript下寫(xiě)出來(lái)的Ajax-->

   2:  <div id="test">

   3:      <a href="/" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'GET', updateTargetId: 'test' });">測(cè)試</a>

   4:  </div>

   5:   

   6:  <!--以下是Unobtrusive Javascript下寫(xiě)出來(lái)的Ajax-->

   7:  <div id="test">

   8:     <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#test" href="/">測(cè)試</a>

   9:  </div>

以上的代碼分別是 MVC 3 在“關(guān)閉”和“開(kāi)啟” Unobtrusive JavaScript 后生成的 Ajax.ActionLink。

那 Unobtrusive JavaScript到 底是什么呢？簡(jiǎn)單地來(lái)說(shuō)，就是一種代碼分離的思想，把行為層和表現(xiàn)層分離開(kāi)。

我理解的意思就是,unobtrusive本意是低調(diào),也就是簡(jiǎn)單的寫(xiě)法風(fēng)格,在這里直接使用了data-ajax，data-ajax-method等自定義規(guī)則的html寫(xiě)法，然后引入一個(gè)懂得這種規(guī)則外部的js文件，實(shí)現(xiàn)了代碼分離的思想。不然的話(huà)，javascript與html標(biāo)簽混在一起，以后很難維護(hù)，也不顯的高級(jí)了。暫且先這樣理解吧

 回憶與引入

以前我們做的很多例子都是把ASP.NET MVC中的view呈現(xiàn)到瀏覽器上去.但隨著瀏覽器的發(fā)展,其實(shí)我們已經(jīng)可以把很多呈現(xiàn)的邏輯放到瀏覽器中去.這樣可以使我們的應(yīng)用程序用戶(hù)體驗(yàn)更好

關(guān)于現(xiàn)在已經(jīng)實(shí)現(xiàn)的很多的客戶(hù)端技術(shù),例如微軟sliverlight,Adobe的Flash已經(jīng)給用戶(hù)很好的體驗(yàn)了.其實(shí)毫無(wú)疑問(wèn),帶來(lái)體驗(yàn)的使用最廣的,還是當(dāng)今所有流行的瀏覽器都支持的Javascript.現(xiàn)在,有很多web應(yīng)用程序能模擬出桌面應(yīng)用程序了,例如GMail,Facebook,Twitter.其中Ajax是其中很關(guān)鍵的一個(gè)技術(shù)

Ajax:用Javascript,發(fā)送異步請(qǐng)求,訪(fǎng)問(wèn)服務(wù)器上的資源,響應(yīng)后局部更新頁(yè)面的內(nèi)容

在本波中,我們將學(xué)習(xí)在ASP.NET MVC中如何使用Ajax.使用Jquery庫(kù)去實(shí)現(xiàn)一個(gè)Ajax請(qǐng)求,使用MVC內(nèi)置的Ajax助手實(shí)現(xiàn)Ajax請(qǐng)求.最后,我們看下如何讓Ajax結(jié)合客戶(hù)端模版很快地生成HTML標(biāo)簽,來(lái)簡(jiǎn)化重復(fù)使用Javascript生成HTML標(biāo)簽.

7.1     Ajax with Jquery

         鏈接:    Jquery官網(wǎng)學(xué)習(xí)          Jquery API 手冊(cè)

7.1.1   Jquery primer(基礎(chǔ))

關(guān)于Jquery基礎(chǔ)知識(shí)的學(xué)習(xí),這里我就不講解了.

 $('div').addClass('foo'); 

 <button id="myButton" onclick="alert('I was clicked!')"> 

            Click me! 

          </button>

<button id="myButton">Click me!</button> 

<script type="text/javascript"> 

            $('button#myButton').click(function() { 

               alert('I was clicked!'); 

            }); 

 </script> 

  $(document).ready(function() { 

             $('button#myButton').click(function() { 

               alert('Button was clicked!'); 

             }); 

          }); 

jQuery是個(gè)很大的話(huà)題，看懂上面幾行代碼,有助于對(duì)下面幾個(gè)章節(jié)的理解.如果你想深入的看下jQuery,有本書(shū)叫《jQuery in Action,Second Edition》是Bear Bibeault 和Yehuda Katz寫(xiě)的,可以參考一下

7.1.2   使用Jquery做Ajax請(qǐng)求

我們采用默認(rèn)的ASP.NET MVC  Internet Application模版來(lái)寫(xiě)個(gè)例子.我們添加一個(gè)簡(jiǎn)單的Controller(里面有兩個(gè)action，Index action，PrivacyPolicy action)

添加一個(gè)AjaxHelpersController

在ASP.NET MVC中返回View時(shí)使用的是ViewResult,它繼承自ViewResultBase 同時(shí)它還有個(gè)兄弟PartialViewResult

相信聰明的你已經(jīng)知道了它倆的區(qū)別了，沒(méi)錯(cuò) 一個(gè)用于返回整體，另一個(gè)返回局部(部分)。

假設(shè)我有一個(gè)需求,輸入用戶(hù)名，然后返回相關(guān)信息,之前的做法可能會(huì)是用json格式來(lái)返回用戶(hù)的相關(guān)信息，然后到頁(yè)面去渲染相關(guān)的HTML，如果產(chǎn)生的相關(guān)HTML比較大的話(huà)，我還是建議你沿用之前的方案(返回json)，因?yàn)閭鬏數(shù)臄?shù)據(jù)少，響應(yīng)快一些。反之，PartialViewResult 則是返回部分HTML 的不錯(cuò)選擇。

使用NuGet package,每次MVC創(chuàng)建項(xiàng)目的時(shí)候,都會(huì)自動(dòng)獲取最新的Jquery js文件,文件放在Scripts文件夾下.

PrivacyPolicy部分視圖代碼如下

<h2>Our Commitment to Privacy</h2>

Your privacy is important to us. To better protect your privacy we provide this notice explaining our online 

information practices and the choices you can make about the way your information is collected and used. 

To make this notice easy to find, we make it available on our homepage and at every point where personally 

identifiable information may be requested.

Index 視圖代碼如下

@{

    ViewBag.Title = "Index";

}

@section head{

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

    }

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

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

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

其中@section head，語(yǔ)法格式是 @section 母板頁(yè)中@RenderSection中定義的名字。我們操作如下：

首先我們修改Global.asax文件，讓F5運(yùn)行程序時(shí)，讓首頁(yè)默認(rèn)是AjaxHelper/Index視圖，然后我們修改母版定義一個(gè)位置

這里在_Layout.cshtml文件中，跟AjaxHelper/Index中的@section head中的head名字一模一樣，沒(méi)錯(cuò)

head在母版中就是一個(gè)位置的名字，然后子頁(yè)面用@section加上母版頁(yè)中的定義的RenderSection的名字，就可以實(shí)現(xiàn)在母版頁(yè)插入一些html代碼。其中@Url.Content估計(jì)你也會(huì)用了。

接下來(lái)我們?cè)赟cripts文件夾下新建一個(gè)js文件  AjaxDemo.js

$(document).ready(function () {

    $('#privacyLink').click(function (event) {

        event.preventDefault();

        var url = $(this).attr('href');

        $('#privacy').load(url);

    });

});

關(guān)于對(duì)jQuery的load方法講解,點(diǎn)擊查看

這里,使用preventDefault方法組織超鏈接的默認(rèn)行為.然后獲得它的href地址,然后使用load方法,加載這個(gè)html片段,把這個(gè)片段放在id為privacy的DOM元素中，也就是<div id="privacy"></div>中,這里的load方法是真正的Ajax請(qǐng)求.

這是一個(gè)簡(jiǎn)單的Unobtrusive JavaScript例子,所有的JavaScript代碼都被放到一個(gè)單獨(dú)分離的文件里.

由于默認(rèn)的MVC中沒(méi)有引入jQuery文件,我們?cè)谀赴骓?yè)中引入

======本波博客來(lái)自茗洋芳竹所有,任何人未經(jīng)允許不得轉(zhuǎn)載:http://www.cnblogs.com/Fresh-air=====

按下F5運(yùn)行項(xiàng)目,效果如下:

點(diǎn)一下超鏈接按鈕,無(wú)刷新頁(yè)面,出現(xiàn)PrivacyPolicy部分視圖中的內(nèi)容

7.1.3  漸進(jìn)增強(qiáng)(progressive enhancement)

progressive enhancement的意思是:在原有的方法上改進(jìn),提升

那么如果客戶(hù)端禁用了JavaScript,那么默認(rèn)的超鏈接行為就會(huì)不能阻止,頁(yè)面將在新標(biāo)簽中打開(kāi),這不是我們想要的

修改AjaxHelperController中的PrivacyPolicy action

  public ActionResult PrivacyPolicy()

        {

            if (Request.IsAjaxRequest())

            {

                return PartialView();

            }

            return View();

        }

我們用了IsAjaxRequest方法判斷請(qǐng)求是不是通過(guò)Ajax方式請(qǐng)求的.如果是true,我們以部分視圖方法呈現(xiàn),如果是false,我們以普通的視圖呈現(xiàn).當(dāng)然你也可以返回一個(gè)空白,或者返回一句話(huà),請(qǐng)確保的你的瀏覽器javascript沒(méi)有被禁用!

這樣加了判斷后,跟上圖中,被禁用了javascript效果一樣,就不演示了.

7.1.3  使用Ajax提交表單數(shù)據(jù)

在7.1.2中,我們看到了當(dāng)單擊超鏈接的時(shí)候,如何從server端取回?cái)?shù)據(jù),當(dāng)然我們也可以異步地提交數(shù)據(jù)到server端.為了說(shuō)明這個(gè),我們拓展我們以前的例子,展示一個(gè)comment列表,當(dāng)用添加數(shù)據(jù)的時(shí)候,無(wú)刷新顯示結(jié)果

我們這里不用數(shù)據(jù)庫(kù)演示了,原理都一樣的

新建一個(gè)CustomAjaxController

   1:  using System;

   2:  using System.Collections.Generic;

   3:  using System.Linq;

   4:  using System.Web;

   5:  using System.Web.Mvc;

   6:   

   7:  namespace AjaxExamples.Controllers

   8:  {

   9:   

  10:      public class CustomAjaxController : Controller

  11:      {

  12:          private static List<string> _comments

  13:               = new List<string>();

  14:   

  15:          public ActionResult Index()

  16:          {

  17:              return View(_comments);

  18:          }

  19:   

  20:          [HttpPost]

  21:          public ActionResult AddComment(string comment)

  22:          {

  23:              _comments.Add(comment);

  24:              if (Request.IsAjaxRequest())

  25:              {

  26:                  ViewBag.Comment = comment;

  27:                  return PartialView();

  28:              }

  29:              return RedirectToAction("Index");

  30:          }

  31:      }

  32:  }

我們用一個(gè)string類(lèi)型的list存comment,這些comment作為一個(gè)model傳入Index view.我們添加一個(gè)含有一個(gè)string類(lèi)型的comment參數(shù)的,只能通過(guò)Post請(qǐng)求訪(fǎng)問(wèn)的AddComment action.

這個(gè)action添加一個(gè)comment到comment列表中,如果是Ajax請(qǐng)求,那么就把更新后的comment列表放到部分視圖的ViewBag中,如果用戶(hù)禁用了Javascript,我們就返回Index action,做一次全頁(yè)面的刷新.

NOTE:這個(gè)例子是非線(xiàn)程安全的.因?yàn)檫@些數(shù)據(jù)時(shí)存儲(chǔ)在靜態(tài)的集合中.在現(xiàn)實(shí)的應(yīng)用程序中,這個(gè)技術(shù)應(yīng)該被避免使用-更好的操作是把數(shù)據(jù)存到數(shù)據(jù)庫(kù)中去,這個(gè)例子沒(méi)有使用數(shù)據(jù)庫(kù),只為快速的演示一下存數(shù)據(jù)的思路

CustomAjax/Index.cshtml代碼如下

@model IEnumerable<string> 

@section head {

    <script type="text/javascript" 

               src="@Url.Content("~/scripts/AjaxDemo.js")"> 

    </script>

}

<h4>Comments</h4>

<ul id="comments">

    @foreach (var comment in Model) {                                  

        <li>@comment</li>                                                  

     }

</ul>

<form method="post" id="commentForm" action="@Url.Action("AddComment")">

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

    <br />

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

</form>

在AjaxDemo.js文件中，添加內(nèi)容如下：

======本波博客來(lái)自茗洋芳竹所有,任何人未經(jīng)允許不得轉(zhuǎn)載:http://www.cnblogs.com/Fresh-air=====

  $('#commentForm').submit(function (event) {

        event.preventDefault();

        var data = $(this).serialize();

        var url = $(this).attr('action');

        $.post(url, data, function (response) {   //發(fā)送異步Ajax請(qǐng)求，就在這里

            $('#comments').append(response);

        });

    });

阻止submit按鈕提交的默認(rèn)行為,然后serialize方法,序列化表單中的數(shù)據(jù),然后獲得表單要提交的地址,即表單的action屬性,然后post方式發(fā)送一個(gè)Ajax請(qǐng)求,請(qǐng)求成功后,返回的數(shù)據(jù)也就在response這個(gè)參數(shù)中,我們最后把response的內(nèi)容追加到列表中去.

點(diǎn)擊查看jQuery ajax - serialize() 方法的講解

接下來(lái)我們添加對(duì)應(yīng)的AddComment的部分視圖,代碼很簡(jiǎn)單,就一行

<li>@ViewBag.Comment</li>

按下F5運(yùn)行項(xiàng)目,測(cè)試演示如下:

關(guān)于PartialView方法，你可以理解就是返回一段HTML代碼