Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
A differenza di DetailsView, FormView non è costituito 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 meno rigida dei dati.
Introduzione
Nelle ultime due esercitazioni è stato illustrato come personalizzare gli output dei controlli GridView e DetailsView usando TemplateFields. TemplateFields consentono di personalizzare notevolmente il contenuto di un campo specifico, ma alla fine sia GridView che DetailsView hanno un aspetto piuttosto squadrato e simile a una 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 così fluido è possibile utilizzando il controllo FormView.
A differenza di DetailsView, FormView non è costituito 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 consideri FormView come un controllo DetailsView che contiene un singolo oggetto TemplateField. FormView supporta i modelli seguenti:
-
ItemTemplateutilizzato per eseguire il rendering del record specifico visualizzato in FormView -
HeaderTemplateserve a specificare una riga di intestazione facoltativa -
FooterTemplateutilizzato per specificare una riga del piè di pagina facoltativa -
EmptyDataTemplatequando il FormViewDataSourcenon contiene alcun record, ilEmptyDataTemplateviene utilizzato al posto delItemTemplateper effettuare il rendering del markup del controllo -
PagerTemplatepuò essere usato per personalizzare l'interfaccia di paging per FormViews con paging abilitato -
EditItemTemplate/InsertItemTemplateutilizzato 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. Anziché avere campi per il nome, la categoria, il fornitore e così via, FormView ItemTemplate mostrerà questi valori utilizzando una combinazione di un elemento di intestazione e un <table> (vedere la Figura 1).
Figura 1: FormView esce dal layout Grid-Like visualizzato nel DetailsView (fare clic per visualizzare l'immagine a schermo intero)
Passaggio 1: Associazione dei dati a FormView
Aprire la pagina FormView.aspx e trascinare un controllo FormView dalla Toolbox nella finestra di progettazione. Quando si aggiunge per la prima volta il FormView, viene visualizzato come una casella grigia, informandoci che è necessario un ItemTemplate.
Figura 2: Impossibile eseguire il rendering di FormView nella finestra di progettazione Fino a quando non viene fornito un oggetto ItemTemplate (fare clic per visualizzare l'immagine a dimensione intera)
L'oggetto ItemTemplate può essere creato a mano (tramite la sintassi dichiarativa) oppure può essere creato automaticamente associando FormView a un controllo origine dati tramite la finestra di progettazione. Questo oggetto creato ItemTemplate automaticamente 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 desidera 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 un ItemTemplate, un InsertItemTemplate e un EditItemTemplate. Dalla vista Codice sorgente, rimuovere InsertItemTemplate e EditItemTemplate poiché non siamo ancora interessati a creare un FormView che supporti la modifica o l'inserimento. Cancellare quindi il markup all'interno di ItemTemplate in modo da avere uno slate pulito da cui lavorare.
Se preferisci costruire manualmente il ItemTemplate, puoi aggiungere e configurare l'ObjectDataSource trascinandolo dalla Toolbox al Designer. Tuttavia, non impostare l'origine dati di FormView dalla finestra di progettazione. Invece, andare alla visualizzazione Origine e impostare manualmente la proprietà di DataSourceID FormView al valore ID di ObjectDataSource. Aggiungere quindi manualmente il 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>
Prenditi un momento per 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 del markup diItemTemplate
Con FormView associato al controllo ObjectDataSource e configurato per supportare il paging, è possibile specificare il contenuto per .ItemTemplate Per questa esercitazione, verrà visualizzato il nome del prodotto 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 le prime e le terze colonne elencano i nomi delle proprietà e il secondo e il quarto elenco dei relativi valori.
Questo markup può essere immesso tramite l'interfaccia di modifica del modello di FormView in Progettazione o immessa 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 è più a proprio agio.
Il markup seguente mostra il markup dichiarativo di FormView dopo il ItemTemplate della struttura completata:
<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 di associazione dati , <%# 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 valore ProductName è visualizzato in un elemento <h3> usando <h3><%# Eval("ProductName") %></h3>, che per il prodotto Chai verrà eseguito il rendering come <h3>Chai</h3>.
Le ProductPropertyLabel classi e ProductPropertyValue CSS vengono usate 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 allineati a destra e aggiungino una spaziatura interna destra ai valori delle proprietà.
Poiché non sono disponibili checkBoxFields 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 della Visualizzazione Dettagli Rigido (fare clic per visualizzare l'immagine a dimensione intera)
Figura 4: Output di Fluid FormView (clicca per vedere l'immagine a schermo intero)
Riassunto
Anche se i controlli GridView e DetailsView possono avere l'output personalizzato usando TemplateFields, entrambi presentano i dati in un formato boxy simile a una griglia. Per quei tempi in cui è necessario visualizzare un singolo record 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 sono in grado di 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, ha lavorato 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 a mitchell@4GuysFromRolla.com.
Grazie speciale a
Questa serie di esercitazioni è stata esaminata da molti revisori competenti. Il revisore principale per questa esercitazione è stato E.R. Gilmore. Si è interessati a esaminare i prossimi articoli MSDN? In tal caso, mandami un messaggio a mitchell@4GuysFromRolla.com.