1. 程式人生 > >APS.NET MVC + EF (10)---使用AJAX

APS.NET MVC + EF (10)---使用AJAX

我們 如果 分組 ext == ola page 刪除 html

在Web系統中,Ajax技術已經成為提高用戶體驗的必備技術。開發Ajax程序,涉及兩方面的內容:一是客戶端技術,二是服務器端技術。

(1)客戶端技術

核心工作是通過JavaScript向服務器發送數據和接收數據。初次之外還涉及兩個工作,一是數據的展示,因此涉及Html DOM、CSS等相關技術;二是數據處理,因此涉及JSON、XML等數據格式處理技術。在實際開發過程中,可以借助一些客戶端框架,來提高工作效率。

(2)服務器端技術

核心工作是完成在服務器端接收和發送數據。

10.1 使用動作方法處理Ajax請求

在動作方法中處理Ajax請求,重點關註的是如何向客戶端返回數據。

對於接收數據,由於Ajax客戶端程序仍是通過Get或Post方式發送數據,因此處理方式和接收非Ajax請求一致。

向服務器端發送數據,一般有如下幾種形式。

10.1.1 返回純文本數據

對於向客戶端返回結構單一的數據,可以使用純文本格式,如刪除操作是否成功的提示,用法如示例1所示。

示例1

public ActionResult Delete(int? id)

{

//省略代碼

if(manager.Delete(id))

{

return Content("1"); //操作成功

}

return Content("0");

}

對於示例1,客戶端接收的數據是"0"或"1",根據數據客戶端可做出刪除操作是否成功的提示。

10.1.2 返回分部視圖

對於局部刷新的效果,多數情況是向服務器端請求一個局部的頁面,示例2展示了針對Ajax請求返回一個分部視圖。

示例2

/// 獲取當前用戶的分組信息

public ActionResult ListGroups()

{

User user = Session["CurrentUser"] as User;

if (user == null)

{

return this.Content("<script>window.location=‘" + Url.Action("Login", "Account") + "‘</script>");

}

int userId = user.UserId;

//分組列表數據

var groups = context.PrivateGroups.Where(a => a.OwnerId == userId).ToList();

//返回分部視圖

return PartialView("GroupList");

}

註意使用PartialView()方法返回分部視圖。

10.1.3 返回結構化數據

如果向客戶端返回復雜結構的數據,一般需要由服務器端向客戶端返回客戶端支持的數據格式,如JSON格式和XML格式。在不同的服務器端平臺中,都有相應的API 支持將對象轉化成這些格式的數據。如示例3所示。

示例3

/// 獲取當前用戶分組信息

public ActionResult ListGroupsToJson()

{

User user = Session["CurrentUser"] as User;

if (user == null)

return Content("");

int userId = user.UserId;

//分組列表數據

var groups = (from g in context.PrivateGroups

where g.OwnerId == userId

select g

).ToList();

return Json(groups,JsonRequestBehavior.AllowGet);

}

示例3中, Json()方法負責將對象序列化為JSON數據,其中第一個參數是要序列化的對象,第二個 JsonRequestBehavior 類型的參數,是一個枚舉類型,包含AllowGet 和 DenyGet 兩個值,分別代表允許Get 請求和不允許 Get 請求。

客戶端獲取JSON數據後,一般需要對JSON數據進行處理,以某種形式展示出來。多數情況會使用客戶端控件來處理,比如 BootStrapTables 。

? ?

在使用ASP.NET MVC 提供的 Json()方法返回JSON數據時,對待DateTime類型的數據處理往往不能滿足我們的要求。在實際開發中我們通常會使用 如下方法:

Newtonsoft.Json.JsonConvert.SerializeObject(object value)

示例3中的最後一行代碼可以換做如下:

return Content( JsonConvert.SerializeObject(groups) );

? ?

10.2 使用AjaxHelper

總的來說,在Ajax程序開發中,客戶端的編碼工作是必不可少的,但是如果使用ASP.NET MVC 框架,這些編碼工作就會大大減少,甚至在一些簡單的應用場景,不需要手工編寫JavaScript 代碼。

ASP.NET MVC 的這種功能是由 AjaxHelper 類型的對象提供的,此類和 HtmlHelper 是對應的,也是輔助視圖輸出的,特殊的是它用於生成具有Ajax功能的視圖。相應地,在視圖基類 WebViewPage 中包含名稱為 AjaxHelper 類型的對象 Ajax ,通過Ajax 對象調用相應的方法實現Ajax 功能視圖的輸出。

10.2.1 構造無刷新表單

最常見的一種場景是表單提交,在客戶端使用jQuery 時,一般會借助於 $.ajax() 和 $.post() 提交表單。其中,大部分的編碼工作是從表單中獲取提交的數據,工作量往往隨著表單的字段增加而增加。

在ASP.NET MVC 中,借助於 Ajax 對象提供的 BeginForm()方法,即可完成此功能。如下語法展示了BeginForm() 一個典型的重載版本定義。

? ?

public static MvcForm BeginForm(

this AjaxHelper ajaxHelper,

string actionName,

object routeValues,

AjaxOptions ajaxOptions

)

和 HtmlHelper 中的BeginForm() 不同的是,多了AjaxOption 類型的參數,通過該類對請求發送前後進行相關的設置,主要屬性如表10-1 所示。

表10-1 AjaxOptions 類的主要屬性

主要屬性

說 明

string UpdateTargetId

服務器響應來更新的 DOM 元素的 ID

string Confirm

提交請求之前顯示在確認窗口中的消息

string HttpMethod

HTTP 請求方法("Get"或"Post")

InsertionMode InsertionMode

將響應插入目標 DOM 元素的模式,默認為Replace

int LoadingElementDuration

控制在顯示或隱藏加載元素時的動畫持續時間(毫秒)

string OnBegin

在更新頁面之前調用的 JavaScript 函數

string OnSuccess

在成功更新頁面之後調用的 JavaScript 函數

string OnComplete

在實例化相應數據後但在更新頁面前調用的JavaScript函數

string OnFailure

在頁面更新失敗時調用的JavaScript 函數

string Url

向服務器發送請求的

? ?

示例4展示了 Ajax.BeginForm()的使用方法。

示例4

@section scripts{

<script type="text/javascript"

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

}

@using (Ajax.BeginForm("AddRecord",

new AjaxOptions { UpdateTargetId = "AddRecordMessage" }))

{

<textarea name="Content" cols="" rows="" class="importArea">

在想什麽呢?記下來吧</textarea>

<p>

<input type="submit" value="發 表 "/ class="button">

<a id="AddRecordMessage" class="message"></a></p>

}

//動作方法-添加記錄

[HttpPost]

public ActionResult AddRecord(string Content)

{

if (ModelState.IsVaild)

{

Record record= new Record();

record.Content=Content;

db.Records.Add(record);

if (db.SaveChanges()>0)

{

return Content("記錄保存成功!");

}

Else

{

return Content("記錄保存失敗!");

}

}

else

{

return Content("請按要求填寫信息!");

}

}

在示例4中,只用到 AjaxOption 類型的一個參數 UpdateTargetId ,其值為<a>標簽的Id屬性,<a>標簽用於顯示Ajax 方式提交後,從服務器端返回的消息提示。

需要註意使用ASP.NET MVC 提供的 Ajax 功能,需要引入 jquery.unobtrusive-ajax.min.js 腳本,該文件提供非侵入方式提供 Ajax 功能,而不生成Html 和 JavaScript 混合的代碼,這和驗證框架處理方式是一致的。示例4中 Ajax.BeginForm() 方法生成的Html 代碼如下。

? ?

<form action="/Home/AddRecord"

data-ajax="true" data-ajax-mode="replace"

data-ajax-update="#AddRecordMessage"

id="form0" method="post">

<!--省略代碼-->

</form>

對於一些簡單的應用場景,使用 Ajax.BeignForm()方法基本不需要手工編寫任何 JavaScript 腳本,但對一些特殊需求,還是需要編寫 JavaScripts 函數實現,這些函數可以通過 AjaxOptions 的屬性賦值進行調用。示例5 展示了 AjaxOptions 的 OnSucess 屬性和 Confirm 屬性的用法。

示例5

<script type="text/javascript">

function addRecordSuccess(data) {

$("#AddRecordMessage").html(data).show().hide(5000);

}

</script>

@using (Ajax.BeginForm("AddRecord", new AjaxOptions {

OnSuccess = "addRecordSuccess", Confirm="確認要提交麽?" }))

{

<textarea name="Content" cols="" rows="" class="importArea">

在想什麽呢?記下來吧

</textarea>

<p>

<input type="submit" value="發 表 "/ class="button">

<a id="AddRecordMessage" class="message"></a>

</p>

}

在示例5代碼中,OnSucess 屬性設置為 JavaScript 函數 addRecordsSuccess(), 使用函數實現消息顯示後在5秒內自動隱藏。另外,使用 Confirm 彈出提交前的確認提示框。

10.2.2 生成無刷新鏈接

除了表單提交外,還有一個典型的應用場景,當點擊一個鏈接時,在同一個頁面局部加載頁面內容。對於這種場景,Ajax對象提供了兩種生成Ajax鏈接的方法,即 Ajax.ActionLink() 和 Ajax.RouteLink() ,和Html對象的兩個對應的方法相比,多了一個AjaxOption參數。如示例6所示。

示例6

<ul class="friendCatalog" id="groupItems">

@foreach (Friends.Models.PrivateGroup m in ViewBag.Groups)

{

<li>

@Ajax.ActionLink(m.GroupName,"ListFriends","Friend",

new{groupId=m.GroupId},

new AjaxOptions(){OnSuccess="loadFriendsByGroup"})

<img src="@Url.Content("~/images/edit.gif")" />

<img src="@Url.Content("~/images/delete.gif")" /><span>

@m.FriendRelations.Count()</span>

</li>

}

<!--省略部分代碼-->

</ul>

示例6運行後,Ajax.ActionLink()對應生成的Html代碼如下所示。

<a data-ajax="true" data-ajax-success="loadFriendsByGroup"

href="/Friend/ListFriends?groupId=4">鏈接內容</a>

? ?

? ?

? ?

? ?

? ?

? ?

? ?

? ?

APS.NET MVC + EF (10)---使用AJAX