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

 

閱讀第六波導航：

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

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

 

         原著：ASP.NET MVC 4 IN ACTION

         大家好!

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

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

         老實說,這篇博客的內容真的很多~

 

拋磚引玉

      講解一個英文單詞Unobtrusive，因為這個單詞在本文中會很常見,也是跟讀者的一個約定

<!--以下是常規Javascript下寫出來的Ajax-->
<div id="test">
    <a href="/" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'GET', updateTargetId: 'test' });">測試</a>
</div>

<!--以下是Unobtrusive Javascript下寫出來的Ajax-->
<div id="test">
   <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#test" href="/">測試</a>
</div>

以上的代碼分別是 MVC 3 在“關閉”和“開啟” Unobtrusive JavaScript 后生成的 Ajax.ActionLink。

那 Unobtrusive JavaScript到 底是什么呢？簡單地來說，就是一種代碼分離的思想，把行為層和表現層分離開。

我理解的意思就是,unobtrusive本意是低調,也就是簡單的寫法風格,在這里直接使用了data-ajax，data-ajax-method等自定義規則的html寫法，然后引入一個懂得這種規則外部的js文件，實現了代碼分離的思想。不然的話，javascript與html標簽混在一起，以后很難維護，也不顯的高級了。暫且先這樣理解吧

 

 

內容概括

Jquery版本的Unobtrusive Ajax的使用

ASP.NET MVC AJAX Helpers(助手類)的使用

用JSON方式響應(Response),客戶端模版template的使用

Jquery UI的一個自動完成(Autocomplete)的插件

 

 回憶與引入

以前我們做的很多例子都是把ASP.NET MVC中的view呈現到瀏覽器上去.但隨着瀏覽器的發展,其實我們已經可以把很多呈現的邏輯放到瀏覽器中去.這樣可以使我們的應用程序用戶體驗更好

關於現在已經實現的很多的客戶端技術,例如微軟sliverlight,Adobe的Flash已經給用戶很好的體驗了.其實毫無疑問,帶來體驗的使用最廣的,還是當今所有流行的瀏覽器都支持的Javascript.現在,有很多web應用程序能模擬出桌面應用程序了,例如GMail,Facebook,Twitter.其中Ajax是其中很關鍵的一個技術

Ajax:用Javascript,發送異步請求,訪問服務器上的資源,響應后局部更新頁面的內容

在本波中,我們將學習在ASP.NET MVC中如何使用Ajax.使用Jquery庫去實現一個Ajax請求,使用MVC內置的Ajax助手實現Ajax請求.最后,我們看下如何讓Ajax結合客戶端模版很快地生成HTML標簽,來簡化重復使用Javascript生成HTML標簽.

 

7.1     Ajax with Jquery

         鏈接:    Jquery官網學習          Jquery API 手冊

 

7.1.1   Jquery primer(基礎)

關於Jquery基礎知識的學習,這里我就不講解了.

$('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是個很大的話題，看懂上面幾行代碼,有助於對下面幾個章節的理解.如果你想深入的看下jQuery,有本書叫《jQuery in Action,Second Edition》是Bear Bibeault 和Yehuda Katz寫的,可以參考一下

 

7.1.2   使用Jquery做Ajax請求

 

我們采用默認的ASP.NET MVC  Internet Application模版來寫個例子.我們添加一個簡單的Controller(里面有兩個action，Index action，PrivacyPolicy action)

添加一個AjaxHelpersController

======本波博客來自茗洋芳竹所有,任何人未經允許不得轉載:http://www.cnblogs.com/Fresh-air=====

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

相信聰明的你已經知道了它倆的區別了，沒錯 一個用於返回整體，另一個返回局部(部分)。

假設我有一個需求,輸入用戶名，然后返回相關信息,之前的做法可能會是用json格式來返回用戶的相關信息，然后到頁面去渲染相關的HTML，如果產生的相關HTML比較大的話，我還是建議你沿用之前的方案(返回json)，因為傳輸的數據少，響應快一些。反之，PartialViewResult 則是返回部分HTML 的不錯選擇。

使用NuGet package,每次MVC創建項目的時候,都會自動獲取最新的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，語法格式是 @section 母板頁中@RenderSection中定義的名字。我們操作如下：

首先我們修改Global.asax文件，讓F5運行程序時，讓首頁默認是AjaxHelper/Index視圖，然后我們修改母版定義一個位置

這里在_Layout.cshtml文件中，跟AjaxHelper/Index中的@section head中的head名字一模一樣，沒錯

head在母版中就是一個位置的名字，然后子頁面用@section加上母版頁中的定義的RenderSection的名字，就可以實現在母版頁插入一些html代碼。其中@Url.Content估計你也會用了。

接下來我們在Scripts文件夾下新建一個js文件  AjaxDemo.js

$(document).ready(function () {
    $('#privacyLink').click(function (event) {
        event.preventDefault();
        var url = $(this).attr('href');
        $('#privacy').load(url);
    });
});

關於對jQuery的load方法講解,點擊查看

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

這是一個簡單的Unobtrusive JavaScript例子,所有的JavaScript代碼都被放到一個單獨分離的文件里.

由於默認的MVC中沒有引入jQuery文件,我們在母版頁中引入

======本波博客來自茗洋芳竹所有,任何人未經允許不得轉載:http://www.cnblogs.com/Fresh-air=====

按下F5運行項目,效果如下:

點一下超鏈接按鈕,無刷新頁面,出現PrivacyPolicy部分視圖中的內容

7.1.3  漸進增強(progressive enhancement)

progressive enhancement的意思是:在原有的方法上改進,提升

那么如果客戶端禁用了JavaScript,那么默認的超鏈接行為就會不能阻止,頁面將在新標簽中打開,這不是我們想要的

修改AjaxHelperController中的PrivacyPolicy action

  public ActionResult PrivacyPolicy()
        {
            if (Request.IsAjaxRequest())
            {
                return PartialView();
            }
            return View();
        }

 

我們用了IsAjaxRequest方法判斷請求是不是通過Ajax方式請求的.如果是true,我們以部分視圖方法呈現,如果是false,我們以普通的視圖呈現.當然你也可以返回一個空白,或者返回一句話,請確保的你的瀏覽器javascript沒有被禁用!

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

 

 

7.1.3  使用Ajax提交表單數據

在7.1.2中,我們看到了當單擊超鏈接的時候,如何從server端取回數據,當然我們也可以異步地提交數據到server端.為了說明這個,我們拓展我們以前的例子,展示一個comment列表,當用添加數據的時候,無刷新顯示結果

我們這里不用數據庫演示了,原理都一樣的

新建一個CustomAjaxController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AjaxExamples.Controllers
{

    public class CustomAjaxController : Controller
    {
        private static 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");
        }
    }
}

 

我們用一個string類型的list存comment,這些comment作為一個model傳入Index view.我們添加一個含有一個string類型的comment參數的,只能通過Post請求訪問的AddComment action.

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

NOTE:這個例子是非線程安全的.因為這些數據時存儲在靜態的集合中.在現實的應用程序中,這個技術應該被避免使用-更好的操作是把數據存到數據庫中去,這個例子沒有使用數據庫,只為快速的演示一下存數據的思路

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文件中，添加內容如下：

======本波博客來自茗洋芳竹所有,任何人未經允許不得轉載: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) {   //發送異步Ajax請求，就在這里
            $('#comments').append(response);
        });
    });

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

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

接下來我們添加對應的AddComment的部分視圖,代碼很簡單,就一行

<li>@ViewBag.Comment</li>

按下F5運行項目,測試演示如下:

關於PartialView方法，你可以理解就是返回一段HTML代碼

 博主留言

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

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

內容過多,那么每次讀者學習,查看的時候,下載的也就越多了.考慮到這個,所以本篇博客寫到這里..

晚安,大家!由於源碼文件過大，先不發布了，等本章博客全部完成后，一次性發布。