Uso dei modelli di FormView (C#)

di Scott Mitchell

Scarica il PDF

A differenza di DetailsView, FormView non è composto da campi. Viene invece eseguito il rendering di FormView usando i modelli. In questa esercitazione si esaminerà l'uso del controllo FormView per presentare una visualizzazione dei dati meno rigida.

Introduzione

Nelle ultime due esercitazioni è stato illustrato come personalizzare gli output dei controlli GridView e DetailsView usando TemplateFields. TemplateFields consente di personalizzare il contenuto di un campo specifico, ma alla fine sia GridView che DetailsView hanno un aspetto piuttosto boxy e simile alla griglia. Per molti scenari come un layout simile alla griglia è ideale, ma a volte è necessario un display più fluido e meno rigido. Quando si visualizza un singolo record, un layout fluido di questo tipo è possibile usando il controllo FormView.

A differenza di DetailsView, FormView non è composto da campi. Non è possibile aggiungere un oggetto BoundField o TemplateField a un controllo FormView. Viene invece eseguito il rendering di FormView usando i modelli. Si pensi a FormView come a un controllo DetailsView che contiene un singolo oggetto TemplateField. FormView supporta i modelli seguenti:

• ItemTemplate utilizzato per eseguire il rendering del record specifico visualizzato in FormView
• HeaderTemplate utilizzato per specificare una riga di intestazione facoltativa
• FooterTemplate utilizzato per specificare una riga del piè di pagina facoltativa
• EmptyDataTemplate quando il controllo FormView DataSource non contiene alcun record, viene EmptyDataTemplate usato al posto di ItemTemplate per il rendering del markup del controllo
• PagerTemplate può essere usato per personalizzare l'interfaccia di paging per FormView con paging abilitato
• EditItemTemplate / InsertItemTemplate utilizzato per personalizzare l'interfaccia di modifica o l'inserimento dell'interfaccia per FormViews che supportano tali funzionalità

In questa esercitazione si esaminerà l'uso del controllo FormView per presentare una visualizzazione meno rigida dei prodotti. Invece di includere campi per il nome, la categoria, il fornitore e così via, formView ItemTemplate mostrerà questi valori usando una combinazione di un elemento di intestazione e un oggetto <table> (vedere la figura 1).

Figura 1: FormView si interrompe dal layout Grid-Like visualizzato in DetailsView (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 1: Associazione dei dati a FormView

Aprire la FormView.aspx pagina e trascinare formView dalla casella degli strumenti nel Designer. Quando si aggiunge per la prima volta FormView viene visualizzato come casella grigia, indicando che è necessario un elemento ItemTemplate .

Figura 2: Impossibile eseguire il rendering di FormView nel Designer Fino a quando non viene fornito un elemento ItemTemplate (fare clic per visualizzare l'immagine a dimensione intera)

L'oggetto ItemTemplate può essere creato manualmente (tramite la sintassi dichiarativa) o può essere creato automaticamente associando FormView a un controllo origine dati tramite il Designer. Questo oggetto creato automaticamente ItemTemplate contiene codice HTML che elenca il nome di ogni campo e un controllo Etichetta la cui Text proprietà è associata al valore del campo. Questo approccio crea automaticamente anche un oggetto InsertItemTemplate e EditItemTemplate, entrambi popolati con controlli di input per ognuno dei campi dati restituiti dal controllo origine dati.

Se si vuole creare automaticamente il modello, dallo smart tag di FormView aggiungere un nuovo controllo ObjectDataSource che richiama il ProductsBLL metodo della GetProducts() classe. Verrà creato un controllo FormView con , ItemTemplateInsertItemTemplatee EditItemTemplate. Dalla visualizzazione Origine rimuovere e InsertItemTemplateEditItemTemplate poiché non si è interessati alla creazione di un controllo FormView che supporta ancora la modifica o l'inserimento. Cancellare quindi il markup all'interno ItemTemplate di in modo che sia disponibile uno slate pulito da cui lavorare.

Se si preferisce compilare ItemTemplate manualmente, è possibile aggiungere e configurare ObjectDataSource trascinandolo dalla casella degli strumenti nel Designer. Tuttavia, non impostare l'origine dati di FormView dal Designer. Passare invece alla visualizzazione Origine e impostare manualmente la proprietà di DataSourceID FormView sul ID valore di ObjectDataSource. Aggiungere quindi manualmente .ItemTemplate

Indipendentemente dall'approccio che si è deciso di adottare, a questo punto il markup dichiarativo di FormView dovrebbe essere simile al seguente:

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1">
    <ItemTemplate>

    </ItemTemplate>
</asp:FormView>

Selezionare la casella di controllo Abilita paging nello smart tag di FormView; questo aggiungerà l'attributo AllowPaging="True" alla sintassi dichiarativa di FormView. Impostare anche la EnableViewState proprietà su False.

Passaggio 2: Definizione delItemTemplate markup

Con FormView associato al controllo ObjectDataSource e configurato per supportare il paging, è possibile specificare il contenuto per .ItemTemplate Per questa esercitazione, il nome del prodotto verrà visualizzato in un'intestazione <h3> . Successivamente, si userà un codice HTML <table> per visualizzare le proprietà del prodotto rimanenti in una tabella a quattro colonne in cui la prima e la terza colonna elencano i nomi delle proprietà e il secondo e il quarto elencano i relativi valori.

Questo markup può essere immesso tramite l'interfaccia di modifica del modello di FormView nel Designer o immesso manualmente tramite la sintassi dichiarativa. Quando si usano i modelli, in genere è più veloce lavorare direttamente con la sintassi dichiarativa, ma è possibile usare qualsiasi tecnica con cui si ha più familiarità.

Il markup seguente mostra il markup dichiarativo FormView dopo il completamento della ItemTemplatestruttura:

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1"
    AllowPaging="True" EnableViewState="False">
    <ItemTemplate>
        <hr />
        <h3><%# Eval("ProductName") %></h3>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("CategoryName") %></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("SupplierName")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Price:</td>
                <td class="ProductPropertyValue"><%# Eval("UnitPrice",
                  "{0:C}") %></td>
                <td class="ProductPropertyLabel">Units In Stock:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("UnitsInStock")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Units On Order:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("UnitsOnOrder") %></td>
                <td class="ProductPropertyLabel">Reorder Level:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("ReorderLevel")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit</td>
                <td class="ProductPropertyValue">
                  <%# Eval("QuantityPerUnit") %></td>
                <td class="ProductPropertyLabel">Discontinued:</td>
                <td class="ProductPropertyValue">
                    <asp:CheckBox runat="server" Enabled="false"
                      Checked='<%# Eval("Discontinued") %>' />
                </td>
            </tr>
        </table>
        <hr />
    </ItemTemplate>
</asp:FormView>

Si noti che la sintassi databinding, <%# Eval("ProductName") %>ad esempio , può essere inserita direttamente nell'output del modello. Ciò significa che non è necessario assegnarlo alla proprietà di Text un controllo Label. Ad esempio, il ProductName valore viene visualizzato in un <h3> elemento usando <h3><%# Eval("ProductName") %></h3>, che per il prodotto Chai eseguirà il rendering come <h3>Chai</h3>.

Le ProductPropertyLabel classi CSS e ProductPropertyValue vengono utilizzate per specificare lo stile dei nomi e dei valori delle proprietà del prodotto in <table>. Queste classi CSS sono definite in Styles.css e fanno sì che i nomi delle proprietà siano in grassetto e allineato a destra e aggiungino una spaziatura interna destra ai valori delle proprietà.

Poiché non sono disponibili campi CheckBox con FormView, per visualizzare il Discontinued valore come casella di controllo è necessario aggiungere il proprio controllo CheckBox. La Enabled proprietà è impostata su False, rendendola di sola lettura e la proprietà di Checked CheckBox è associata al valore del Discontinued campo dati.

ItemTemplate Al termine, le informazioni sul prodotto vengono visualizzate in modo molto più fluido. Confrontare l'output detailsView dell'ultima esercitazione (figura 3) con l'output generato da FormView in questa esercitazione (figura 4).

Figura 3: Output Rigid DetailsView (fare clic per visualizzare l'immagine a dimensione intera)

Figura 4: Output Fluid FormView (fare clic per visualizzare l'immagine a dimensione intera)

Riepilogo

Anche se i controlli GridView e DetailsView possono personalizzare l'output usando TemplateFields, entrambi presentano i dati in un formato boxy simile a una griglia. Per quei casi in cui un singolo record deve essere visualizzato usando un layout meno rigido, FormView è una scelta ideale. Analogamente a DetailsView, FormView esegue il rendering di un singolo record dal relativo DataSource, ma a differenza di DetailsView è costituito solo da modelli e non supporta i campi.

Come illustrato in questa esercitazione, FormView consente un layout più flessibile durante la visualizzazione di un singolo record. Nelle esercitazioni future verranno esaminati i controlli DataList e Repeater, che offrono lo stesso livello di flessibilità di FormsView, ma possono visualizzare più record, ad esempio GridView.

Buon programmatori!

Informazioni sull'autore

Scott Mitchell, autore di sette libri ASP/ASP.NET e fondatore di 4GuysFromRolla.com, lavora con le tecnologie Web Microsoft dal 1998. Scott lavora come consulente indipendente, formatore e scrittore. Il suo ultimo libro è Sams Teach Yourself ASP.NET 2.0 in 24 ore. Può essere raggiunto all'indirizzo mitchell@4GuysFromRolla.com. o tramite il suo blog, disponibile all'indirizzo http://ScottOnWriting.NET.

Grazie speciale a

Questa serie di esercitazioni è stata esaminata da molti revisori utili. Il revisore responsabile di questa esercitazione è stato E.R. Gilmore. Si è interessati a esaminare i prossimi articoli MSDN? In tal caso, rilasciami una riga in mitchell@4GuysFromRolla.com.

IndietroAvanti