Il presente articolo è stato tradotto automaticamente.

Cutting Edge

Creare interfacce utente RTF con jQuery

Dino Esposito

Contenuto

JQuery libreria dell'interfaccia utente
Scenario di esempio
Preparazione di un riquadro a schede
Preparazione di una finestra di dialogo
Compilazione della finestra di dialogo
Inizializzazione prima della visualizzazione
Registrazione dei dati del controller
Aggiornamento sul Web

Viene visualizzata una finestra di dialogo è un elemento fondamentale di un'interfaccia utente grafica. Come probabilmente noto, può essere modale o. È a scelta obbligatoria la presenza impedisce ulteriori interazioni con l'applicazione fino a quando l'utente indirizzi nella finestra di dialogo la domanda. Se l'utente chiusura semplicemente la finestra di dialogo, quindi non verrà eseguita nessuna ulteriore azione che può essere avviati dalla finestra di dialogo.

In fase di sviluppo Windows, finestre di dialogo rappresentano un modo comune di creazione di un'interazione utente di applicazione. In particolare, le finestre di dialogo spesso vengono utilizzate per eseguire il drill-down nel contenuto di alcuni elementi visualizzati o per modificare il contenuto. Richiede che un motivo familiarità in molte applicazioni di Windows fare clic per modificare alcuni contenuti l'utente e l'applicazione viene visualizzata una finestra di dialogo modale con campi di input per immettere i dati aggiornati.

Questo criterio non è mai stata comuni nelle applicazioni Web. Browser sono supportati continuo finestre popup, ma dal punto di vista funzionale relatore siano non è esattamente lo stesso finestre di dialogo di Windows. Una finestra popup è semplicemente una figlio finestra del browser mancanza di alcune funzionalità finestra quali la barra degli indirizzi o la barra degli strumenti. La finestra visualizza una pagina Web, che è uno strumento eccezionale per visualizzare contenuto aggiuntivo su richiesta. Tuttavia, pubblicare i dati da una finestra popup al server non è mai stata facile per una serie di motivi. Aggiungere questo che blockers popup in genere siano in esecuzione sui computer degli utenti, impedisce il popup apertura. Di conseguenza, se si desidera finestre di dialogo nell'applicazione Web, le finestre popup non sono la risposta.

In questo articolo verrà creare finestre di dialogo modale e non a scelta obbligatoria in jQuery e viene illustrato come eseguire l'invio dei dati da essi al server Web.

Analogamente a molte altre raccolte e Framework, la libreria jQuery non utilizzata le finestre popup del browser per implementare la finestre di dialogo. Invece jQuery si basa sul codice di script per popup un frammento di modello (OGGETTI del documento e chiuderla quando l'utente conferma che viene eseguito il contenuto o l'operazione di interruzione. Poiché il contenuto visualizzato fa parte del modello DOM della pagina corrente, non vi siano problemi postback e, cosa più importante, può essere implementata funzionalità AJAX.

JQuery libreria dell'interfaccia utente

Supporto per le finestre di dialogo non fa parte della libreria jQuery di base, quale versione 1.3 è ora disponibile. Per ottenere le finestre di dialogo, nonché altri widget interessante dell'interfaccia utente, ad esempio accordion, schede e un controllo selezione data è necessario ricorrere a un'estensione di jQuery, ovvero la libreria dell'interfaccia utente jQuery. È possibile trovare ulteriori informazioni e il download istruzioni all' UI.jquery.com . Alcuni documentazione è disponibile in Docs.jquery.com/UI .

La libreria dell'interfaccia utente jQuery costituita dai componenti elencati nella Nella figura 1 e Nella figura 2 .

Un'interazione è essenzialmente un aspetto che può essere applicato agli elementi DOM selezionati in un set di cui è stato eseguito il wrapping. Un'interazione rappresenta un comportamento tra le operazioni di taglio ed è progettata per rendere più interattive gli elementi di destinazione. Combinando il widget finestra di dialogo con Draggable le interazioni ridimensionabile, ad esempio, è possibile creare una finestra di dialogo simile a Windows in cui può essere spostato e ridimensionata al eseguiranno.

Come suggerisce il nome, widget sono singoli componenti che rappresentano componenti dell'interfaccia utente, ad esempio schede o finestre di dialogo che sono pronti per utilizza nelle pagine.

Come accennato, la libreria di interfaccia utente jQuery deve essere scaricata separatamente dalla libreria di base e ha dipendenze nella versione della libreria di base. In questo articolo si basa su versione 1.5.3 di jQuery dell'interfaccia utente e la versione 1.2.6 della libreria di base. Quando che si legge questa, versione 1.7 dell'interfaccia utente, in base alla versione più recente libreria di base 1.3.2 jQuery sarà disponibile.

A questo punto, senza ulteriori ado, Vediamo un esempio che combina le schede e finestre di dialogo. Utilizzerò un'applicazione di esempio ASP.NET MVC. Sebbene il framework ASP.NET MVC fornito con la libreria di base jQuery, c'è nessuna relazione speciale tra jQuery e MVC ASP.NET. È possibile ottenere le prestazioni e funzionalità stessa tramite jQuery Web Form ASP.NET classico.

Scenario di esempio

Consideriamo una pagina di esempio con un elenco di clienti. Ciascun cliente elencati è associato un paio di pulsanti attraverso il quale l'utente può eliminare o modificare le informazioni del cliente (vedere la Figura 3 ).

Nella figura 3 un elenco di clienti per la modifica in posizione

Il concetto è che gli utenti fare clic sul pulsante Modifica per apportare modifiche nella posizione. Tuttavia, nella Figura 3 tabella non Scambia etichette con le caselle di testo come controlli server classico come DataGrid e GridView eseguire in modalità di modifica sul posto. In questo caso, viene visualizzata una finestra di dialogo verrà popup con un modulo precompilato per modificare e salvare.

Per motivi di semplicità, tutti gli elementi dell'interfaccia utente sono inserite nella pagina iniziale dell'applicazione ASP.NET MVC di esempio. Per modificare il codice di questa pagina, è necessario ricorrere al file di visualizzazione associato. Per impostazione predefinita, è situata views\home index.aspx.

Almeno con la visualizzazione predefinita factory (basata sul motore di rendering Web Form), creazione di visualizzazioni per un MVC ASP.NET pagina risultati una combinazione di valori letterali HTML normali e C# o blocchi di codice Visual Basic. NET. Funzioni di supporto HTML esiste per facilitare la generazione di HTML un processo più uniforme e più rapido. Tuttavia, non supporto ufficiale di HTML esiste per produrre un DataGrid classico senza lo scrivere ogni singola riga di codice. Esistono pochi gli helper HTML di esempio per una griglia. Se si desidera, con un aspetto in MVCContrib.

In questo esempio, per sake ore precedente utilizzato un controllo GridView per generare la tabella nella Figura 3 . (Con scritta modo molto DataGrid nel recente passato, Consenti sottolineare che i controlli server ASP.NET principalmente saranno andati dopo opt per ASP.NET MVC.) I tradizionali controlli server ASP.NET utilizzare gli MVC ASP.NET, ma deve essere visualizzati solo come semplici factory HTML con nessuna funzionalità di postback. In ASP.NET MVC, qualsiasi interazione tra il client e il Web server si verifica su HTTP chiama destinate a un'azione di controller, un modello radicalmente diverso da Web Form postback. Nella figura 4 viene visualizzato il codice origine della home page dell'applicazione di esempio.

Figura 4 la visualizzazione per la pagina iniziale

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

La pagina di esempio è costituita da una serie di tag DIV, ognuno dei quali rappresenta una scheda. Tutte le schede sono collegate da una sequenza di tag di elemento di elenco. Questo codice viene trasformato in un riquadro della scheda da una parte di codice script. In particolare, metodo di tabs() del jQuery accetta tutti gli elementi nel set di cui è stato eseguito il wrapping e li viene rappresentato come scheda riquadri. L'interfaccia utente risultante contiene tre riquadri, clienti, ordini e altro.

Il riquadro della scheda clienti dipende principalmente il contenuto generato dal controllo utente MVC uc_ListCustomers. Il controllo utente riceve dati da visualizzare dalla visualizzazione principale. Dati da visualizzare fa riferimento l'espressione ViewData.Model e costituito da un elenco <customer> oggetto. Inutile dire che, in questo contesto cliente è una classe entità definita nel modello del dominio creato con ADO.NET Entity Framework, LINQ a SQL o qualsiasi altra cosa. L'azione controller responsabile il home page viene responsabile del recupero dei dati e passando insieme, riportato di seguito:

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

Per ricevere l'elenco dei clienti, il controllo utente dichiarare relativa classe base di conseguenza, come illustrato nella Nella figura 5 .

Nella figura 5 dichiarare la 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 si utilizza un controllo server con associazione a dati per la generazione del codice, quindi associare i dati a esso in Page_Load. Figura 6 mostra il codice per la griglia con i collegamenti alle funzioni JavaScript utilizzando jQuery.

Figura 6 il markup per la griglia

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

Come può notare, ogni cliente visualizzato è associato a una funzione JavaScript denominata fnEditCustomer. Questa funzione è responsabile della visualizzazione della finestra di dialogo e determina inoltre gli aggiornamenti. È necessario tornare a questo in un momento.

Preparazione di un riquadro a schede

Per creare un riquadro contenuto a schede, è necessario chiamare il metodo tabs() su qualsiasi elemento in un set di cui è stato eseguito il wrapping. Tutti i widget nella libreria dell'interfaccia utente jQuery necessario una sottostruttura DOM da utilizzare come un modello più alcune configurazioni facoltative. In genere, è fornire l'impostazione predefinita le impostazioni di configurazione il caricamento della pagina e di attesa per applicare le altre impostazioni successivamente basati sul contesto. Nel codice seguente viene illustrato come preparare un riquadro a schede.

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

Il metodo schede funziona su tutti gli elementi figlio <ul> dell'elemento con l'ID di AppConsole. Ogni <li> all'interno il <ul> diventa una scheda. Il <li> devono quindi essere collegati a un <div> all'interno della pagina che fornisce il contenuto.

Il metodo schede ha impostazioni per indicare quali schede disattivate, cosa accade quando l'utente fa clic e se qualsiasi scheda deve essere selezionata al momento della visualizzazione. Nel codice riportato di seguito è illustrato come configurare il widget scheda disattivare la terza scheda, passare schede se si posiziona di mouse e utilizzare alcune animazioni quando si passa tra le schede.

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

Per utilizzare correttamente il widget scheda nelle pagine, è necessario collegare i seguenti file script oltre al file di libreria jQuery principali.

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

Le funzionalità del metodo di schede UN'API più ampio per poter aggiungere, rimuovere o selezionare schede e scaricare contenuti in modo dinamico tramite AJAX.

Preparazione di una finestra di dialogo

La finestra di dialogo è UN'API simile base di un metodo da richiamare su un insieme di cui è stato eseguito il wrapping e alcune opzioni per configurarlo in verranno.

A differenza dei riquadri a schede, viene visualizzata una finestra di dialogo deve quantità di lavoro prima che può essere visualizzati. Finestre di dialogo prevista per visualizzare che alcuni contenuto statico può essere completamente configurato nell'evento pronto per il documento. Nella maggior parte dei casi, tuttavia, si desidera visualizzare una finestra di dialogo in cui contenuto riflette lo stato corrente della pagina e probabilmente l'elemento attualmente selezionato. Iniziamo con la definizione di una finestra di dialogo jQuery.

Il contenuto della finestra di dialogo viene definito in un tag <div> in un punto qualsiasi all'interno della pagina. Nella Figura 4 , il contenuto della finestra di dialogo viene inserito come controllo utente nel documento DOM della pagina che verrà chiamato.

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

Rendering il modello di finestra di dialogo viene eseguito insieme con la visualizzazione quando la pagina host prima viene caricata. In questa fase, si potrebbero non conoscono i dati da visualizzare la finestra di dialogo. Sono disponibili fondamentalmente due opzioni per riempire la finestra di dialogo con i dati sensibili al contesto. In primo luogo, si passa i dati effettivi la funzione JavaScript che verrà effettivamente pop up la finestra di dialogo. In secondo luogo, di effettuare una chiamata di AJAX al server Web che recupera e preferibilmente memorizza nella cache i dati necessari solo prima di visualizzare la finestra di dialogo. In questo articolo, scelto per il primo approccio.

Il seguente codice JavaScript esegue all'interno del gestore eventi pronto per la pagina DOM e crea e inizializza la finestra di dialogo, ma non viene visualizzato.

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

Come viene illustrato, si otterrà una finestra di dialogo modale con una larghezza specificata e l'altezza che visualizza in una posizione specificata con una sovrapposizione semitrasparente. L'autoOpen = false impostazione impedisce la finestra di dialogo di visualizzazione come la pagina viene caricata.

Alcuni file di script sono necessari per utilizzare le finestre di dialogo. Come requisito minimo, è necessario i file di script due seguenti:

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

Inoltre, è necessario collegare i file JavaScript necessari per due interazioni comuni, ad esempio draggability e resizability:

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

Tuttavia, che è possono disattivare gli aspetti draggable e ridimensionabili tramite le impostazioni. In questo caso, non è necessario i precedente file di script più.

Il metodo di dialog() crea un IFRAME dinamico e copia il contenuto del modello di finestra di dialogo. Se il contenuto supera l'area massima, verranno automaticamente visualizzate le barre di scorrimento. La finestra di dialogo risultante ha una barra del titolo e una X chiudere pulsante nell'angolo superiore destro. Inoltre, una barra dei pulsanti inferiore può essere configurato in modo che la finestra di dialogo può offrire la normale combinazione di pulsanti, ad esempio OK e Annulla e Sì/No e Annulla nel contesto di un'esperienza di complessivo è molto simile a desktop. Nella figura 7 viene illustrato lo stile tipico di una casella di finestra di dialogo jQuery standard.

Nella figura 7 A jQuery Draggable e ridimensionabile della finestra di dialogo

Lo sfondo azzurro risultati dalle impostazioni di sovrapposizione definite nel costruttore della finestra di dialogo.

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

Nella finestra di dialogo viene collocata di ogni altro elemento nella pagina e un livello separa la finestra di dialogo da altri elementi selezionabili tramite clic nella pagina. Qualsiasi utente fa clic all'esterno della casella della finestra di dialogo vengono perse semplicemente. La finestra di dialogo può essere ridimensionato trascinando i quadratini sui lati.

L'aspetto del widget jQuery varia a seconda del tema selezionato. In questo esempio, STO semplicemente utilizzando il tema predefinito per jQuery 1.5 dell'interfaccia utente. In ogni caso, un tema jQuery è costituito da una serie di file da inserire nel progetto e un singolo file di foglio di stile CSS per fare riferimento nella pagina master. È possibile ottenere temi jQuery libero e anche creare autonomamente, dalUI.jquery.com/themerollerSito Web.

Compilazione della finestra di dialogo

Come descritto, la finestra di dialogo è principalmente una sottostruttura DOM. Successivamente, per visualizzare gli utenti di una maschera di input a caselle di testo, elenchi a discesa e caselle di controllo, iniziare creando un modulo HTML e un layout basato su tabella per presentare campi di input con etichette descrittive. Figura 8 Mostra riportata una porzione di codice interno della finestra di dialogo.

Nella figura 8 commenti per una finestra di dialogo

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

È possibile utilizzare gli helper MVC ASP.NET per generare il codice per il tag <form>. Il supporto BeginForm accetta almeno due parametri, l'azione controller per generare in invio e il nome del controller. Viene senza che informa che se si desidera una finestra di dialogo per eseguire l'invio al server, quindi occorre disporre di un modulo HTML all'interno di finestra di dialogo.

Il modulo contiene campi di input disposte da quella desiderata e con la funzionalità e gli stili che si desidera. Quando si definisce il layout della finestra di dialogo, non prestare molto attenzione ai dati effettivi da visualizzare. I dati solo esplicite che è inserire nella finestra di dialogo, in modo in questa fase sono dati costanti. Ciascun cliente, ad esempio, ha un nome paese nel suo record quindi si desidera visualizzare un elenco a discesa con tutti i paesi. In questo esempio, tuttavia, sono rendendo un po'più restrittivo. È possibile modificare il paese di un cliente ma non è possibile specificare un nuovo paese in cui non si hanno altri clienti. Ne consegue che l'elenco di clienti deve essere passato al controllo utente dal relativo padre.

L'elemento padre del controllo finestra di dialogo casella utente è la visualizzazione Index.aspx. Come si è visto precedente, questa visualizzazione riceve un elenco di clienti dall'azione di controller. Se si desidera che agli utenti di prendere un paese dall'elenco, sarà necessario passare l'elenco di paesi disponibili unitamente ai clienti di elenco. La classe di visualizzazione Index.aspx è illustrata nella Figura 9 .

Figura 9 la classe di visualizzazione 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; }
}

Il HomeIndexViewData è una classe personalizzata che raggruppa tutte le informazioni per essere passato oltre alla visualizzazione Index.aspx. Utilizzo risultati una classe ad hoc in codice che è meglio più necessario utilizzare il contenitore di interesse generale del simbolo non tipizzato.

Nella finestra di dialogo verrà visualizzato l'elenco dei paesi tramite il codice riportato di seguito:

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

Per creare un elenco a discesa, è possibile utilizzare il supporto DropDownList incorporato. In questo caso, tuttavia, è necessario disporre l'oggetto enumerabile con l'elenco di elementi in un oggetto SelectList specifico di visualizzazione.

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

Nella figura 10 viene illustrata l'ultima finestra di dialogo.

Nella figura 10 la finestra di dialogo in azione

Inizializzazione prima della visualizzazione

Che rimane da effettuare è illustrare come si può adatta i dati dei clienti in una finestra di dialogo. Come si vede nella Figura 6 , Ottiene visualizzata la finestra di dialogo come il clic di utente sul pulsante Immagine nella stessa riga della griglia. L'evento onclick del pulsante di immagine è collegato a fnEditCustomer funzione JavaScript. Questa funzione è in definitiva responsabile dell'inizializzazione e visualizzare la finestra di dialogo (vedere la Figura 11 ).

Nella figura 11 JavaScript modifica 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");
}

La prima riga di codice nel corpo della funzione imposta la didascalia della finestra di dialogo per un informazioni sensibili al contesto. Successivamente, un widget selezione data è associato a casella di testo destinato a una data di ricezione. Altre istruzioni servono per inizializzare i vari campi di input ai valori passati alla funzione di. È possibile visualizzare la potenza true di selettori di fogli di stile CSS jQuery in tali righe. Si consideri la seguente riga:

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

Legge la riga seguente: selezionare inpui tutti i campi all'interno di un elemento denominato _dlgEditCustomer proprietà cui ID è uguale a "NomeSocietà" e impostare il valore sul contenuto specificato. Inutile dire che, in questo contesto l'utilizzo di jQuery è arbitrario. Il classico DOM codice arricchita con funzionalità dalla libreria client Microsoft AJAX potrebbe funzionare anche.

La potenza di selettori jQuery diventa inoltre evidente quando selezionando un elemento in un elenco a discesa quando l'indice non è noto in anticipo. Quando si tratta di modifica di un record cliente, si conosce il paese che vive in; ma nelle mani è una stringa. A livello di DOM, effettuare una selezione in un elemento SELECT è necessario specificare l'indice. Come è si quelli, ad esempio, la stringa "Italia" e l'indice corrispondente nell'elenco? È possibile scrivere un ciclo e trovare un elemento corrispondente oppure è possibile affidarsi jQuery selettori:

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

Legge l'espressione seguente: all'interno di un elemento denominato _dlgEditCustomer, trovare elemento OPTION tutti, figlio di un SELECT, in cui la proprietà del testo corrisponde al valore di variabile specificata. Per qualsiasi elemento corrispondente impostare l'attributo selezionato.

Infine, dopo tutte le operazioni di inizializzazione sono stata eseguita, è visualizzata la finestra di dialogo. Sarà sufficiente una chiamata al metodo finestra di dialogo con la stringa di comando di apertura".

Registrazione dei dati del controller

Il passaggio finale è registrazione dati al server Web ed esattamente al metodo controller specificato, ovvero UpdateCustomer sul controller di home page.

In ASP.NET MVC, è consigliabile rendere ogni URL significativi e completamente responsabile della risorsa di destinazione. Per aggiornare cliente FRANS, occorre utilizzare un URL, ad esempio Home, UPDATECUSTOMER/FRANS anziché un URL principale/UpdateCustomer comuni con un codice che utilizza i dettagli nel corpo della richiesta. Ciò significa che è necessario aggiornare URL di azione del form nella finestra di dialogo ogni volta che estrae la finestra di dialogo. Di seguito viene illustrato come procedere:

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

Come può notare, selettori jQuery strike tornare nuovamente. Si seleziona il modulo all'interno di un elemento denominato __dlgEditCustomer e per tale modulo è possibile modificare l'attributo di azione ALL'URL della scelta. Nella figura 12 Mostra che visualizzeranno dati aggiornati sono effettivamente inviati al server Web e gestiti dal metodo controller a destra. (Osservare Figura 12 e figura 7 per individuare eventuali differenze.)

Nella figura 12 la finestra di dialogo registrato dati aggiornati per il metodo controller

Aggiornamento sul Web

Se si desidera più interazione sul Web, sarà necessario effetti, widget, aspetti; e tutti i rigorously scritto in JavaScript. La libreria jQuery è diventano una scelta molto popolari per gli sviluppatori Web tutte tutto il mondo e Microsoft stesso viene fornito l'ultima versione 1.3 con il framework ASP.NET MVC appena rilasciati.

La raccolta jQuery, tuttavia, è in no modo associata a MVC ASP.NET. È sufficiente JavaScript, in modo che ogni volta che viene accettato JavaScript, la raccolta sia OK. In rate due precedenti della colonna in"Esplorare rich client script con jQuery, parte 2"e"Esplorare rich client script con jQuery, parte 1" Coperto base Dell'jQuery, inclusi i selettori, set di cui è stato eseguito il wrapping, eventi e metodi. Questo mese concentra su un segmento separato della raccolta, la libreria dell'interfaccia utente jQuery, che specializzata in widget e interazioni. Questo mese si è visto come jQuery semplifica finestre di dialogo modale di creazione delle pagine Web molto.

Inviare domande e commenti per contattare Dino percutting@microsoft.com.

Dino Esposito è un architetto IDesign e coautore di Microsoft .NET: Architecting Applications for the Enterprise (Microsoft Press, 2008). In base in Italia, Dino è oratore eventi del settore tutto il mondo. È possibile partecipare a suo blog all'weblogs.asp. NET/despos.