Aggiunta di una colonna GridView di caselle di controllo (VB)
Questa esercitazione illustra come aggiungere una colonna di caselle di controllo a un controllo GridView per fornire all'utente un modo intuitivo per selezionare più righe di GridView.
Introduzione
Nell'esercitazione precedente è stato illustrato come aggiungere una colonna di pulsanti di opzione a GridView allo scopo di selezionare un determinato record. Una colonna di pulsanti di opzione è un'interfaccia utente adatta quando l'utente è limitato a scegliere al massimo un elemento dalla griglia. A volte, tuttavia, è possibile consentire all'utente di selezionare un numero arbitrario di elementi dalla griglia. I client di posta elettronica basati sul Web, ad esempio, visualizzano in genere l'elenco di messaggi con una colonna di caselle di controllo. L'utente può selezionare un numero arbitrario di messaggi e quindi eseguire un'azione, ad esempio spostare i messaggi di posta elettronica in un'altra cartella o eliminarli.
In questa esercitazione verrà illustrato come aggiungere una colonna di caselle di controllo e come determinare quali caselle di controllo sono state controllate al postback. In particolare, verrà creato un esempio che simula attentamente l'interfaccia utente client di posta elettronica basata sul Web. L'esempio includerà un controllo GridView con paging che elenca i prodotti nella Products tabella di database con una casella di controllo in ogni riga (vedere la figura 1). Un pulsante Elimina prodotti selezionati, quando si fa clic, eliminerà tali prodotti selezionati.
Figura 1: Ogni riga del prodotto include una casella di controllo (fare clic per visualizzare l'immagine a dimensione intera)
Passaggio 1: Aggiunta di un controllo GridView con paging che Elenchi informazioni sul prodotto
Prima di preoccuparsi di aggiungere una colonna di caselle di controllo, è possibile concentrarsi prima di tutto sull'elenco dei prodotti in un controllo GridView che supporta il paging. Per iniziare, aprire la CheckBoxField.aspx pagina nella EnhancedGridView cartella e trascinare gridView dalla casella degli strumenti nella Designer, impostandone su IDProducts. Scegliere quindi di associare GridView a un nuovo ObjectDataSource denominato ProductsDataSource. Configurare ObjectDataSource per l'uso della ProductsBLL classe , chiamando il GetProducts() metodo per restituire i dati. Poiché gridView sarà di sola lettura, impostare gli elenchi a discesa nelle schede UPDATE, INSERT e DELETE su (Nessuno).
Figura 2: Creare un nuovo oggettoDataSource denominato ProductsDataSource (fare clic per visualizzare l'immagine a dimensione intera)
Figura 3: Configurare ObjectDataSource per recuperare i dati usando il GetProducts() metodo (fare clic per visualizzare l'immagine a dimensione intera)
Figura 4: Impostare il Drop-Down Elenchi nelle schede UPDATE, INSERT e DELETE su (Nessuno) (Fare clic per visualizzare l'immagine a dimensione intera)
Al termine della procedura guidata Configura origine dati, Visual Studio creerà automaticamente BoundColumns e CheckBoxColumn per i campi dati correlati al prodotto. Come nell'esercitazione precedente, rimuovere tutti gli elementi , ProductNameCategoryNamee UnitPrice BoundFields e modificare le HeaderText proprietà in Product, Category e Price. Configurare BoundField UnitPrice in modo che il relativo valore sia formattato come valuta. Configurare anche GridView per supportare il paging selezionando la casella di controllo Abilita paging dallo smart tag.
Aggiungere anche l'interfaccia utente per eliminare i prodotti selezionati. Aggiungere un controllo Web Button sotto GridView, impostandone ID la proprietà su DeleteSelectedProducts e la relativa Text proprietà su Elimina prodotti selezionati. Invece di eliminare i prodotti dal database, per questo esempio verrà visualizzato solo un messaggio che informa i prodotti che sarebbero stati eliminati. A tale scopo, aggiungere un controllo Web Etichetta sotto il pulsante. Impostare l'ID su DeleteResults, cancellarne la Text proprietà e impostarne Visible le proprietà e EnableViewState su False.
Dopo aver apportato queste modifiche, il markup dichiarativo gridView, ObjectDataSource, Button e Label dovrebbe essere simile al seguente:
<p>
<asp:GridView ID="Products" runat="server" AutoGenerateColumns="False"
DataKeyNames="ProductID" DataSourceID="ProductsDataSource"
AllowPaging="True" EnableViewState="False">
<Columns>
<asp:BoundField DataField="ProductName" HeaderText="Product"
SortExpression="ProductName" />
<asp:BoundField DataField="CategoryName" HeaderText="Category"
ReadOnly="True" SortExpression="CategoryName" />
<asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
HeaderText="Price" HtmlEncode="False"
SortExpression="UnitPrice" />
</Columns>
</asp:GridView>
<asp:ObjectDataSource ID="ProductsDataSource" runat="server"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>
</p>
<p>
<asp:Button ID="DeleteSelectedProducts" runat="server"
Text="Delete Selected Products" />
</p>
<p>
<asp:Label ID="DeleteResults" runat="server" EnableViewState="False"
Visible="False"></asp:Label>
</p>
Dedicare qualche istante alla visualizzazione della pagina in un browser (vedere la figura 5). A questo punto dovrebbe essere visualizzato il nome, la categoria e il prezzo dei primi dieci prodotti.
Figura 5: Il nome, la categoria e il prezzo dei primi dieci prodotti sono elencati (fare clic per visualizzare l'immagine a dimensione intera)
Passaggio 2: Aggiunta di una colonna di caselle di controllo
Poiché ASP.NET 2.0 include un controllo CheckBoxField, si potrebbe pensare che possa essere usato per aggiungere una colonna di caselle di controllo a un controllo GridView. Sfortunatamente, questo non è il caso, poiché CheckBoxField è progettato per funzionare con un campo dati booleano. Ovvero, per utilizzare CheckBoxField, è necessario specificare il campo dati sottostante il cui valore viene consultato per determinare se la casella di controllo di cui è stato eseguito il rendering è selezionata. Non è possibile usare CheckBoxField per includere solo una colonna di caselle di controllo deselezionate.
È invece necessario aggiungere un oggetto TemplateField e aggiungere un controllo Web CheckBox al relativo ItemTemplateoggetto . Andare avanti e aggiungere un campo TemplateField a Products GridView e impostarlo come primo campo (all'estrema sinistra). Dallo smart tag di GridView fare clic sul collegamento Modifica modelli e quindi trascinare un controllo Web CheckBox dalla casella degli strumenti in ItemTemplate. Impostare la proprietà ProductSelectorcheckBox su ID .
Figura 6: Aggiungere un controllo Web CheckBox denominato ProductSelector a TemplateField (ItemTemplatefare clic per visualizzare l'immagine a dimensione intera)
Dopo l'aggiunta del controllo Web TemplateField e CheckBox, ogni riga include ora una casella di controllo. La figura 7 mostra questa pagina, quando visualizzata tramite un browser, dopo l'aggiunta di TemplateField e CheckBox.
Figura 7: Ogni riga del prodotto include ora una casella di controllo (fare clic per visualizzare l'immagine a dimensione intera)
Passaggio 3: Determinazione delle caselle di controllo controllate al postback
A questo punto è presente una colonna di caselle di controllo, ma non è possibile determinare quali caselle di controllo sono state controllate al postback. Quando si fa clic sul pulsante Elimina prodotti selezionati, tuttavia, è necessario sapere quali caselle di controllo sono state selezionate per eliminare tali prodotti.
La proprietà GridView consente Rows di accedere alle righe di dati in GridView. È possibile scorrere queste righe, accedere a livello di codice al controllo CheckBox e quindi consultare la relativa Checked proprietà per determinare se è stata selezionata l'opzione CheckBox.
Creare un gestore eventi per l'evento DeleteSelectedProducts del Click controllo Web Button e aggiungere il codice seguente:
Protected Sub DeleteSelectedProducts_Click(sender As Object, e As EventArgs) _
Handles DeleteSelectedProducts.Click
Dim atLeastOneRowDeleted As Boolean = False
' Iterate through the Products.Rows property
For Each row As GridViewRow In Products.Rows
' Access the CheckBox
Dim cb As CheckBox = row.FindControl("ProductSelector")
If cb IsNot Nothing AndAlso cb.Checked Then
' Delete row! (Well, not really...)
atLeastOneRowDeleted = True
' First, get the ProductID for the selected row
Dim productID As Integer = _
Convert.ToInt32(Products.DataKeys(row.RowIndex).Value)
' "Delete" the row
DeleteResults.Text &= String.Format( _
"This would have deleted ProductID {0}<br />", productID)
'... To actually delete the product, use ...
' Dim productAPI As New ProductsBLL
' productAPI.DeleteProduct(productID)
'............................................
End If
Next
' Show the Label if at least one row was deleted...
DeleteResults.Visible = atLeastOneRowDeleted
End Sub
La Rows proprietà restituisce una raccolta di istanze che consentono di trucco le righe di GridViewRow dati di GridView. Il For Each ciclo enumera questa raccolta. Per ogni GridViewRow oggetto, la riga s CheckBox è accessibile a livello di codice tramite row.FindControl("controlID"). Se il controllo CheckBox è selezionato, il valore corrispondente ProductID della riga viene recuperato dalla DataKeys raccolta. In questo esercizio viene visualizzato semplicemente un messaggio informativo nell'etichettaDeleteResults, anche se in un'applicazione funzionante viene invece eseguita una chiamata al ProductsBLL metodo della classe .DeleteProduct(productID)
Con l'aggiunta di questo gestore eventi, facendo clic sul pulsante Elimina prodotti selezionati ora vengono visualizzati i ProductID prodotti selezionati.
Figura 8: Quando si fa clic sul pulsante Elimina prodotti selezionati, vengono elencati i prodotti ProductID selezionati (fare clic per visualizzare l'immagine a dimensione intera)
Passaggio 4: Aggiunta di Controlla tutto e Deseleziona tutti i pulsanti
Se un utente vuole eliminare tutti i prodotti nella pagina corrente, deve selezionare ognuna delle dieci caselle di controllo. È possibile accelerare questo processo aggiungendo un pulsante Controlla tutto che, quando si fa clic, seleziona tutte le caselle di controllo nella griglia. Un pulsante Deseleziona tutto sarebbe altrettanto utile.
Aggiungere due controlli Web Button alla pagina, posizionandoli sopra GridView. Impostare il primo su IDCheckAll e la relativa Text proprietà su Check All ; impostare il secondo su IDUncheckAll e la relativa Text proprietà su Uncheck All .
<asp:Button ID="CheckAll" runat="server" Text="Check All" />
<asp:Button ID="UncheckAll" runat="server" Text="Uncheck All" />
Creare quindi un metodo nella classe code-behind denominata ToggleCheckState(checkState) che, quando viene richiamato, enumera l'insieme Products gridView Rows e imposta ogni proprietà CheckBox sul Checked valore del parametro checkState passato.
Private Sub ToggleCheckState(ByVal checkState As Boolean)
' Iterate through the Products.Rows property
For Each row As GridViewRow In Products.Rows
' Access the CheckBox
Dim cb As CheckBox = row.FindControl("ProductSelector")
If cb IsNot Nothing Then
cb.Checked = checkState
End If
Next
End Sub
Click Creare quindi gestori eventi per i CheckAll pulsanti e UncheckAll . Nel CheckAll gestore eventi di , è sufficiente chiamare ToggleCheckState(True); in UncheckAll, chiamare ToggleCheckState(False).
Protected Sub CheckAll_Click(sender As Object, e As EventArgs) _
Handles CheckAll.Click
ToggleCheckState(True)
End Sub
Protected Sub UncheckAll_Click(sender As Object, e As EventArgs) _
Handles UncheckAll.Click
ToggleCheckState(False)
End Sub
Con questo codice, facendo clic sul pulsante Controlla tutto viene generato un postback e vengono controllate tutte le caselle di controllo in GridView. In modo analogo, facendo clic su Annulla deseleziona tutte le caselle di controllo. La figura 9 mostra la schermata dopo che è stato selezionato il pulsante Controlla tutto.
Figura 9: Fare clic sul pulsante Controlla tutto seleziona tutte le caselle di controllo (fare clic per visualizzare l'immagine a dimensione intera)
Nota
Quando si visualizza una colonna di caselle di controllo, è possibile selezionare o deselezionare tutte le caselle di controllo tramite una casella di controllo nella riga di intestazione. Inoltre, l'implementazione corrente Controlla tutto /Deseleziona tutto richiede un postback. Le caselle di controllo possono essere controllate o deselezionate, tuttavia, interamente tramite script sul lato client, fornendo così un'esperienza utente snappier. Per esplorare l'uso di una casella di controllo di riga di intestazione per Controlla tutto e Deseleziona tutto in dettaglio, insieme a una discussione sull'uso delle tecniche lato client, vedere CheckBoxes in a GridView using Client-Side Script and a Check All CheckBox.To explore using a header rowbox for CheckBox for CheckView using Client-Side Script and a CheckBox.
Riepilogo
Nei casi in cui è necessario consentire agli utenti di scegliere un numero arbitrario di righe da un controllo GridView prima di procedere, l'aggiunta di una colonna di caselle di controllo è un'opzione. Come illustrato in questa esercitazione, inclusa una colonna di caselle di controllo in GridView comporta l'aggiunta di un oggetto TemplateField con un controllo Web CheckBox. Usando un controllo Web (rispetto all'inserimento di markup direttamente nel modello, come è stato fatto nell'esercitazione precedente) ASP.NET memorizza automaticamente le caselle di controllo e non sono state controllate durante il postback. È anche possibile accedere a livello di codice alle caselle di controllo nel codice per determinare se un controllo CheckBox specificato è selezionato o per modificare lo stato selezionato.
Questa esercitazione e l'ultima hanno esaminato l'aggiunta di una colonna del selettore di riga a GridView. Nell'esercitazione successiva verrà illustrato come, con un po' di lavoro, è possibile aggiungere funzionalità di inserimento a 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.