领先

使用 jQuery 生成丰富用户界面

Dino Esposito

内容

jQuery UI 库
示例方案
准备一个选项卡式的窗格
正在准备对话框
填充对话框
显示前的初始化
过帐到该控制器的数据
升级 Web

在对话框是图形用户界面的一个基本元素。您或许知道它可以模式或无模式。如果它存在进一步防止与该应用程序的交互，直到用户解决问题对话框中的，则模式。如果在用户只需关闭对话框中，然后会进一步的操作，可能会触发由对话框。

在 Windows 开发对话框是一常见的种方式构建用户对应用程序交互的。特别，对话框通常用于向下钻取到一些显示项的内容或编辑内容。许多 Windows 应用程序中的常见模式要求单击以编辑某些内容用户，，应用程序显示一个模式对话框，使用您输入更新的数据输入字段。

此模式从未常见 Web 应用程序中。浏览器必须始终，支持弹出窗口，但功能上讲它们不完全与 Windows 对话框相同。弹出式窗口是只是一个子 Web 浏览器窗口缺少某些窗口功能，如地址栏或工具栏。窗口显示非常根据显示其他内容的 Web 页。但是，从弹出式窗口发布到服务器的数据从未便于的原因。将添加到这弹出窗口阻止程序通常在弹出窗口阻止打开的用户的计算机上运行。因此，如果需要在您的 Web 应用程序的对话框，弹出窗口不是答案。

此文章中, 我将生成模式和无模式对话框在 jQuery 并介绍了如何从发布到 Web 服务器的数据。

如许多其他库和框架，jQuery 库不会使用浏览器的弹出窗口实现的对话框。相反，jQuery 依赖脚本代码，以弹出文档对象模型 (DOM) 的片段，并在用户确认内容或中止操作在执行时关闭它。因为显示的内容是当前页面的 DOM 的一部分，有回发时没有出现问题，并且可以更是重要实现 AJAX 功能。

jQuery UI 库

支持对话框不是核心 jQuery 库中的版本 1.3 目前的一部分。要获取对话框以及其他很好的用户界面 Widgets，accordion、 选项卡，和日期选取器，您需要求助于 jQuery 的扩展，jQuery UI 库。可以在找到更多信息和下载说明ui.jquery.com. 一些文档可在Docs.jquery.com/UI.

jQuery UI 库包含中列出的组件图 1和图 2 .

交互是实质上是可应用于一换行组中选择的 DOM 元素的一个方面。交互代表跨剪切行为的并且被设计为使目标元素更具交互性。是例如通过将与 Draggable 和可调整大小的交互的对话框 Widget，您可以构建一个可以被移动并调整其尺寸在将类似于 Windows 的对话框。

如名称的建议小部件将是代表用户界面组件选项卡或对话框，可以在页中使用的单个组件。

提到，jQuery UI 库必须从核心库单独下载并对核心库的版本的依赖项。本文基于 jQuery UI 的版本 1.5.3 和核心库 1.2.6 版本。情况您阅读此时间，jQuery 用户界面是基于最新核心库版本 1.3.2 1.7 版将可用。

现在，不进一步 ado 让我们查看合并选项卡和对话框的示例。我将使用 ASP.NET MVC 示例应用程序。虽然 ASP.NET MVC 框架附带核心 jQuery 库，还有 jQuery 和 ASP.NET MVC 之间没有特殊依赖性。您可以获得相同的性能和功能 jQuery 使用传统的 ASP.NET Web 窗体。

示例方案

让我们设想带有客户的列表的示例页面。每个列出的客户所关联的按钮，通过该用户可以删除或编辑客户信息 （参见 图 3 ）。

图 3 若要编辑位置中的客户列表

其理念是用户单击编辑按钮在位置进行更改。但是， 图 3 中的表不会作为在就地编辑模式下 DataGrid 和 GridView 像传统的服务器控件中交换包含文本框的标签。在这种情况下一个对话框将弹出显示预填充窗体可以编辑并保存。

为简单起见，所有 UI 元素都塞到示例 ASP.NET MVC 应用程序的主页页。若要编辑此页的标记，您需要求助于关联的视图文件。默认，情况是 Index.aspx 位于 views\home。

至少使用默认视图工厂 （基于 Web 窗体呈现引擎），创建视图的 ASP.NET MVC 的页结果多种普通的 HTML 文本和 C# 或 Visual Basic.NET 代码块中。HTML 帮助程序存在将 HTML 生成更流畅和快捷进程。但是，没有正式的 HTML 帮助存在用于生成无需您编写标记每一行的传统的 DataGrid。几个示例 HTML 帮助栅格的存在。如果您感必须查看MVCContrib.

在此示例，旧时间为我使用 GridView 控件生成表 图 3 中。（具有可用，许多有关 DataGrids 编写的近，我指出 ASP.NET 服务器控件主要是丢失了一旦您选择 ASP.NET MVC)。 与 ASP.NET MVC，工作的传统的 ASP.NET 服务器控件，但它们应被视为只简单的 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 标记，都代表一个选项卡。 所有选项卡被链接的列表项标记的序列中。 此标记的一段脚本代码转换到选项卡窗格。 特别，jQuery 的 tabs() 方法采用换行的集合中的所有元素，并呈现其为选项卡的窗格。 在生成的用户界面包含三个的窗格客户、 订单，和其他。

客户选项卡窗格通常基于由 uc_ListCustomers MVC 用户控件的内容。 用户控件接收在父视图中显示的数据。 要显示的数据引用由 ViewData.model 表达式，包含列表 <customer> 对象。 不必说在此上下文中客户是在使用 ADO.NET 实体框架、 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 显示了在标记为包含指向 JavaScript 函数使用 jQuery 网格。

图 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>

正如您所看到每个显示的客户绑定到一个名为 fnEditCustomer 的 JavaScript 函数。 此函数负责显示对话框，并进一步控制更新。 我将稍后返回到此。

准备一个选项卡式的窗格

若要创建选项卡式内容窗格，换行集中的任何元素上调用 tabs() 方法。 jQuery UI 库中的所有小部件需要要用作模板以及一些可选配置的 DOM 子树。 通常，您提供默认页加载和等待应用更高版本基于上下文的其他设置的配置设置。 下面的代码演示如何准备一个选项卡式窗格。

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

选项卡方法才有效在所有的 <ul> 子元素的元素为 AppConsole ID。 在 <ul> 中的每个 <li> 成为一个选项卡。 在 <li> 必须然后链接到一个 <div> 提供内容的页面中。

该选项卡方法具有指示的选项卡将被禁用怎样当用户单击，并且在显示时，必须选择任一选项卡的设置。 下面的代码演示如何配置选项卡禁用第三个选项卡、 切换鼠标悬停上, 选项卡和选项卡之间切换时使用某些动画的小组件。

<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 函数，将实际 pop 最对话框。 第二个，进行 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 设置禁止显示页面加载对话框。

一些脚本文件是使用对话框所必需的。 在将非常小，您需要以下两个脚本文件：

<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>

但是，请注意，draggable 和可调整大小方面可以禁用通过设置。在这种情况下不必前面的脚本文件再。

在 dialog() 方法可创建动态的 IFRAME 并中它复制对话框模板的内容。如果内容超出最大区域，将自动显示滚动条。随后出现的对话框在右上角有标题栏和 X 关闭按钮。此外，以便对话框可以提供通常组合的确定 / 取消和是 / 否 / 取消按钮，非常类似于桌面的总体的用户体验的上下文中，可以配置底部按钮栏。图 7 显示了一个标准的 jQuery 对话框的典型样式。

图 7 A jQuery Draggable 和大小可调整的对话框

蓝绿色背景导致覆盖设置对话框构造函数中定义。

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

对话框放在页中的每个其他元素的顶部，并且图层分开页面中其他可单击的元素对话框。 对话框之外的任何用户单击将只是丢失。 可以通过在面上拖动控点调整对话框。

jQuery 小部件的外观取决于选定的主题。 在此示例，我只为 jQuery UI 1.5 使用默认主题。 在任何种情况下 jQuery 主题包含一组放在项目中的文件和母版页中引用一个单个 CSS 文件。 可以获取免费 jQuery 主题，和甚至创建您自己从此 ui.jquery.com/themeroller Web 站点。

填充对话框

已提到，对话框是主要 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 帮助器使用至少两个参数，将触发控制器措施提交和控制器名称。 它是不说是否您希望一个对话框，向服务器，然后需要有对话框中的 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 视图的所有信息都组合在一起的。 在 neater 比它的代码中使用的特殊类结果正在使用非类型化 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 附加到发送到接收日期文本框。 其他说明用于初始化为传递给函数的值不同的输入的字段。 您将看到 jQuery CSS 选择器，这些行中的真正功能。 请考虑以下行：

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

行显示如下： 选择一个名为的 _dlgEditCustomer ID 属性等于"公司名称"的元素中的所有输入的字段，并将其值设置为指定的内容。 不必说在此上下文中使用是 jQuery 的任意的。 使用 Microsoft AJAX 客户端库中的功能强化的传统 DOM 代码也工作。

jQuery 选择器的功能也很明显时可不事先知道索引时选择一个下拉列表中的元素。 时开始编辑客户记录您知道 ； 她所在的国家，但您必须在您手中的全部是字符串。 DOM 级别 SELECT 元素中进行选择您需要指定索引。 如何可以匹配，说，将字符串"意大利"到相应的索引列表中？ 可以自己编写一个循环，并找到一个匹配的元素，或者您可以依靠 jQuery 选择器：

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

该表达式显示如下： 在元素名为 _dlgEditCustomer 内, 查找所有 OPTION 元素 SELECT 其中 Text 属性等于指定变量的值的子。 对于任何匹配的元素，您设置所选的属性。

最后，在完成所有初始化工作后您显示对话框。 调用"打开"命令字符串对话框方法就足够了。

过帐到该控制器的数据

最后一步过帐数据到 Web 服务器和精确到指定的控制器方法 UpdateCustomer 主控制器上的。

在 ASP.NET MVC，您可能希望每个重要的 URL 和完全代表目标资源。 若要更新客户 FRANS，应与请求正文中详细信息时使用一些代码使用诸如住宅 / UpdateCustomer / FRANS 而非一个公共 / 家庭 UpdateCustomer URL URL。 这意味着您应该更新对话框中的窗体的操作 URL 每当您弹出该对话框。 以下是如何执行该操作：

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

正如您所看到 jQuery 选择器取得回再次。您选择窗体在名为 __dlgEditCustomer 元素内的，并为该窗体更改 action 属性到选择的 URL。图 12 显示刷新数据是真正提交到 Web 服务器和由右控制器方法处理。（查看 图 12 和 图 7 以发现任何差异)。

图 12 发布控制器方法更新的数据对话框

升级 Web

如果在 Web 上需要更多的交互，则需要效果、 Widgets，和方面 ； 以及所有严格编写 JavaScript。jQuery 库已变得对于所有世界各地 Web 开发人员非常流行的选择，并 Microsoft 本身提供最新版本 1.3 与刚发布 ASP.NET MVC 框架。

在 jQuery 库但，是在不绑方式定到 ASP.NET MVC。它是只是 JavaScript 因此只要 JavaScript 将被接受库是确定。在过去的两个付款在本专栏的"探索丰富客户端脚本与 jQuery，部件 2"和"探索丰富客户端脚本与 jQuery，第 1 部分"我介绍 jQuery，包括选择器、 换行的设置，事件和方法的基础知识。本月，我专注于库的一个单独引线） jQuery UI 库，专门的研究 Widgets 和交互。这个月您看到如何 jQuery 使构建模式对话框在网页中更容易。

将向 Dino 您想询问的问题和提出的意见提出发送至cutting@Microsoft.com.

Dino Esposito 是 IDesign 和 Microsoft .NET: Architecting Applications for the Enterprise (Microsoft Press 2008) 的架构师。基于在意大利，Dino 是世界各地的业内活动中发表演讲。您可以加入在他的博客weblogs.asp。net / despos.