Unobtrusive JavaScript in ASP.NET MVC 3

作者: Dozer  來源: 博客園  發布時間: 2010-11-11 23:15  閱讀: 13829 次  推薦: 4   原文鏈接   [收藏]  

　　Unobtrusive JavaScript 是什么？

 
<!--以下是常規Javascript下寫出來的Ajax-->
<div id="test">
<a href="http://www.cnblogs.com/" 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="http://www.cnblogs.com/">測試</a>
</div>

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

　　那Unobtrusive JavaScript到底是什么呢？簡單地來說，就是一種代碼分離的思想，把行為層和表現層分離開。具體的可以查看維基百科下對Unobtrusive JavaScript的解釋。

　　Unobtrusive JavaScriptin ASP.NET MVC 3

　　Unobtrusive JavaScript 的好處顯而易見，但是如何在MVC3使用Unobtrusive JavaScript呢？

　　1、引用相應的Javascript文件

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

　　這四個文件包含在 MVC 3 的 Scripts 文件夾中，直接引用即可。

　　值得注意的是：jquery.unobtrusive-ajax.min.js 和 jquery.validate.unobtrusive.min.js 是兩個用來讓 jquery 支持 Unobtrusive JavaScript 的庫。在 jQuery 官網上看不到，打開后發現，原來是微軟自己寫的。另外，以前用來實現 MVC Ajax 和客戶端驗證的三個文件 MicrosoftAjax, MicrosoftMvcAjax.js, MicrosoftMvcValidation.js 不需要再引用了。原因就是因為，微軟在 MVC 3 使用 jQuery 來實現 Ajax 了，而上面兩個 javascript 庫就相當于是兩個 Adapter（適配器）

　　2、開啟 Unobtrusive JavaScript

　　MVC3中的Web.Config文件中默認多了兩個配置項：

image　　這里是一個全局設置，你可以打開或者關閉。

　　另外，你也可以在任何一個 Action 或 Controller 中執行以下代碼，靈活地進行控制，來處理一些特殊的 Action 或 Controller。

 
HtmlHelper.ClientValidationEnabled = true;
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;

　　3、如果不需要用 Unobtrusive JavaScript 呢？

　　如果不需要用的話根據上面的方法關閉即可。但是要注意一點！這時候，如果你需要用 Ajax 或者客戶端驗證，務必引用MVC3以前版本中的三個 javascript文件：MicrosoftAjax, MicrosoftMvcAjax.js, MicrosoftMvcValidation.js。

　　否則就不能實現Ajax 和客戶端驗證了。

　　Unobtrusive Ajax in ASP.NET MVC 3

　　原文：《Unobtrusive Ajax in ASP.NET MVC 3》

　　關于 AjaxOptions

　　MVC 中 AjaxHelper 的擴展方法，提供了一系列的 Ajax 方法，例如：ActionLink RouteLink, BeginForm, BeginRouteForm 等。它們的使用方法和 HtmlHelper很像，主要的區別就在于 AjaxHelper 有一個 AjaxOptions 參數。

 
public class AjaxOptions {
public string Confirm { get; set; }
public string HttpMethod { get; set; }
public InsertionMode InsertionMode { get; set; }
public int LoadingElementDuration { get; set; }
public string LoadingElementId { get; set; }
public string OnBegin { get; set; }
public string OnComplete { get; set; }
public string OnFailure { get; set; }
public string OnSuccess { get; set; }
public string UpdateTargetId { get; set; }
public string Url { get; set; }
}

　　這些屬性會告訴 MVC 如何生成你的 Ajax 代碼。

　　傳統的生成方式

　　當 unobtrusive 模式被關閉的時候，MVC 會把代碼寫在你的 <a> 標簽或者 <form> 標簽中，并且靠 MicrosoftAjax.js 和 MicrosoftMvcAjax.js 來執行相應的代碼。

 
<form
action="/ajax/callback"
id="form0"
method="post"
onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));"
onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'loading', updateTargetId: 'updateme' });">
 

　　MVC1 和 MVC2 中就是這樣做的。

　　依賴于 Unobtrusive JavaScript 的生成方式

　　當 unobtrusive 模式打開的時候，代碼徹底的改變了，而且是那么地簡潔！

 
<form
action="/ajax/callback"
data-ajax="true"
data-ajax-loading="#loading"
data-ajax-mode="replace"
data-ajax-update="#updateme"
method="post">

　　你會發現這些HTML代碼是非常容易讀懂的。

　　映射AjaxOptions屬性

　　下表列出了 AjaxOptions 和 HTML 5 的映射關系

AjaxOptions HTML attribute
Confirm data-ajax-confirm
HttpMethod data-ajax-method
InsertionMode data-ajax-mode *
LoadingElementDuration data-ajax-loading-duration **
LoadingElementId data-ajax-loading
OnBegin data-ajax-begin
OnComplete data-ajax-complete
OnFailure data-ajax-failure
OnSuccess data-ajax-success
UpdateTargetId data-ajax-update
Url data-ajax-url

　　除了這些屬性外，還有一個額外的 data-ajax="true" 屬性，代表這是一個 Ajax 方法。

　　* = data-ajax-mode 只有在設置 UpdateTargetId 被設置后才有效。

　　** =  data-ajax-loading-duration 只有在 LoadingElementId 被設置后才有效。

　　Ajax 回調

　　傳統 Ajax 和 unobtrusive JavaScript 的主要區別就在于 Ajax 的回調。當所有的回調函數都被定義在 Ajax 庫中以后，你的代碼就會變成這種理想化的風格。

　　當你在 MVC 3 中使用 unobtrusive Ajax 的時候，四個基本的回調函數會被因設為 jQuery.Ajax 的函數。

　　OnBegin => “beforeSend”

　　OnComplete => “complete”

　　OnFailure => “error”

　　OnSuccess = > “success”

　　你可以給他們傳遞一個函數名，或一段匿名函數作為處理函數。如果你的處理函數是一個函數名，并且參數列表符合Ajax標準，那么 jQuery.Ajax 便會把值傳遞給這個函數并執行。如果是匿名函數的話，過程大同小異。

　　Ajax 回調函數的參數列表：

　　xhr : XMLHttpRequest 對象

　　status : 僅限 OnBegin

　　error : 僅限 OnFailure

　　data : 僅限 OnSuccess

　　Unobtrusive Client Validation in ASP.NET MVC 3

　　原文：《Unobtrusive Client Validation in ASP.NET MVC 3》

　　傳統的生成方式

　　一下是 MVC 數據驗證框架下對于 Model 的描述（這部分不變）：

 
public class ValidationModel {
[Required]
public string FirstName { get; set; }

[Required, StringLength(60)]
public string LastName { get; set; }

[Range(1, 130)]
public int Age { get; set; }
}

　　當開啟客戶端驗證后：（具體開啟方法和 Unobtrusive Javascript 大同小異，請看第二部分）

　　當 unobtrusive JavaScript 關閉后，你會看到以上代碼（和 MVC 2 中相同）。你會發現在后面多了一段 Javascript 代碼，而這里，便是對表單驗證的核心。

　　依賴于 Unobtrusive JavaScript 的生成方式

　　開啟 Unobtrusive Javascript 后，代碼完全改變了:

 
<label for="FirstName">FirstName</label>
<input class="text-box single-line" data-val="true" data-val-required="The FirstName field is required." id="FirstName" name="FirstName" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>

<label for="LastName">LastName</label>
<input class="text-box single-line" data-val="true" data-val-length="The field LastName must be a string with a maximum length of 60." data-val-length-max="60" data-val-required="The LastName field is required." id="LastName" name="LastName" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span>

<label for="Age">Age</label>
<input class="text-box single-line" data-val="true" data-val-number="The field Age must be a number." data-val-range="The field Age must be between 1 and 130." data-val-range-max="130" data-val-range-min="1" data-val-required="The Age field is required." id="Age" name="Age" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Age" data-valmsg-replace="true"></span>

　　其中最大的改變就是下面的 Javascript 代碼消失了，轉而變為 HTML 5 的各種屬性。

　　屬性是如何生成的

　　當表單中的一項在后端代碼中有數據驗證的時候，MVC 會現在 它的屬性中加上  data-val="true"，并且講所有規則以 data-val-rulename="message" 的形式，加在屬性上。

　　如果想使用默認的客戶端驗證信息，你只要把屬性值留空，那么客戶端驗證會自動生成形如 data-val-rulename-paramname="paramvalue" 的屬性。

　　橋接 HTML 和 jQuery ： 適配器

　　寫一個客戶端驗證有兩個步驟：1、為 jQuery 驗證編寫驗證規則，2、在 HTML 代碼中加上屬性，并且使用適配器轉換為對應的 jQuery 驗證規則。（這個在非 MVC 中也適用）

　　你可以調用 jQuery.validator.unobtrusive.adapters. 來編寫適配規則。

　　這里有三個方法能幫助你注冊三種很常規的適配器。(addBool, addSingleVal, and addMinMax)

　　具體的方法大家可以看一下原文，因為 jquery.validate.unobtrusive.min.js 已經把這些適配規則都寫好了，所以不加以闡述了，如果想了解原理的話可以去看一下~

　　ENDING

　　最后，還不太了解 MVC 數據驗證的朋友可以看一下我的另一篇文章：深入淺出 MVC 數據驗證 2.0 [附演示源碼]

4
1
 
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()