MVCフレームワーク-Ajaxサポート

ご存じかもしれませんが、AjaxはAsynchronous JavaScript and XMLの省略形です。 MVCフレームワークには、控えめなAjaxのサポートが組み込まれています。すべてのビューにコードを追加しなくても、ヘルパーメソッドを使用してAjax機能を定義できます。 MVCのこの機能は、jQuery機能に基づいています。

MVCアプリケーションで控えめなAJAXサポートを有効にするには、Web.Configファイルを開き、次のコードを使用してappSettingsセクション内でUnobtrusiveJavaScriptEnabledプロパティを設定します。キーがアプリケーションにすでに存在する場合、この手順は無視できます。

<add key = "UnobtrusiveJavaScriptEnabled" value = "true"/>

MVC Ajax Config

この後、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>

MVC Ajax Config 1

目立たない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 *-次のスクリーンショットのように見えるアプリケーションを実行します。

MVC Ajaxアプリケーション

ドロップダウンから[管理者]を選択すると、管理者タイプのすべてのユーザーが取得されます。これはAJAXを介して行われ、ページ全体をリロードしません。

MVC Ajax Application 1

Mvc-framework-ajax-support

MVCフレームワーク-Ajaxサポート

目立たないAjaxアプリケーションを作成する