Este artigo foi traduzido por máquina.

Cutting Edge

Criar interfaces do usuário rich com jQuery

Dino Esposito

Conteúdo

O jQuery biblioteca da interface do usuário
O cenário de exemplo
Preparando-se um painel com guias
Preparando-se uma caixa de diálogo
Preenchendo a caixa de diálogo
Inicialização antes da exibição
Lançar o controlador de dados
Atualizando a Web

Uma caixa de diálogo é um elemento fundamental de uma interface gráfica do usuário. Como você provavelmente sabe, pode ser restrita ou sem janela restrita. É modal se sua presença mais impede interação com o aplicativo até que o usuário responde à pergunta na caixa de diálogo. Se o usuário simplesmente descarta a caixa de diálogo, nenhuma ação ocorrerá que pode ser disparado por caixa de diálogo.

No desenvolvimento do Windows, caixas de diálogo são uma maneira comum de criação de uma interação do usuário para aplicativo. Em particular, caixas de diálogo com freqüência são usadas para analisar o conteúdo de alguns itens exibidos ou para editar o conteúdo. Requer que um padrão familiarizado em muitos aplicativos Windows o usuário clique para editar o conteúdo e o aplicativo exibe uma caixa de diálogo modal com campos de entrada para você digitar dados atualizados.

Esse padrão nunca foi popular em aplicativos da Web. Navegadores têm suporte janelas pop-up para sempre, mas fala funcionalmente elas não exatamente o mesmo que as caixas de diálogo do Windows. Uma janela pop-up é simplesmente uma Web navegador janela filho na falta de alguns recursos de janela como a barra de endereços ou a barra de ferramentas. A janela exibe uma página da Web, que é ótimo para mostrar o conteúdo adicional sob demanda. No entanto, enviar dados de um pop-up para o servidor nunca foi fácil por uma série de razões. Adicione a isso se bloqueadores de pop-ups geralmente estão sendo executados nos computadores dos usuários, impedindo que os pop-ups abertura. Como resultado, se desejar que as caixas de diálogo em seu aplicativo da Web, janelas pop-up não são a resposta.

Neste artigo, será criar caixas de diálogo modal e sem janela restrita em jQuery e explique como postar dados para o servidor Web.

Como muitas outras bibliotecas e estruturas, a biblioteca jQuery não usa janelas pop-up do navegador para implementar as caixas de diálogo. Em vez disso, jQuery depende de código de script para pop-up um fragmento do DOM (Document Object Model) e descartá-lo quando o usuário confirma que o conteúdo ou a operação de anulação é executada. Como o conteúdo exibido é parte do DOM da página atual, não há nenhum problema de postback e, mais importante, os recursos do AJAX podem ser implementados.

O jQuery biblioteca da interface do usuário

Suporte para caixas de diálogo não é parte da biblioteca principal jQuery, cuja versão 1.3 está disponível. Para obter as caixas de diálogo bem como outros widgets de interface do usuário bom, como accordion, guias e um selecionador de data, você precisará recorrer a uma extensão de jQuery — a biblioteca de interface do usuário jQuery. As instruções de informações e baixar mais podem ser encontradas noUI.jquery.com. Alguns documentação está disponível emdocs.jquery.com/UI.

A biblioteca de interface do usuário jQuery é composta dos componentes listados no A Figura 1 e A Figura 2 .

Uma interação é essencialmente um aspecto que pode ser aplicado a elementos DOM selecionados em um conjunto de quebra automática. Uma interação representa um comportamento abrangentes e é projetada para tornar os elementos de destino mais interativas. Por exemplo, combinando o widget de caixa de diálogo com o Draggable e interações redimensionáveis, você pode criar uma caixa de diálogo como do Windows que pode ser movida ao redor e redimensionada à vontade.

Como o nome sugere, widgets são componentes individuais que representam componentes da interface do usuário, como guias ou caixas de diálogo que estão prontos para uso em suas páginas.

Conforme mencionado, a biblioteca de interface do usuário jQuery deve ser baixada separadamente da biblioteca principal e tem dependências na versão da biblioteca principal. Este artigo se baseia no versão 1.5.3 jQuery da interface do usuário e na versão 1.2.6 da biblioteca principal. Quando a que você ler isso, a versão 1.7 de interface do usuário, que se baseia na versão de biblioteca principal mais recente 1.3.2 jQuery estará disponível.

Agora, sem mais a acrescentar, vamos ver um exemplo que combina as guias e caixas de diálogo. Usarei um aplicativo de exemplo MVC do ASP.NET. Embora a estrutura do ASP.NET MVC vem acompanhado da biblioteca de jQuery principal, não há nenhuma dependência especial entre jQuery e MVC do ASP.NET. Você pode obter o mesmo desempenho e funcionalidade usando jQuery com clássico ASP.NET Web Forms.

O cenário de exemplo

Vamos considerar uma página de exemplo com uma lista de clientes. Cada cliente listado está associado com alguns botões através do qual o usuário pode excluir ou editar informações do cliente (veja a Figura 3 ).

A Figura 3 uma lista de clientes para editar no local

A idéia é que os usuários clicar no botão Editar para fazer alterações no lugar. No entanto, a tabela na Figura 3 não troca rótulos com caixas de texto como controles de servidor clássico como DataGrid e GridView no modo de edição in-loco. Nesse caso, uma caixa de diálogo será pop-up mostrando um formulário preenchidas previamente para editar e salvar.

Para simplificar, todos os elementos de interface do usuário são inseridos na página inicial do aplicativo ASP.NET MVC exemplo. Para editar a marcação nesta página, você precisará recorrer ao arquivo de exibição associada. Por padrão, ele é index.aspx localizado em views\home.

Pelo menos com a fábrica de modo de exibição padrão (com base no mecanismo de processamento formulários da Web), criando modos de exibição para um MVC ASP.NET página resultados em uma combinação de literais HTML simples e C# ou Visual Basic .NET blocos de código. Auxiliares HTML existem para tornar a geração de HTML um processo mais suave e rápido. No entanto, nenhum auxiliar de HTML oficial existe para produzir um DataGrid clássico sem a cada linha de marcação de escrever. Existem poucas auxiliares HTML de exemplo para uma grade. Se você estiver interessado, ter uma aparência emMVCContrib.

Neste exemplo, para bem horários antigos usei um controle GridView para gerar o índice na Figura 3 . (Com escrita muito sobre DataGrids no passado recente, deixe-me Enfatize que os controles de servidor do ASP.NET são principalmente desapareceu depois de você optar por ASP.NET MVC.) Os controles de servidor tradicionais do ASP.NET funcionam com MVC do ASP.NET, mas deve ser visualizadas somente como fábricas HTML simples com nenhum postback recursos. No ASP.NET MVC, qualquer interação entre o cliente e servidor ocorre através de HTTP da chama esse destino uma ação de controlador — um modelo radicalmente diferente de postagem de formulários da Web. a Figura 4 mostra o código-fonte da home page do aplicativo de exemplo.

Figura 4 O modo de exibição para a home page

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

A página de exemplo é composta de uma série de marcas DIV, cada um deles representa uma guia. Todas as guias são vinculadas a partir de uma seqüência de marcas de itens de lista. Essa marcação é transformada em um painel do guia por uma parte do código de script. Em particular, tabs() método do jQuery pega todos os elementos no conjunto de quebra automática e processa-os como painéis da guia. A interface de usuário resultante contém três painéis — os clientes, pedidos e outro.

O painel de guia clientes principalmente se baseia o conteúdo gerado pelo controle de usuário uc_ListCustomers MVC. O controle de usuário recebe dados para exibir o modo de exibição do pai. Dados para exibição são referenciados pela expressão ViewData.Model e consiste em uma lista <customer> objeto. Não é necessário dizer que, neste contexto cliente é uma classe de entidade definida no seu modelo de domínio criado com a estrutura de entidades ADO.NET, LINQ para SQL ou qualquer outra. A ação de controlador responsável pela home page é encarregada de recuperando dados e passá-la e, como visto aqui:

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);
}

Para receber a lista de clientes, o controle de usuário deve declarar sua classe base da mesma forma, como você pode ver na A Figura 5 .

A Figura 5 declarar a classe base

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

Se você usar um controle de servidor ligados a dados para gerar a marcação, em seguida, você vincular os dados a ele em Page_Load. a Figura 6 mostra a marcação para a grade com links para funções de JavaScript usando jQuery.

Figura 6 A marcação para a grade

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

Como você pode ver, cada cliente exibida é acoplado a uma função JavaScript chamada fnEditCustomer. Esta função é responsável por exibir a caixa de diálogo e controla outras atualizações. Irá retornar a isso em instantes.

Preparando-se um painel com guias

Para criar um painel de conteúdo com guias, você chamar o método tabs() em qualquer elemento em um conjunto de quebra automática. Todos os widgets na biblioteca de interface do usuário jQuery necessário uma subárvore DOM a ser usado como um modelo mais algumas configurações opcionais. Normalmente, você fornecer o padrão configurações durante o carregamento de página e espera para aplicar outras configurações mais tarde com base no contexto. O código a seguir mostra como preparar um painel com guias.

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

O método de guias funciona em todos os elementos do filho <ul> do elemento com a identificação de AppConsole. Cada <li> dentro a <ul> se torna uma guia. O <li>, em seguida, deve ser vinculado a um <div> na página que fornece o conteúdo.

O método de guias tem configurações para indicar quais guias estiverem desabilitadas, o que acontece quando o usuário clica em, e se qualquer guia deve ser selecionado na exibição. O código a seguir mostra como configurar o widget guia para desativar a guia terceira, alternar as guias no mouse focalização e use alguns animação quando se alterna entre as guias.

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

Para usar com êxito o widget guia em suas páginas, você precisará vincular os seguintes arquivos script em adição ao arquivo principal jQuery biblioteca.

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

Os recursos de método de guias uma API mais sofisticado para você adicionar, remover, ou selecione as guias e baixar conteúdo dinamicamente por meio de AJAX.

Preparando-se uma caixa de diálogo

A caixa de diálogo tem uma API semelhante, com base em um método para chamar em um conjunto ajustado e serão de algumas opções para configurá-lo no.

Ao contrário de painéis com guias, uma caixa de diálogo precisa mais trabalho antes que ele pode ser exibidos. Somente caixas de diálogo espera mostrar que algum conteúdo estático pode ser totalmente configurado no evento pronto no documento. Na maioria das vezes, porém, você deseja exibir uma caixa de diálogo cujo conteúdo reflete o estado atual da página e talvez o item atualmente selecionado. Vamos começar com a definição de uma caixa de diálogo jQuery.

O conteúdo da caixa diálogo é definido em uma marca <div> localizada em algum lugar na página. Na Figura 4 , o conteúdo da caixa de diálogo é inserido como um controle de usuário no DOM da página que irá chamá-lo.

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

O modelo de diálogo é processado juntamente com o modo de exibição quando a página host é carregada pela primeira vez. Nesse momento, você pode não conhece os dados para exibir na caixa de diálogo. Você tem basicamente duas opções para preencher a caixa de diálogo com dados contextuais. Primeiro, você passar dados reais para a função JavaScript que serão realmente pop up a caixa de diálogo. Em segundo lugar, você fazer uma chamada AJAX para o servidor da Web que recupera (e o ideal é que armazena em cache) os dados necessários apenas antes de exibir a caixa de diálogo. Neste artigo, eu tiver optado pela primeira abordagem.

O código JavaScript a seguir é executado dentro do manipulador de eventos pronto para a página DOM e cria e inicializa a caixa de diálogo, mas não exibi-la.

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

Como mostra o código, você terá uma caixa de diálogo modal com uma determinada largura e altura que exibe em uma posição determinada com uma sobreposição semitransparente. O autoOpen = false configuração impede que a caixa de diálogo aparece como a página for carregada.

Alguns arquivos de script são necessários para usar as caixas de diálogo. No mínimo, você precisa dos seguintes arquivos de script dois:

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

Além disso, você precisa vincular os arquivos JavaScript necessários para dois interações comuns, como draggability e resizability:

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

Observe, contudo, que os aspectos arrastáveis e redimensionáveis podem ser desativados através das configurações. Nesse caso, você não precisa os arquivos de script anterior mais.

O método dialog() cria um IFRAME dinâmico e copia o conteúdo do modelo diálogo nela. Se o conteúdo exceder a área máxima, barras de rolagem serão exibido automaticamente. A caixa de diálogo resultante tem uma barra de título e um X Fechar botão no canto superior direito. Além disso, uma barra de botões inferior pode ser configurada para que a caixa de diálogo pode oferecer a combinação normal de botões, como OK/Cancelar e Sim/Não/Cancelar no contexto de uma experiência de usuário geral que é muito semelhante à área de trabalho. a Figura 7 mostra o estilo típico de uma caixa de diálogo jQuery padrão.

A Figura 7 a caixa de diálogo redimensionáveis e um jQuery Draggable

O plano de fundo ciano resulta das configurações de sobreposição definidas no construtor de diálogo.

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

A caixa de diálogo é colocada em cima de cada elemento na página e uma camada separa a caixa de diálogo de outros elementos que pode ser clicados na página. Os cliques do usuário fora da caixa de diálogo são simplesmente perdidas. A caixa de diálogo pode ser redimensionada arrastando as alças nos lados.

A aparência dos widgets jQuery depende o tema selecionado. Neste exemplo, ESTOU simplesmente usando o tema padrão para jQuery 1.5 da interface do usuário. Em qualquer caso, um tema jQuery consiste em um grupo de arquivos para colocar no projeto e um único arquivo CSS para fazer referência na página mestra. Você pode obter jQuery livre temas e até mesmo criar seus próprios, daUI.jquery.com/themerollerSite da Web.

Preenchendo a caixa de diálogo

Como mencionado, a caixa de diálogo é principalmente uma subárvore DOM. Em seguida, para mostrar aos usuários um formulário de entrada com caixas de texto, listas suspensas e caixas de seleção, comece criando um formulário HTML e um layout com base em tabela para apresentar os campos de entrada com rótulos descritivos. a Figura 8 mostra um trecho de marcação interna da caixa de diálogo.

A Figura 8 marcação para uma caixa de diálogo

<% 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(); %>

Você pode usar ASP.NET MVC auxiliares para gerar a marcação para a marca <form>. O auxiliar BeginForm utiliza pelo menos dois parâmetros — a ação de controlador a ser disparado no envio e o nome do controlador. Ele vai sem dizer que se desejar uma caixa de diálogo para enviar para o servidor, em seguida, você precisará ter um formulário HTML em que a caixa de diálogo.

O formulário contém campos de entrada apresentados fora da maneira desejada e com os recursos e estilos que você preferir. Ao definir o layout da caixa de diálogo, você não prestar muita atenção os dados reais para exibir. Explícitos apenas dados inseridos na caixa de diálogo no momento são dados constantes. Por exemplo, cada cliente tem um nome de país no seu registro então você pode querer exibir uma lista suspensa com todos os países. Neste exemplo, no entanto, eu estou torna um pouco mais restritivo. Você pode alterar o país de um cliente, mas você não pode especificar um novo país no qual você tenha outros clientes. Isso significa que a lista de clientes deve ser passada para o controle de usuário pelo seu pai.

O pai do controle de usuário de caixa de diálogo é o modo de exibição Index.aspx. Como você viu anteriormente, este modo de exibição recebe uma lista de clientes da ação de controlador. Se você quiser que os usuários para pegar um país em uma lista, em seguida, você precisará passar a lista de países disponíveis junto com os clientes da lista. A classe de modo de exibição Index.aspx é mostrada na Figura 9 .

Figura 9 classe O modo de exibição 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; }
}

O HomeIndexViewData é uma classe personalizada que agrupa todas as informações a serem passados junto ao modo de exibição Index.aspx. Usando resultados de uma classe ad hoc no código que é melhor que estariam usando o recipiente de propósito geral ViewData não tipado.

A caixa de diálogo receberá a lista de países via o código a seguir:

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

Para criar uma lista suspensa, você pode usar o auxiliar DropDownList interno. Nesse caso, entretanto, você deve dispor o objeto enumeráveis com lista de itens em um objeto SelectList específico do modo de exibição.

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

Figura 10 mostra a caixa de diálogo final.

A Figura 10 A caixa de diálogo em ação

Inicialização antes da exibição

Tudo o que resta a fazer é explicar como você pôde usados dados do cliente em uma caixa de diálogo. Como você pode ver na Figura 6 , a caixa de diálogo é exibida como os cliques de usuário em um botão de imagem na mesma linha da grade. O evento onclick do botão de imagem está vinculado a fnEditCustomer função JavaScript. Esta função é basicamente responsável por inicializar e exibir a caixa de diálogo caixa (veja a Figura 11 ).

A Figura 11 editar JavaScript cliente

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");
}

A primeira linha de código no corpo da função define a legenda da caixa de diálogo para uma informações contextuais. Em seguida, widget um selecionador de data é anexado à caixa de texto destinada a receber uma data. Outras instruções servem para inicializar os vários campos de entrada para valores passados para a função. Você verá a verdadeira potência de seletores CSS jQuery nessas linhas. Considere a seguinte linha:

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

A linha lê como este: selecione a entrada todos os campos dentro de um elemento chamado _dlgEditCustomer cuja propriedade ID igual a "CompanyName" e defina seu valor para o conteúdo especificado. Não é necessário dizer que, neste contexto o uso de jQuery é arbitrário. Clássico código DOM sofisticado com recursos da biblioteca cliente Microsoft AJAX funcionaria bem.

O poder do jQuery seletores também fica evidente quando selecionando um elemento em uma lista drop-down ao índice não é conhecido antecipadamente. Quando se trata de edição de um registro de cliente, você sabe o país que ela mora em; mas tudo o que você tem em suas mãos é uma seqüência de caracteres. No nível do DOM, fazer uma seleção em um elemento SELECT você precisará especificar o índice. Como pode correspondência você entre, por exemplo, a seqüência de caracteres "Itália" para o índice correspondente na lista? Você pode criar um loop e localizar um elemento correspondente, ou você pode depender jQuery seletores:

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

A expressão lê como este: dentro de um elemento chamado _dlgEditCustomer, localizar todos os elemento de opção, filho de um SELECT, onde a propriedade de texto equivale o valor da variável especificada. Para qualquer elemento correspondente, você define o atributo selecionado.

Finalmente, quando todo o trabalho de inicialização for feito, você exibir a caixa de diálogo. Uma chamada para o método de diálogo com a seqüência do comando Open" será suficiente.

Lançar o controlador de dados

A etapa final é enviar dados para o servidor Web e com precisão o método do controlador especificada — UpdateCustomer no controlador de início.

No ASP.NET MVC, talvez seja conveniente tornar cada URL significativo e totalmente representa o recurso de destino. Para atualizar o cliente FRANS, você deve usar uma URL, como Home, UPDATECUSTOMER/FRANS em vez de uma URL de início/UpdateCustomer comuns com algum código trabalhando os detalhes do corpo da solicitação. Isso significa que você deve atualizar URL de ação do formulário na caixa de diálogo toda vez que você inserir a caixa de diálogo. Veja como fazer isso:

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

Como você pode ver, jQuery seletores obter volta novamente. Você selecionar o formulário dentro de um elemento chamado __dlgEditCustomer e para esse formulário alterar o atributo action para a URL de opção. Figura 12 mostra que dados atualizados realmente são enviados para o servidor Web e tratados pelo método controlador à direita. (Observe Figura 12 e Figura 7 para identificar as diferenças.)

A Figura 12 A caixa de diálogo publicada dados atualizados para o método do controlador

Atualizando a Web

Se você quiser mais interação pela Web, você precisa efeitos, widgets e aspectos; e todos os rigorosamente escrita em JavaScript. A biblioteca jQuery tornou uma opção extremamente popular para desenvolvedores da Web em todo o mundo e própria Microsoft vem a versão mais recente 1.3 com a estrutura do ASP.NET MVC recém-lançado.

A biblioteca jQuery, porém, é em não forma acoplada a MVC do ASP.NET. Ele é simplesmente JavaScript, portanto, sempre que o JavaScript é aceita, a biblioteca é OK. Em prestações últimas dois desta coluna em"Explorar jQuery rich Client script com, parte 2"e"Explorar jQuery rich Client script com, parte 1" Abordei as noções básicas de jQuery, incluindo seletores, conjuntos de quebra automática, eventos e métodos. Este mês, focaliza um lado separado da biblioteca — a biblioteca de interface do usuário jQuery — que é especializada em widgets e interações. Neste mês, você viu como jQuery torna caixas de diálogo modal de construção em páginas da Web muito mais fácil.

Envie suas dúvidas e comentários para Dino paracutting@microsoft.com.

Dino Esposito é um arquiteto na arquitetura na IDesign e co-autor de Microsoft .NET: Architecting Applications for the Enterprise (Microsoft Press, 2008). Residente na Itália, Dino é palestrante assíduo em eventos do setor no mundo inteiro. Você pode ingressar em seu blog emweblogs.asp. NET/despos.