[ASP.Net MVC] 與Ajax的運用

AjaxHelper 類別包含的方法可提供 MVC 應用程式內 ASP.NET AJAX 中的用戶端功能，例如，建立非同步表單和呈現連結。 AjaxHelper 類別支援非同步部分頁面更新。 AjaxHelper 類別的擴充程式位於 System.Web.Mvc.Ajax 命名空間中。

我有練習以下兩個比較基本的教學，都可以成功喔!

在MVC的語法上使用 @Ajax 是引用AjaxHelper 類別。
常用的方法有：

ActionLink ：已多載。傳回錨定項目，其中包含指定之動作方法的 URL；按一下動作連結時，系統便會使用 JavaScript 以非同步方式叫用該動作方法。
BeginForm ：將開頭的 <form> 標記寫入至回應。
GlobalizationScript ：傳回 HTML script 項目，其中包含定義文化特性資訊的全球化指令碼參考。
RouteLink ：已多載。傳回錨定項目，其中包含指定之路徑值的虛擬路徑；按一下連結時，系統便會使用 JavaScript 以非同步方式對該虛擬路徑提出要求。

在View/Shared/_layout.cshtml檔案裡加上引用MicrosoftAjax.js及MicrosoftMvcAjax.js

	<!DOCTYPE html>
	<html>
	<head>
	<title>@ViewBag.Title</title>
	<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
	<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
	<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
	</head>

	<body>
	@RenderBody()
	</body>
	</html>

view raw gistfile1.cs hosted with ❤ by GitHub

AjaxController的寫法。PartialViewResult 是提供給 Ajax呼叫的進入點，將會回傳一個表單。PartialView("_IndexPartial", result) 會以部份檢視的方式呼叫 View/Ajax/_IndexPartial.cshtml 。

	public class AjaxController : Controller
	{
	//
	// GET: /Ajax/

	public ActionResult Index()
	{
	return View();
	}

	[HttpPost]
	public PartialViewResult Index(FormCollection data)
	{
	List<string> result = new List<string>();
	string input = data["MyInput"].Split(new string { "\n" }, StringSplitOptions.None);

	result.Add("<b><i><u>I said</u></i></b>:<br />");

	foreach (var line in input)
	result.Add(line + "<br />");

	return PartialView("_IndexPartial", result);
	}

	}

view raw gistfile1.cs hosted with ❤ by GitHub

主頁 Index.cshtml。Ajax.BeginForm的寫法就是將整個表單丟給Server去處理的寫法。要指定UpdateTargetId，之後Ajax得到回覆後，會動態載入新頁面至 <div id="targetDiv" ... 的位置上。

	@{
	ViewBag.Title = "Index";
	}

	<h2>Hello!</h2>
	<p>Please tell me something...</p>

	@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "targetDiv" }))
	{
	@Html.TextArea("MyInput", new { @style = "width:100%;height:200px;" });
	<br /><br />
	<input type="submit" value="What did you say?" />
	}

	<div id="targetDiv" style="width:100%;margin-top:20px;padding:10px;">
	...
	</div>

view raw gistfile1.cs hosted with ❤ by GitHub

動態載入的部份頁面 _IndexPartial.cshtml 。若是內部呼叫的頁面，可以加底線區分。

	@if (Model != null)
	{
	foreach (string line in (Model as List<string>))
	{
	@Html.Raw(line)
	}
	}

view raw gistfile1.cs hosted with ❤ by GitHub

執行的結果就如同範例一樣，網頁不需要Refresh就可以動態載入下方的資料。

Peggy Yang - 恩典之路

2012年8月29日星期三