對話方塊，將是您，圖形化使用者介面的基本項目。 您可能已經知道它可以強制回應 (Modal) 或非強制回應。 如果其存在防止進一步與應用程式之間的互動使用者解決問題，在對話方塊中，直到會強制回應 (Modal)。 如果使用者只會關閉 []，然後會在不發生任何進一步的動作，可能會觸發由對話方塊。

Windows 開發中,] 對話方塊會是一個常見的方法，建立一個使用者應用程式互動。 尤其，] 對話方塊會經常用於向下切入一些顯示項目的內容或編輯內容。 熟悉的模式，在許多 Windows 應用程式中需要使用者按一下以編輯某些內容，並應用程式顯示強制回應 (Modal) 對話方塊，以輸入更新的資料輸入欄位]。

這個模式從未常用在 Web 應用程式中。 瀏覽器有永遠，支援的快顯視窗，但功能說話他們不完全相同的 Windows 對話方塊。 快顯視窗是只在子 Web 瀏覽器視窗缺少某些的視窗功能，例如 「 網址 」 列或工具列。 [] 視窗會顯示 Web 網頁非常適合視需要顯示其他的內容。 不過，從快顯視窗中張貼的資料，至伺服器從未容易的原因很多。 加入此確認快顯封鎖程式通常會無法開啟的快顯視窗的使用者的電腦上執行。 結果如果您希望您的 Web 應用程式] 對話方塊，快顯視窗不答案。

這的篇文章中，我將建置 jQuery 強制回應和非強制回應對話方塊並說明如何從這些的資料傳至 Web 伺服器。

許多其他程式庫和架構，jQuery 程式庫無法使用瀏覽器的快顯視窗實作對話方塊。 而，jQuery 依賴指令碼程式碼文件物件模型 (DOM) 的片段顯示並關閉它，當使用者會確認執行內容或中止作業。 因為顯示的內容將是您，目前頁面的 DOM 的一部分，有任何回傳的問題，而且更重要的是可以實作 AJAX 功能。

jQuery 的 UI 程式庫

不是的對話方塊的支援會核心 jQuery 庫的版本 1.3 現已提供的一部分。 若要取得] 對話方塊，以及例如 accordion、 索引標籤及日期選擇器，其他不錯 UI Widget 您需要依靠 jQuery 的副檔名 (jQuery 的 UI 程式庫。 可以找到更多的資訊以及下載指示在 ui.jquery.com . 某些文件位於 Docs.jquery.com/UI .

jQuery 的 UI 程式庫包含中列出的元件 [圖 1 和 [圖 2] .

互動都是基本上是可套用至 DOM 包裝集合中選取的項目的外觀。 互動表示跨剪下的行為，且設計使目標項目的更互動式。 例如，藉由組合 Draggable 與可調整大小的互動的對話方塊 Widget，您可以建立類似 Windows 對話方塊，可以移動，並會在調整大小。

如同名稱，Widget 就會是表示索引標籤] 或 [對話方塊，可以使用在頁面等的 UI 元件的個別元件。

如同所提到的 jQuery 的 UI 程式庫必須從核心程式庫個別下載，並且具有相依性的核心程式庫版本。 本文根據 jQuery UI 1.5.3 版 」 和 「 核心程式庫的版本 1.2.6 而定。 您可以閱讀這時，jQuery 以最新的核心程式庫版本 1.3.2 為基礎的 UI 的 1.7 版可使用。

現在，不進一步 ado 看看結合索引標籤和對話方塊的範例。 我使用的 ASP.NET MVC 範例應用程式。 雖然 ASP.NET MVC 架構隨附於核心 jQuery 媒體櫃，還有 jQuery 和 ASP.NET MVC 之間沒有特殊的相依性。 您可以使用 jQuery 以傳統的 ASP.NET Web Form，來達成相同的效能和功能。

範例的案例

我們考慮範例頁面的客戶清單。 每個列出的客戶相數個透過此使用者可以刪除或編輯客戶資訊的按鈕 (請參閱 [圖 3 )。

[圖 3] 的編輯位置的客戶 A 清單

這個構想是使用者按一下 [編輯] 按鈕，在位置變更的。 不過， [圖 3 中的資料表不會為傳統伺服器控制項在就地編輯模式下執行的 DataGrid 和 GridView 像，以交換的文字方塊的標籤。 在這種情況下就會出現一個對話方塊顯示 prefilled 的表單，讓您編輯並儲存。

為了簡單起見的所有 UI 項目 stuffed 到範例 ASP.NET MVC 應用程式的 [首頁] 頁面。 若要編輯此頁面的標記，您必須依靠相關聯的檢視檔案。 預設狀況下中,，它是位於 views\home 的 Index.aspx。

至少使用預設檢視 Factory (以基礎 Web Form 的呈現引擎)，建立檢視的 ASP.NET MVC 的頁面結果的純文字的 HTML 常值和 C# 或 Visual Basic.NET 程式碼區塊的混合。 HTML 協助程式存在進行 HTML 產生更平滑及更快的處理序。 不過，沒有正式的 HTML 協助程式有產生傳統的 DataGrid，而不需要您撰寫的每一行標記。 框格的一些範例 HTML 協助程式存在。 如果您興趣看看 MVCContrib .

在這個範例中的舊時間起見我用來 GridView 控制項產生資料表 [圖 3 ] 中。 (具有撰寫許多關於 DataGrids 的最近才用過，讓我 [ASP.NET 伺服器控制項所主要消失之後您所選擇的 ASP.NET MVC)。 傳統的 ASP.NET 伺服器控制項與 ASP.NET MVC，但它們應該被視為只簡單的 HTML 工廠不回傳的功能。 在 ASP.NET MVC，任何用戶端 」 和 「 Web 伺服器之間的互動，會發生 HTTP 呼叫，目標在控制器的動作，完全不同的模型，從 Web Form 的回傳。 [圖 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">
            <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>
        <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 id="tabOrders">
            <span style="font-size:125%"><b>Orders here</b></span>
            <hr style="height: 2px;border-top:solid 1px black;" /> 
        <div id="tabOther">
            <span style="font-size:125%"><b>Other content here</b></span>
            <hr style="height: 2px;border-top:solid 1px black;" /> 
    <%-- This is the fragment of markup that identifies the 
         content of the dialog box --%>
    <% Html.RenderPartial("uc_dlgEditCustomer"); %>
</asp:Content>
範例頁面是由一連串的 DIV 標籤，每一個都代表一個索引標籤所組成。 所有索引標籤連結的一連串的清單項目的標記。 此標記會轉換成] 索引標籤的窗格上，由指令碼的程式碼片段。 尤其，jQuery 的 tabs() 方法會換行組會接受所有的項目，並為索引標籤的窗格中呈現它們。 產生使用者介面包含三個窗格 — 客戶、 訂單，及其他。
[客戶] 索引標籤] 窗格大部分根據 uc_ListCustomers MVC 使用者控制項所產生的內容。 使用者控制項接收資料，以顯示從父項的檢視中。 要顯示的資料 ViewData.model 運算式所參考，並由 <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" />
          </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>
您可以看到每個顯示的客戶繫結至名為 fnEditCustomer 的 JavaScript 函式。 這個函式會負責顯示對話方塊，並進一步管理更新程式。 我將會傳回這一點時間。
正在準備索引標籤的窗格
若要以便在索引標籤式內容窗格中，您會呼叫 tabs() 方法包裝集合中的任何項目上。 jQuery 的 UI 程式庫中的所有 Widget，都需要 DOM 子樹狀架構，做為範本，再加上一些選擇性的設定。 通常，您提供預設的頁面載入並套用其他設定，稍後會根據內容的等候時的組態設定。 下列程式碼介紹準備索引窗格的方法。
<script type="text/javascript">
    $(document).ready(function() {
        $("#AppConsole > ul").tabs();
</script>
適用於 AppConsole ID。 項目的所有 <ul> 子項目的索引標籤的方法 在 <ul> 內的每個 <li> 會變成一個索引標籤。 在 <li> 然後必須連結到一個 <div>，提供內容頁面內上。
索引標籤方法將具有設定，以表示的索引標籤會停用，當使用者按一下，以及如果有顯示時，必須選取任何索引標籤會發生什麼事。 下列程式碼會顯示如何設定 [] 索引標籤停用，第三個索引標籤、 切換索引標籤，在滑鼠停留，並且索引標籤之間切換時，請使用一些動畫的 Widget。
<script type="text/javascript">
    $(document).ready(function() {
        $("#AppConsole > ul").tabs(
                    disabled: [2],
                    event: 'mouseover', 
                    fx: { opacity: 'toggle'}
</script>
為了成功地使用您的頁面中的索引標籤 Widget，您要連結下列指令碼檔案，除了核心 jQuery 程式庫檔案。
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.tabs.js"></script>
索引標籤的方法功能一個更豐富的 API，讓您新增，移除，或選取索引標籤，然後下載以動態方式透過 AJAX 的內容。
正在準備對話方塊
對話方塊有一個類似的 API 根據換行集上叫用方法，並且將在其設定一些選項會]。
不像索引窗格，對話方塊，它可以顯示之前需要更多工作。 只在對話方塊必須顯示某些靜態內容可以完全設定在文件上準備事件中。 大部分時間，不過，您想要顯示的內容會反映目前頁面和可能是目前所選取之項目的狀態] 對話方塊。 讓我們開頭 jQuery] 對話方塊的定義。
在對話方塊的內容定義於 <div> 標記位置位於頁面。 在 [圖 4 ，對話方塊的內容插入使用者控制項，會呼叫頁面的 DOM 中。
    <!-- This is the fragment of markup that identifies the 
         content of the dialog box -->
    <% Html.RenderPartial("uc_dlgEditCustomer"); %>
第一次載入裝載頁面時，會與檢視一起呈現對話方塊範本。 這一次，您可能不知道要在對話方塊顯示之資料。 您有兩個選項基本上是即時線上的資料填入] 對話方塊。 第一次，您會傳遞至 JavaScript 函式會實際上顯啟動對話方塊的實際資料。 第二個，您進行的 AJAX 呼叫 Web 伺服器，擷取 (最好是快取) 任何所需的資料之前顯示對話方塊。 在本文中，我選擇前者的方法。
下列的 JavaScript 程式碼會在頁面 DOM，準備事件處理常式中執行和建立和初始化 [] 但不顯示它。
$("#__dlgEditCustomer").dialog(
      autoOpen: false,
      modal: true,
      overlay: { opacity: 0.2, background: "cyan" },
      width: 550,
      height: 400,
      position: [600, 250]
程式碼所示，您會指定的寬度和高度在指定位置的半透明的重疊顯示的強制回應 (Modal) 對話方塊。 在 autoOpen = False 設定可防止當載入頁面顯示對話方塊。
某些的指令碼檔案是需要的使用對話方塊的。 最起碼，您需要下列兩個指令碼檔案：
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.dialog.js"></script>
此外，您需要在兩個常見的互動，draggability 和 resizability 所需的 JavaScript 檔案的連結：
<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript" src="ui.resizable.js"></script>
不過，請注意，可拖曳和調整大小的方面可以透過設定停用。在這種情況下您不不再需要先前的指令碼檔案。
在的 dialog() 方法會 (建立) 動態的 IFRAME 中，並複製 [對話方塊範本的內容] 中的它。如果內容超過了最大的區域，將自動出現捲軸。在產生對話方塊會有標題列] 和 [X [關閉] 按鈕，在右上角。此外，下方的按鈕列可設定，讓對話方塊可以提供非常類似於桌上型電腦的整體的使用者經驗的內容 [確定] / [取消] 」 和 「 是 / 否 / 取消] 按鈕的一般組合。[圖 7 ] 顯示標準的 jQuery] 對話方塊的一般樣式。
[圖 7 A jQuery Draggable 和可調整的對話方塊
青色的背景產生對話方塊的建構函式中定義的 「 重疊 」 設定。
overlay: { opacity: 0.2, background: "cyan" }
] 對話方塊置在頁面中每個其他元素的頂端，並圖層可以區隔] 對話方塊中的 [頁面中的其他可點選的項目。在對話方塊之外的任何使用者按一下將會只遺失。對話方塊可以調整大小拖曳邊控點。
在 jQuery Widget 的外觀，取決於選取的佈景主題。在這個範例中，我只使用預設的佈景主題 jQuery UI 1.5 的。無論如何 jQuery 佈景主題是由一連串的將放置在專案的檔案和一個單一的 CSS 檔案參考主版頁面中所組成。您可以取得免費的 jQuery 佈景主題，並甚至建立您自己的ui.jquery.com/themeroller[網站]。
填入 [對話方塊
如同所提到的在對話方塊中，主要是 DOM 子樹狀結構。接著，若要顯示使用者的輸入的表單文字方塊、 下拉式清單和核取方塊，您先建立 HTML 表單] 和 [資料表為基礎配置呈現具有描述標籤的輸入的欄位。[圖 8 ] 顯示對話方塊的內部標記的摘錄。
對話方塊的 [圖 8 標記
<% Html.BeginForm("UpdateCustomer", "Home"); %>
   <table>
       <td><b>ID</b></td>
       <td><input id="ID" name="ID" type="text" disabled="disabled" /></
       <td><b>Company</b></td>
       <td><input id="CompanyName" name="CompanyName" type="text" /></td>
       <td><b>Country</b></td>
          <%= Html.DropDownList("Country", 
                                new SelectList(ViewData.Model) %>
   </table>
<% Html.EndForm(); %>
您可以使用 ASP.NET MVC 協助程式，以產生標記 <form> 標記。 BeginForm 協助程式，會接受 「 至少兩個參數-控制器上引發動作所送出和控制站名稱。 它會不說是否您要對話方塊，以傳至伺服器，則需要有對話方塊內的 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] 事件的 [影像] 按鈕會連結到 fnEditCustomer 的 JavaScript 函式中。這個函式負責最後初始化和顯示在對話方塊 (請參閱 [圖 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");
程式碼的函式主體的第一行會設定對話方塊的標題，即時線上的資訊。 接下來，在日期選擇器 Widget 附加至預定傳送到接收日期文字方塊。 初始化為傳遞至函式的值不同的輸入的欄位提供其他指示。 您會看到為 true 的 jQuery CSS 選取器，在這些行功能。 請考慮下列行：
$("#__dlgEditCustomer input[@id=CompanyName]").val(custName);
行讀取像這樣： 選取內名為的 _dlgEditCustomer 其 ID 屬性等於"CompanyName"的項目的所有輸入的欄位，並將它們的值設定指定的內容。 不用，說在此內容中使用 jQuery 是任意的。 也可以使用 enriched 從 Microsoft AJAX 用戶端程式庫的功能與傳統的 DOM 程式碼。
事先不知道索引時，拉清單中的選取項目時，jQuery 選取器的能力也會成為很明顯。 編輯客戶資料錄時，您知道的國家她住在美國，但您只需在您的手字串。 DOM 層級 SELECT 的項目以選擇，您需要指定的索引。 您如何可以符合，說，在字串 「 義大利 」 至對應的索引在清單中？ 您可以自行撰寫迴圈，並尋找相符的項目或您可以依賴 jQuery 選取器就可以了：
$("#__dlgEditCustomer select > option[@text=" + custCountry + "]").attr("selected", "selected");
運算式會讀取像這樣： 項目，名為 _dlgEditCustomer 中, 尋找所有 OPTION 項目子系的文字屬性等於指定的變數的值的其中 SELECT。 任何符合的項目中，您設定選取的屬性。
最後，一旦有已完成所有的初始設定工作，顯示] 對話方塊。 呼叫對話方塊) 方法，以開啟] 命令字串就夠了。
通知資料貼入控制器
最後一個步驟張貼資料至 Web 伺服器，並精確地至指定的控制器方法 — UpdateCustomer 主控制站上的。
在 ASP.NET MVC，您可以讓每個重要的 URL 和完整代表目標資源。 若要更新客戶 FRANS，您應該從要求主體的詳細資料時所使用的一些程式碼中使用 URL 例如首頁 / UpdateCustomer / FRANS 而不是在一般 / 首頁 / UpdateCustomer URL。 這表示您應該更新在對話方塊的表單動作 URL 每次您顯示對話方塊。 以下是做法：
$("#__dlgEditCustomer form").attr("action", "/home/updatecustomer/" + custID);
您可以看到 jQuery 選取器擊中回一次。您選取了名為 __dlgEditCustomer 項目內的表單，而且該表單的您變更動作屬性為選擇的 URL。[圖 12 會顯示全新的資料是真正送出至 Web 伺服器，以及由正確的控制器的方法。(查看 [圖 12] 和 [圖 7 來找出任何差異)。
[圖 12 張貼控制器的方法更新的資料： 對話方塊
升級 Web
如果您希望更多的互動，透過 Web，然後您需要效果、 Widget，和方面，和所有嚴格寫入在 JavaScript 中。jQuery 程式庫已成為全世界的 Web 開發人員的非常受歡迎的選擇，和 Microsoft 本身船隻.Just-發行 ASP.NET MVC Framework 最新的版本 1.3]。
jQuery 媒體櫃，但是，是在不繫方式結至 ASP.NET MVC。它是只要 JavaScript 因此程式庫任何接受 JavaScript，位置是 [確定]。在本專欄的過去的兩個 installments 」 中探索豐富型用戶端指令碼與 jQuery，Part 2「 和 」探索豐富型用戶端指令碼與 jQuery，Part 1"我涵蓋 jQuery，包括選取、 換行的設定、 事件和方法的基本概念。這個月，我著重於在不同程式庫的三向 — jQuery 的 UI 程式庫 — 的專長 Widget 以及互動情形。本月您看到如何 jQuery 讓建立強制回應 (Modal) 對話方塊在 Web 網頁中更容易。
您提出問題或意見，請以 Dino 寄cutting@Microsoft.com.
Dino Esposito 將是 IDesign 和，也是 Microsoft .NET: Architecting Applications for the Enterprise (Microsoft Press 2008) 的架構設計人員。基礎的義大利，Dino 都是在世界各地的產業活動經常演講者簡報。您可以加入在他的部落格weblogs.asp。net / despos.