Mvc-framework-ajax-support
提供：Dev Guides
MVCフレームワーク-Ajaxサポート
ご存じかもしれませんが、AjaxはAsynchronous JavaScript and XMLの省略形です。 MVCフレームワークには、控えめなAjaxのサポートが組み込まれています。 すべてのビューにコードを追加しなくても、ヘルパーメソッドを使用してAjax機能を定義できます。 MVCのこの機能は、jQuery機能に基づいています。
MVCアプリケーションで控えめなAJAXサポートを有効にするには、Web.Configファイルを開き、次のコードを使用してappSettingsセクション内でUnobtrusiveJavaScriptEnabledプロパティを設定します。 キーがアプリケーションにすでに存在する場合、この手順は無視できます。
<add key = "UnobtrusiveJavaScriptEnabled" value = "true"/>この後、Views/Sharedフォルダーの下にある共通レイアウトファイル _Layout.cshtml ファイルを開きます。 ここで、次のコードを使用してjQueryライブラリへの参照を追加します-
<script src = "~/Scripts/jquery-ui-1.8.24.min.js" type = "text/javascript">
</script>
<script src = "~/Scripts/jquery.unobtrusive-ajax.min.js" type = "text/javascript">
</script>目立たないAjaxアプリケーションを作成する
次の例では、システム内のユーザーのリストを表示するフォームを作成します。 Admin、Normal、Guestの3つのオプションを持つドロップダウンを配置します。 これらの値のいずれかを選択すると、控えめなAJAXセットアップを使用して、このカテゴリに属するユーザーのリストが表示されます。
- ステップ1 *-モデルファイルModel.csを作成し、次のコードをコピーします。
using System;
namespace MVCAjaxSupportExample.Models {
public class User {
public int UserId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public DateTime BirthDate { get; set; }
public Role Role { get; set; }
}
public enum Role {
Admin,
Normal,
Guest
}
}- ステップ2 *-UserController.csという名前のControllerファイルを作成し、次のコードを使用してその中に2つのアクションメソッドを作成します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using MVCAjaxSupportExample.Models;
namespace MVCAjaxSupportExample.Controllers {
public class UserController : Controller {
private readonly User[] userData =
{
new User {FirstName = "Edy", LastName = "Clooney", Role = Role.Admin},
new User {FirstName = "David", LastName = "Sanderson", Role = Role.Admin},
new User {FirstName = "Pandy", LastName = "Griffyth", Role = Role.Normal},
new User {FirstName = "Joe", LastName = "Gubbins", Role = Role.Normal},
new User {FirstName = "Mike", LastName = "Smith", Role = Role.Guest}
};
public ActionResult Index() {
return View(userData);
}
public PartialViewResult GetUserData(string selectedRole = "All") {
IEnumerable data = userData;
if (selectedRole != "All") {
var selected = (Role) Enum.Parse(typeof (Role), selectedRole);
data = userData.Where(p => p.Role == selected);
}
return PartialView(data);
}
public ActionResult GetUser(string selectedRole = "All") {
return View((object) selectedRole);
}
}
}- ステップ3 *-次のコードを使用して、GetUserDataという名前の部分ビューを作成します。 このビューは、ドロップダウンから選択された役割に基づいてユーザーのリストを表示するために使用されます。
@model IEnumerable<MVCAjaxSupportExample.Models.User>
<table>
<tr>
<th>
@Html.DisplayNameFor(model => model.FirstName)
</th>
<th>
@Html.DisplayNameFor(model => model.LastName)
</th>
<th>
@Html.DisplayNameFor(model => model.BirthDate)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
@Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
@Html.DisplayFor(modelItem => item.BirthDate)
</td>
<td>
</td>
</tr>
}
</table>- ステップ4 *-次のコードでビューGetUserを作成します。 このビューは、以前に作成したコントローラーのGetUserDataアクションからデータを非同期的に取得します。
@using MVCAjaxSupportExample.Models
@model string
@{
ViewBag.Title = "GetUser";
AjaxOptions ajaxOpts = new AjaxOptions {
UpdateTargetId = "tableBody"
};
}
<h2>Get User</h2>
<table>
<thead>
<tr>
<th>First</th>
<th>Last</th>
<th>Role</th>
</tr>
</thead>
<tbody id="tableBody">
@Html.Action("GetUserData", new {selectedRole = Model })
</tbody>
</table>
@using (Ajax.BeginForm("GetUser", ajaxOpts)) {
<div>
@Html.DropDownList("selectedRole", new SelectList(
new [] {"All"}.Concat(Enum.GetNames(typeof(Role)))))
<button type="submit">Submit</button>
</div>
}- ステップ5 *-最後に、Route.configエントリを変更してユーザーコントローラーを起動します。
defaults: new { controller = "User", action = "GetUser", id = UrlParameter.Optional }- ステップ6 *-次のスクリーンショットのように見えるアプリケーションを実行します。
ドロップダウンから[管理者]を選択すると、管理者タイプのすべてのユーザーが取得されます。 これはAJAXを介して行われ、ページ全体をリロードしません。
