Dino Esposito on Building Rich User Interfaces with jQuery

[アーティクル]
06/11/2015

Cutting Edge

jQuery を使用してリッチユーザーインターフェイスを構築する

Dino Esposito

jQuery UI ライブラリ
サンプルシナリオ
タブ付きペインを準備する
ダイアログボックスを準備する
ダイアログボックスを読み込む
表示前の初期化
データをコントローラにポストする
Web をアップグレードする

ダイアログボックスはグラフィカルユーザーインターフェイスの基本要素です。おそらくご存知でしょうが、ダイアログボックスにはモーダルとモードレスがあります。モーダルの場合、ユーザーがダイアログボックスの問いに答えるまで次の操作に進めません。ユーザーが単純にダイアログボックスを閉じると、ダイアログボックスによってトリガされる動作は何も発生しません。

Windows 開発では、ダイアログボックスはユーザーとアプリケーションとの対話型インターフェイスを構築する一般的な方法です。特に、表示された項目の内容にドリルダウンしたり、内容を編集したりする場合にダイアログボックスを使用します。多くの Windows アプリケーションの一般的なパターンでは、内容を編集するためにはユーザーがクリックする必要があります。ユーザーがクリックすると、入力フィールドがあるモーダルダイアログボックスがアプリケーションによって自動的に表示され、更新データを入力できるようになります。

このパターンは Web アプリケーションでは一般的ではありません。ブラウザは以前からポップアップウィンドウをサポートしていますが、その機能は Windows のダイアログボックスとは若干異なります。ポップアップウィンドウは単純な子 Web ブラウザウィンドウであり、アドレスバーやツールバーなどの一部のウィンドウ機能を備えていません。ポップアップウィンドウには、要求に応じて追加コンテンツを表示する Web ページが表示されます。ところが、ポップアップウィンドウからサーバーにデータをポストすることを難しくしているいくつかの要因があります。また、一般にユーザーのコンピュータ上で動作するポップアップブロッカーによってポップアップを開く操作が禁止されます。そのため、Web アプリケーションにダイアログボックスが必要な場合にはポップアップウィンドウを使用することは適切ではありません。

この記事では、jQuery でモーダルおよびモードレスダイアログボックスを作成し、作成したダイアログボックスから Web サーバーにデータをポストする方法を説明します。

jQuery ライブラリは他の多くのライブラリやフレームワークと同様、ダイアログボックスの実装にブラウザのポップアップウィンドウを使用しません。代わりに、jQuery はスクリプトコードを使用してドキュメントオブジェクトモデル (DOM) のフラグメントをポップアップし、ユーザーが内容を確認したとき、または中止操作を実行したときにポップアップを閉じます。表示されたコンテンツは現在のページの DOM の一部であるため、ポストバックの問題が生じないうえ、さらに重要なことは、AJAX 機能を実装できます。

jQuery UI ライブラリ

ダイアログボックスのサポートは、現在 Version 1.3 がリリースされているコア jQuery ライブラリには含まれていません。ダイアログボックスや、アコーディオン、タブ、日付選択などの便利な UI ウィジェットを使用するには、jQuery の拡張機能である jQuery UI ライブラリを利用する必要があります。詳細については、ui.jquery.com を参照してください。ダウンロード方法も説明されています。一部のドキュメントは docs.jquery.com/UI から入手できます。

jQuery UI ライブラリは図 1 および図 2 に示すコンポーネントで構成されます。

図 1 jQuery UI ライブラリのコンポーネント

構成要素	説明
Accordion	目的の HTML コンテンツを読み込んだ折りたたみ可能なコンテンツパネルをレンダリングします
Datepicker	選択した日付を入力フィールドに設定する日付選択ポップアップをレンダリングします
Dialog	Windows ダイアログボックスに似た外観と機能を持つモードレスまたはモーダルのフローティング確認ダイアログボックスをレンダリングします
Progressbar	進行状況バーをレンダリングします
Slider	スライダに似た機能および外観を持つ入力要素をレンダリングします
Tabs	タブ付きコンテンツペインをレンダリングします

図 2 対話型インターフェイス

対話型インターフェイス	説明
Draggable	マウスでブラウザウィンドウの周囲に項目をドラッグする機能を有効にします
Droppable	ドラッグ可能な項目を対象要素にドロップする機能を有効にします
Sortable	マウスで項目の一覧を並べ替える機能を有効にします
Selectable	マウスまたはキーボードで一覧の項目を選択する機能を有効にします
Resizable	表示された項目のサイズを変更する機能を有効にします

対話型インターフェイスは、本質的に、ラップセットで選択された DOM 要素に適用可能な機能です。対話は横断的な動作であり、対象要素の相互操作性を高めます。たとえば、Dialog ウィジェットと Draggable および Resizable 対話型インターフェイスを組み合わせて、移動やサイズ変更が自在である Windows ライクなダイアログボックスを作成できます。

ウィジェットは、その名のとおり、ページ内で使用できる状態になっているタブやダイアログボックスなどの UI コンポーネントを表す独立したコンポーネントです。

既に説明したように、jQuery UI ライブラリはコアライブラリとは別にダウンロードする必要があり、コアライブラリのバージョンに依存します。この記事は、jQuery UI Version 1.5.3 およびコアライブラリ Version 1.2.6 に基づいて作成しています。この記事が公開される時期までには、コアライブラリ 1.3.2 に基づく jQuery UI Version 1.7 がリリースされる予定です。

次に、タブとダイアログボックスを組み合わせた例を示します。ここでは ASP.NET MVC サンプルアプリケーションを使用します。ASP.NET MVC フレームワークはコア jQuery ライブラリに付属していますが、jQuery と ASP.NET MVC との間には特に依存関係はありません。従来の ASP.NET Web フォームで jQuery を使用してもパフォーマンスおよび機能は変わりません。

サンプルシナリオ

顧客一覧を表示するサンプルページについて考えてみましょう。一覧に表示された各顧客は、ユーザーが顧客情報を削除または編集するための 2 つのボタンに関連付けられています (図 3 を参照)。

図 3 その場で編集できる顧客一覧

ユーザーが [Edit] ボタンをクリックすると、その場でデータを変更できるようになります。ただし、図 3 の表では、DataGrid や GridView などの従来のサーバーコントロールのインプレース編集モードでの動作のようにラベルがテキストボックスに切り替わるというわけではありません。この場合、事前に読み込まれたフォームを表示して、編集および保存できるようにするためのダイアログボックスがポップアップ表示されます。

話を簡単にするために、すべての UI 要素をサンプル ASP.NET MVC アプリケーションのホームページに配置しています。このページのマークアップを編集するには、関連付けられたビューファイルを利用する必要があります。既定では、このビューファイルは views\home に格納されている index.aspx です。

少なくとも既定のビューファクトリ (Web フォームのレンダリングエンジンに基づく) で ASP.NET MVC ページのビューを作成すると、プレーンな HTML リテラルと C# または Visual Basic .NET のコードブロックが混在します。HTML ヘルパは HTML の生成をよりスムーズかつ簡潔にするために用意されています。ただし、マークアップを作成せずに従来の DataGrid を生成するための正式な HTML ヘルパは存在しません。いくつかのグリッドのサンプル HTML が用意されているので、関心のある方は MVCContrib をご覧ください。

この例では、古いバージョンに対応するために GridView コントロールを使用して図 3 の表を生成しています (最近、DataGrid について詳しく説明したばかりですが、ASP.NET MVC を使用する場合、ASP.NET サーバーコントロールはほとんど不要になります)。従来の ASP.NET サーバーコントロールは ASP.NET MVC と連携して動作しますが、ポストバック機能のない単純な HTML ファクトリとしてのみ表示することをお勧めします。ASP.NET MVC では、クライアントと Web サーバーとの通信はコントローラのアクションをターゲットにした HTTP 呼び出しによって行われます。これは Web フォームのポストバックとはまったく異なるモデルです。図 4 に、サンプルアプリケーションのホームページのソースコードを示します。

図 4 ホームページのビュー

<%@ Page Language="C#" 
         MasterPageFile="~/Views/Shared/Site.Master" 
         AutoEventWireup="true" 
         CodeBehind="Index.aspx.cs" 
         Inherits="MvcApplication1.Views.Home.Index" %>
<%@ Import Namespace="DataModel" %>

<asp:Content ID="indexContent" runat="server" 
             ContentPlaceHolderID="MainContent" >
    <h2><%= Html.Encode(ViewData["Message"]) %></h2>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#AppConsole > ul").tabs();
        });
    </script>


    <div id="AppConsole">
        <ul>
            <li><a href="#tabCustomers"><b>Customers</b></a></li>
            <li><a href="#tabOrders"><b>Orders</b></a></li>
            <li><a href="#tabOther"><b>Other</b></a></li>
        </ul>
        <div id="tabCustomers">
            <span style="font-size:125%"><b>Customers</b></span>
            <hr style="height: 2px;border-top:solid 1px black;" /> 

            <%
                // Tells a user control to render the grid
                Html.RenderPartial("uc_ListCustomers", ViewData.Model); 
            %>

        </div>
        <div id="tabOrders">
            <span style="font-size:125%"><b>Orders here</b></span>
            <hr style="height: 2px;border-top:solid 1px black;" /> 
        </div>
        <div id="tabOther">
            <span style="font-size:125%"><b>Other content here</b></span>
            <hr style="height: 2px;border-top:solid 1px black;" /> 
        </div>
    </div>


    <%-- This is the fragment of markup that identifies the 
         content of the dialog box --%>
    <% Html.RenderPartial("uc_dlgEditCustomer"); %>

</asp:Content>

このサンプルページは一連の DIV タグで構成され、各 DIV タグはタブを表します。すべてのタブは一連の list-item タグからリンクされています。このマークアップはスクリプトコードによってタブペインに変換されます。特に、jQuery の tabs() メソッドはラップセットのすべての要素を取得し、タブペインとしてレンダリングします。結果となるユーザーインターフェイスには、[Customers]、[Orders]、および [Other] の 3 つのペインが表示されます。

[Customers] タブウィンドウの大部分は uc_ListCustomers MVC ユーザーコントロールによって生成されたコンテンツに基づいています。このユーザーコントロールは、表示するデータを親ビューから取得します。表示するデータは ViewData.Model 式によって参照され、List<Customer> オブジェクトで構成されます。言うまでもなく、このコンテキストの Customer は ADO.NET Entity Framework や LINQ to SQL などで作成したドメインモデルに定義されたエンティティクラスです。ホームページを処理するコントローラのアクションは、次に示すように、このデータを取得して受け渡すことです。

public ActionResult Index()
{
    ViewData["Title"] = "Home Page";
    ViewData["Message"] = "In-place Editing with jQuery UI";

    // Get data to fill the grid
    List<Customer> customers = DataModel.Repository.GetAllCustomers();

    return View("index", customers);
}

顧客一覧を取得するには、図 5 のように、ユーザーコントロールで基本クラスを宣言する必要があります。

図 5 基本クラスの宣言

public class uc_ListCustomer : ViewUserControl<List<Customer>>
{
    void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        { 
           GridView1.DataSource = ViewData.Model;
           GridView1.DataBind();
        }
    }

    void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        // Further customize the grid here if required
    }
}

マークアップの生成にデータバインドサーバーコントロールを使用する場合は、データを Page_Load でバインドします。図 6 に、jQuery を使用して JavaScript 関数にリンクするグリッドのマークアップを示します。

図 6 グリッドのマークアップ

<asp:GridView ID="GridView1" runat="server" 
     AutoGenerateColumns="false"
     HeaderStyle-BackColor="LightBlue" 
     OnRowDataBound="GridView1_RowDataBound">
  <Columns>
    <asp:BoundField DataField="CompanyName" HeaderText="Company" />
    <asp:BoundField DataField="Country" HeaderText="Country" />
    <asp:TemplateField>
         <ItemTemplate>
            <a onclick="return confirm('[<%#Eval("CompanyName") %>]\n
                                    Are you sure want to delete this customer?');"
               href="/home/deletecustomer/<%#Eval("CustomerID") %>">
               <img style="border:0" src="delete.jpg" />
            </a>
          </ItemTemplate>
     </asp:TemplateField>
     <asp:TemplateField>
          <ItemTemplate>
             <img style="border:0"  
                  onclick="fnEditCustomer('<%#Eval("CustomerID")%>', 
                                          '<%#Eval("CompanyName")%>', 
                                          '<%#Eval("ContactName")%>', 
                                          '<%#Eval("Address")%>', 
                                          '<%#Eval("City")%>')"
                  src="edit.jpg" />
          </ItemTemplate>
     </asp:TemplateField>    
   </Columns>
</asp:GridView>

ご覧のとおり、表示された各顧客は JavaScript 関数、fnEditCustomer にバインドされています。この関数はダイアログボックスを表示し、更新を制御します。これについては、後で説明します。

タブ付きペインを準備する

タブ付きコンテンツペインを作成するには、ラップセットの任意の要素の tabs() メソッドを呼び出します。テンプレートとして使用し、オプションの構成を設定するには、jQuery UI ライブラリのすべてのウィジェットに DOM サブツリーが必要です。通常、ページの読み込み時に既定の構成が設定され、後から状況に応じてその他の設定が適用されるまで待機します。次のコードは、タブ付きペインを準備する方法を示しています。

<script type="text/javascript">
    $(document).ready(function() {
        $("#AppConsole > ul").tabs();
    });
</script>

tabs メソッドは、AppConsole ID を持つ要素のすべての <ul> 子要素に対して実行されます。<ul> 内の各 <li> がタブになります。次に、コンテンツを提供するページ内の <div> に <li> をリンクする必要があります。

tabs メソッドには、無効にするタブ、ユーザーがクリックしたときの動作、および表示するときにタブを選択状態にするかどうかを指定する設定があります。次のコードに、3 番目のタブを無効にし、マウスポインタが置かれたときにタブを切り替え、タブを切り替えるときにアニメーションを使用する場合のタブウィジェットの構成方法を示します。

<script type="text/javascript">
    $(document).ready(function() {
        $("#AppConsole > ul").tabs(
                { 
                    disabled: [2],
                    event: 'mouseover', 
                    fx: { opacity: 'toggle'}
                }
        );
    });
</script>

ページでタブウィジェットを使用できるようにするには、コア jQuery ライブラリファイル以外に次のスクリプトファイルをリンクする必要があります。

<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.tabs.js"></script>

tabs メソッドには、AJAX を介してタブの追加、削除、選択、およびコンテンツのダウンロードを動的に自動実行する高度な API が用意されています。

ダイアログボックスを準備する

ダイアログボックスにも、メソッドに基づいてラップセット上で呼び出す同様の API および任意に設定できるオプションがあります。

タブ付きペインとは異なり、ダイアログボックスは表示する前に多くの処理が必要です。一部の静的コンテンツを表示することだけを想定したダイアログボックスの場合は、ドキュメントに記載された既製のイベントで十分に構成できますが、多くの場合、ページの現在の状態や現在選択されている項目を反映したコンテンツを表示するダイアログボックスが必要です。では、jQuery ダイアログボックスの定義を開始します。

<div> タグに定義されたダイアログボックスのコンテンツはページ内のどこかに格納されています。図 4 では、ダイアログボックスのコンテンツを、そのコンテンツを呼び出すページの DOM にユーザーコントロールとして挿入しています。

    <!-- This is the fragment of markup that identifies the 
         content of the dialog box -->
    <% Html.RenderPartial("uc_dlgEditCustomer"); %>

ダイアログのテンプレートは、ホストページを最初に読み込むときにビューと共にレンダリングされます。このとき、ダイアログに表示するデータの内容が不明な場合があります。ダイアログボックスに状況依存のデータを読み込む場合には、基本的に 2 つのオプションがあります。1 つは、ダイアログをポップアップする JavaScript 関数に実データを渡す方法です。もう 1 つは、ダイアログボックスに表示する前に、必要なデータを取得 (およびできればキャッシュ) する Web サーバーへの AJAX 呼び出しを作成する方法です。この記事では、前者の方法を選択します。

次の JavaScript コードは、ページの DOM の既製のイベントハンドラ内で実行され、ダイアログボックスを作成および初期化しますが、表示はしません。

$("#__dlgEditCustomer").dialog(
    {
      autoOpen: false,
      modal: true,
      overlay: { opacity: 0.2, background: "cyan" },
      width: 550,
      height: 400,
      position: [600, 250]
    }
);

このコードが示すように、指定された位置に指定された幅と高さのモーダルダイアログボックスが半透明のオーバーレイで表示されます。autoOpen=false を設定すると、ダイアログボックスはページの読み込み時に表示されません。

ダイアログボックスを使用するには、いくつかのスクリプトファイルが必要です。最低でも、次の 2 つのスクリプトファイルが必要です。

<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.dialog.js"></script>

また、ドラッグやサイズ変更などの 2 つの一般的な対話型インターフェイスに必要な JavaScript ファイルをリンクする必要があります。

<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript" src="ui.resizable.js"></script>

ただし、draggable および resizable アスペクトは設定で無効にすることができます。その場合、上に示したスクリプトファイルは不要です。

dialog() メソッドは動的 IFRAME を作成し、その中にダイアログテンプレートのコンテンツをコピーします。コンテンツが最大領域を超えると、スクロールバーが自動的に表示されます。結果となるダイアログボックスにはタイトルバーが表示され、右上端に閉じる (X) ボタンが表示されます。また、下部のボタンバーを構成して、デスクトップとよく似たユーザーエクスペリエンスの全体的なコンテキストに応じて、ダイアログに [OK]/[Cancel]、[Yes]/[No]/[Cancel] などの通常のボタンの組み合わせを表示することもできます。標準的な jQuery ダイアログボックスの一般的なスタイルを図 7 に示します。

図 7 jQuery のドラッグおよびサイズ変更が可能なダイアログボックス

水色の背景は、ダイアログのコンストラクタに定義したオーバーレイの設定の結果です。

overlay: { opacity: 0.2, background: "cyan" }

ページ内の 1 つおきの要素の上部にダイアログボックスを配置し、レイヤによってダイアログボックスとページ内の他のクリック可能な要素を分けています。ダイアログボックスの外側でのクリックは単純に失われます。ダイアログの各辺のハンドルをドラッグすると、サイズを変更できます。

jQuery ウィジェットの外観は選択したテーマによって異なります。この例では、簡単に jQuery UI 1.5 の既定のテーマを使用しています。いずれの場合も、jQuery のテーマは、プロジェクトに配置する一連のファイルとマスターページで参照する 1 つの CSS ファイルで構成されます。ui.jquery.com/themeroller Web サイトから jQuery の無料テーマを取得できます。テーマを自作することもできます。

ダイアログボックスを読み込む

既に説明したように、ダイアログボックスは主に DOM サブツリーです。そのため、ユーザーに対してテキストボックス、ドロップダウンリスト、チェックボックスがある入力フォームを表示するには、まず HTML フォームを作成し、表形式のレイアウトで入力フィールドと内容がわかりやすいラベルを表示します。図 8 に、ダイアログボックスの内部マークアップの抜粋を示します。

図 8 ダイアログボックスのマークアップ

<% Html.BeginForm("UpdateCustomer", "Home"); %>
   <table>
     <tr>
       <td><b>ID</b></td>
       <td><input id="ID" name="ID" type="text" disabled="disabled" /></
          td>
     </tr>
     <tr>
       <td><b>Company</b></td>
       <td><input id="CompanyName" name="CompanyName" type="text" /></td>
     </tr>
     <tr>
       <td><b>Country</b></td>
       <td>
          <%= Html.DropDownList("Country", 
                                new SelectList(ViewData.Model) %>
       </td>
     </tr>     
     : 
   </table>
<% Html.EndForm(); %>

ASP.NET MVC ヘルパを使用して <form> タグのマークアップを生成できます。BeginForm ヘルパには少なくとも 2 つのパラメータ (送信時に発生するコントローラのアクションとコントローラ名) を指定します。言うまでもなく、ダイアログボックスをサーバーにポストする場合は、ダイアログボックス内に HTML フォームを保持する必要があります。

このフォームの入力フィールドのレイアウト、機能、スタイルは自由に設定できます。ダイアログボックスのレイアウトを定義するとき、表示するデータをあまり意識する必要はありません。この時点で開発者がダイアログに設定する明示的なデータは定数データのみです。たとえば、各顧客レコードには国名が含まれており、ドロップダウンリストにすべての国を表示することもできます。この例では、表示するデータを限定することにします。顧客の国は変更できますが、他の顧客が存在しない新規の国を指定することはできません。そのため、顧客一覧は親からユーザーコントロールに渡す必要があります。

ダイアログボックスユーザーコントロールの親は Index.aspx ビューです。既に説明したように、このビューは顧客一覧をコントローラアクションから取得します。ユーザーが一覧から国を選択するようにする場合は、選択可能な国の一覧と一覧に含まれている顧客を渡す必要があります。Index.aspx ビュークラスを図 9 に示します。

図 9 Index.aspx ビュークラス

public partial class Index : ViewPage<HomeIndexViewData>
{
}

public class HomeIndexViewData
{
    public HomeIndexViewData()
    {
        Customers = new List<Customer>();
        Countries = new List<string>();
    }

    public List<Customer> Customers { get; set; }
    public List<string> Countries { get; set; }
}

HomeIndexViewData は、Index.aspx ビューに渡すすべての情報をグループ化するカスタムクラスです。アドホッククラスを使用すると、型指定されていない ViewData 汎用コンテナを使用した場合よりも整理されたコードになります。

ダイアログボックスは、次のコードで国の一覧を取得します。

<% Html.RenderPartial("uc_dlgEditCustomer", ViewData.Model.Countries); %>

ドロップダウンリストを作成するには、組み込みの DropDownList ヘルパを使用できます。ただし、この例では、項目一覧を保持する列挙可能なオブジェクトをビュー固有の SelectList オブジェクトにラップする必要があります。

<%= Html.DropDownList("Country", new SelectList(ViewData.Model) %>

最終的なダイアログボックスを図 10 に示します。

図 10 ダイアログボックスの動作

表示前の初期化

最後に、顧客データをダイアログボックスに合わせて設定する方法を説明します。図 6 に示すように、ダイアログボックスは、ユーザーがグリッドの同じ行のイメージボタンをクリックしたときに表示されます。イメージボタンの onclick イベントは JavaScript 関数の fnEditCustomer にリンクされています。この機能は最終的にダイアログボックスの初期化と表示を処理します (図 11 を参照)。

図 11 JavaScript による顧客の編集

function fnEditCustomer(custID, custName, custContact, custAddress, custCity, custCountry) 
{
  $("#__dlgEditCustomer").data('title.dialog', "Customer: [" + custName + "]"); 

  $("#LastUpdate").datepicker();
  $("#__dlgEditCustomer input[@id=CustomerID]").val(custID);
  $("#__dlgEditCustomer input[@id=CompanyName]").val(custName);
  $("#__dlgEditCustomer input[@id=ContactName]").val(custContact);
  $("#__dlgEditCustomer input[@id=Address]").val(custAddress);
  $("#__dlgEditCustomer input[@id=City]").val(custCity);
  $("#__dlgEditCustomer select > option[@text=" + 
             custCountry + "]").attr("selected", "selected");

  $("#__dlgEditCustomer").dialog("open");
}

この関数の本体の最初のコード行では、ダイアログボックスのキャプションを状況依存の情報に設定しています。次に、日付を取得するテキストボックスに日付選択ウィジェットをアタッチします。その他の命令では、各種の入力フィールドを関数に渡す値に初期化しています。これらの行に jQuery CSS セレクタの真価が現れています。次のような行を考えてみましょう。

$("#__dlgEditCustomer input[@id=CompanyName]").val(custName);

このコードでは、_dlgEditCustomer という名前の要素から、ID プロパティが "CompanyName" に等しい入力フィールドをすべて選択し、選択したフィールドの値を指定したコンテンツに設定します。この場合、言うまでもなく jQuery の使用は任意です。Microsoft AJAX クライアントライブラリの機能を使用して強化した従来の DOM コードでも同じように動作します。

jQuery セレクタの真価は、インデックスが事前にわかっていない状態でドロップダウンリストから要素を選択する場合にも現れます。顧客レコードを編集する場合、顧客の居住国はわかっていますが、文字列データしかありません。DOM レベルで SELECT 要素を使用して選択するには、インデックスを指定する必要があります。たとえば、一覧の "Italy" という文字列に対応するインデックスを照合する場合、ループを作成して該当する要素を検索する方法もあれば、jQuery セレクタに処理を任せることもできます。

$("#__dlgEditCustomer select > option[@text=" + custCountry + "]").attr("selected", "selected");

この式では、_dlgEditCustomer という名前の要素から、テキストプロパティが指定した変数の値に等しいすべての OPTION 要素 (SELECT の子) を検索します。一致する要素には selected 属性を設定します。

最後に、すべての初期化処理が完了したらダイアログボックスを表示します。それには、コマンド文字列 "open" を指定して dialog メソッドを呼び出せば十分です。

データをコントローラにポストする

最後の手順として、Web サーバーおよび指定したコントローラメソッド (Home コントローラの UpdateCustomer) にデータをポストします。

ASP.NET MVC では、各 URL および対象リソースの完全な表現を指定する処理が必要な場合があります。顧客 FRANS を更新するには、/Home/UpdateCustomer のような一般的な URL ではなく、/Home/UpdateCustomer/FRANS のような URL と、要求本体の詳細を処理するコードを使用する必要があります。この場合、ダイアログをポップアップするたびにダイアログボックス内のフォームのアクションの URL を更新する必要があります。この処理を行うコードは次のようになります。

$("#__dlgEditCustomer form").attr("action", "/home/updatecustomer/" + custID);

ご覧のように、jQuery セレクタに戻っています。__dlgEditCustomer という名前の要素内のフォームを選択し、そのフォームの action 属性を目的の URL に変更します。図 12 では、新しいデータを Web サーバーに送信し、適切なコントローラメソッドで処理しています (図 12 と図 7 を比較して違いを確認してください)。

図 12 更新されたデータをダイアログからコントローラメソッドにポストする

Web をアップグレードする

Web 上の対話型インターフェイスを追加する場合、エフェクト、ウィジェット、アスペクトを使用し、すべてを厳密に JavaScript で記述する必要があります。jQuery ライブラリは世界中の Web 開発者の間で一般的な選択肢としてすっかり定着し、マイクロソフトの最新の Version 1.3 にもリリースされたばかりの ASP.NET MVC フレームワークが付属しています。

ただし、jQuery ライブラリは ASP.NET MVC にバインドされていません。jQuery ライブラリは単なる JavaScript であるため、JavaScript を使用できる環境であれば問題なく利用できます。このコラムの以前の 2 つの記事、「jQuery によるリッチなクライアントスクリプトについて (第 2 部)」および「jQuery によるリッチなクライアントスクリプトについて (第 1 部)」では、セレクタ、ラップセット、イベント、メソッドなど、jQuery の基本について説明しました。今月は、jQuery ライブラリのもう 1 つの柱である、ウィジェットと対話型インターフェイス専用の jQuery UI ライブラリに重点を置いて説明しました。また、jQuery で Web ページのモーダルダイアログボックスの作成を格段に簡素化する方法を示しました。

ご意見やご感想は、cutting@microsoft.com までお送りください。

Dino Esposito は、IDesign 社のアーキテクトであり、『Microsoft .NET: Architecting Applications for the Enterprise』(Microsoft Press、2008 年) の共著者です。Dino はイタリアに在住し、世界各国で開催される業界のイベントで頻繁に講演しています。ブログは weblogs.asp.net/despos で読むことができます。

次の方法で共有

その他のリソース