Personalizzazione dell'interfaccia di modifica dei dati (VB)
In questa esercitazione verrà illustrato come personalizzare l'interfaccia di un controllo GridView modificabile, sostituendo i controlli TextBox e CheckBox standard con controlli Web di input alternativi.
Introduzione
I controlli BoundFields e CheckBoxFields usati dai controlli GridView e DetailsView semplificano il processo di modifica dei dati grazie alla possibilità di eseguire il rendering di interfacce di sola lettura, modificabili e inseriscibili. È possibile eseguire il rendering di queste interfacce senza la necessità di aggiungere codice o markup dichiarativo aggiuntivo. Tuttavia, le interfacce di BoundField e CheckBoxField non hanno la personalizzazione spesso necessaria negli scenari reali. Per personalizzare l'interfaccia modificabile o inseriscibile in un controllo GridView o DetailsView, è necessario usare invece un oggetto TemplateField.
Nell'esercitazione precedente è stato illustrato come personalizzare le interfacce di modifica dei dati aggiungendo controlli Web di convalida. In questa esercitazione verrà illustrato come personalizzare i controlli Web di raccolta dati effettivi, sostituendo i controlli TextBox e CheckBoxField standard di BoundField e CheckBoxField con controlli Web di input alternativi. In particolare, verrà creato un controllo GridView modificabile che consente l'aggiornamento del nome, della categoria, del fornitore e dello stato di interruzione di un prodotto. Quando si modifica una determinata riga, i campi categoria e fornitore verranno visualizzati come Elenchi a discesa, contenente il set di categorie e fornitori disponibili tra cui scegliere. Inoltre, sostituiamo il controllo CheckBoxField predefinito di CheckBoxField con un controllo RadioButtonList che offre due opzioni: "Active" e "Discontinued".
Figura 1: L'interfaccia di modifica di GridView include elenchi a discesa e pulsanti di opzione (fare clic per visualizzare l'immagine a dimensione intera)
Passaggio 1: Creazione dell'overload appropriatoUpdateProduct
In questa esercitazione verrà creato un controllo GridView modificabile che consente la modifica del nome, della categoria, del fornitore e dello stato sospeso di un prodotto. Pertanto, è necessario un UpdateProduct
overload che accetta cinque parametri di input questi quattro valori di prodotto più .ProductID
Come negli overload precedenti, questo:
- Recuperare le informazioni sul prodotto dal database per l'oggetto specificato
ProductID
. - Aggiornare i
ProductName
campi ,CategoryID
,SupplierID
eDiscontinued
e - Inviare la richiesta di aggiornamento a DAL tramite il metodo TableAdapter
Update()
.
Per brevità, per questo particolare overload ho omesso il controllo della regola di business che assicura che un prodotto contrassegnato come discontinuo non sia l'unico prodotto offerto dal suo fornitore. È possibile aggiungerlo se si preferisce o, idealmente, effettuare il refactoring della logica in un metodo separato.
Il codice seguente mostra il nuovo UpdateProduct
overload nella ProductsBLL
classe :
<System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Update, False)>
Public Function UpdateProduct(
ByVal productName As String, ByVal categoryID As Nullable(Of Integer),
ByVal supplierID As Nullable(Of Integer), ByVal discontinued As Boolean,
ByVal productID As Integer)
As Boolean
Dim products As Northwind.ProductsDataTable = Adapter.GetProductByProductID(productID)
If products.Count = 0 Then
Return False
End If
Dim product As Northwind.ProductsRow = products(0)
product.ProductName = productName
If Not supplierID.HasValue Then
product.SetSupplierIDNull()
Else
product.SupplierID = supplierID.Value
End If
If Not categoryID.HasValue Then
product.SetCategoryIDNull()
Else
product.CategoryID = categoryID.Value
End If
product.Discontinued = discontinued
Dim rowsAffected As Integer = Adapter.Update(product)
Return rowsAffected = 1
End Function
Passaggio 2: Creazione di GridView modificabile
Con l'overload UpdateProduct
aggiunto, è possibile creare il controllo GridView modificabile. Aprire la CustomizedUI.aspx
pagina nella EditInsertDelete
cartella e aggiungere un controllo GridView al Designer. Creare quindi un nuovo ObjectDataSource dallo smart tag di GridView. Configurare ObjectDataSource per recuperare le informazioni sul prodotto tramite il ProductBLL
metodo della classe e aggiornare i dati del GetProducts()
prodotto usando l'overload UpdateProduct
appena creato. Nelle schede INSERT e DELETE selezionare (Nessuno) negli elenchi a discesa.
Figura 2: Configurare ObjectDataSource per l'uso dell'overload appena creato (fare clic per visualizzare l'immagineUpdateProduct
a dimensione intera)
Come illustrato nelle esercitazioni sulla modifica dei dati, la sintassi dichiarativa per ObjectDataSource creata da Visual Studio assegna la OldValuesParameterFormatString
proprietà a original_{0}
. Questo, naturalmente, non funzionerà con il livello della logica di business perché i metodi non prevedono che il valore originale ProductID
venga passato. Pertanto, come è stato fatto nelle esercitazioni precedenti, rimuovere questa assegnazione di proprietà dalla sintassi dichiarativa o impostare il valore di questa proprietà su {0}
.
Dopo questa modifica, il markup dichiarativo di ObjectDataSource avrà un aspetto simile al seguente:
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
SelectMethod="GetProducts" TypeName="ProductsBLL"
UpdateMethod="UpdateProduct">
<UpdateParameters>
<asp:Parameter Name="productName" Type="String" />
<asp:Parameter Name="categoryID" Type="Int32" />
<asp:Parameter Name="supplierID" Type="Int32" />
<asp:Parameter Name="discontinued" Type="Boolean" />
<asp:Parameter Name="productID" Type="Int32" />
</UpdateParameters>
</asp:ObjectDataSource>
Si noti che la OldValuesParameterFormatString
proprietà è stata rimossa e che nella raccolta è presente un Parameter
UpdateParameters
oggetto per ognuno dei parametri di input previsti dall'overload UpdateProduct
.
Mentre ObjectDataSource è configurato per aggiornare solo un subset di valori di prodotto, GridView visualizza attualmente tutti i campi del prodotto. Modificare GridView in modo che:
- Include solo
ProductName
, ,SupplierName
CategoryName
BoundFields eDiscontinued
CheckBoxField - I
CategoryName
campi eSupplierName
da visualizzare prima (a sinistra di) checkBoxFieldDiscontinued
- La
CategoryName
proprietà eSupplierName
BoundFields èHeaderText
impostata rispettivamente su "Category" e "Supplier", - Il supporto per la modifica è abilitato (selezionare la casella di controllo Abilita modifica nello smart tag di GridView)
Dopo queste modifiche, il Designer sarà simile alla figura 3, con la sintassi dichiarativa di GridView illustrata di seguito.
Figura 3: Rimuovere i campi non necessario da GridView (fare clic per visualizzare l'immagine a dimensione intera)
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="ProductID" DataSourceID="ObjectDataSource1">
<Columns>
<asp:BoundField DataField="ProductName"
HeaderText="ProductName" SortExpression="ProductName" />
<asp:BoundField DataField="CategoryName" HeaderText="Category"
ReadOnly="True"
SortExpression="CategoryName" />
<asp:BoundField DataField="SupplierName" HeaderText="Supplier"
ReadOnly="True"
SortExpression="SupplierName" />
<asp:CheckBoxField DataField="Discontinued"
HeaderText="Discontinued" SortExpression="Discontinued" />
</Columns>
</asp:GridView>
A questo punto il comportamento di sola lettura di GridView è completo. Quando si visualizzano i dati, viene eseguito il rendering di ogni prodotto come riga in GridView, che mostra il nome, la categoria, il fornitore e lo stato sospeso del prodotto.
Figura 4: L'interfaccia Read-Only di GridView è completa (fare clic per visualizzare l'immagine a dimensione intera)
Nota
Come illustrato nell'esercitazione Panoramica dell'inserimento, dell'aggiornamento e dell'eliminazione dei dati, è fondamentale abilitare lo stato di visualizzazione di GridView (comportamento predefinito). Se si imposta la proprietà false
gridView su EnableViewState
, si rischia di avere utenti simultanei involontariamente eliminando o modificando i record.
Passaggio 3: Uso di un elenco a discesa per le interfacce di modifica di categoria e fornitore
Tenere presente che l'oggetto ProductsRow
contiene CategoryID
le proprietà , CategoryName
, SupplierID
e SupplierName
, che forniscono i valori effettivi dell'ID chiave esterna nella tabella di Products
database e i valori corrispondenti Name
nelle Categories
tabelle e Suppliers
. CategoryID
Le ProductRow
proprietà e SupplierID
possono essere lette sia da che scritte in, mentre le CategoryName
proprietà e SupplierName
sono contrassegnate come di sola lettura.
A causa dello stato di sola lettura delle proprietà e SupplierName
, la proprietà ReadOnly
BoundFields corrispondente è impostata su True
, impedendo la modifica di CategoryName
questi valori quando viene modificata una riga. Anche se è possibile impostare la proprietà su False
, il rendering di CategoryName
e SupplierName
BoundFields come TextBoxes durante la modifica, questo approccio genererà un'eccezione quando l'utente tenta di aggiornare il prodotto poiché non è presente alcun UpdateProduct
overload che accetta CategoryName
input e SupplierName
.ReadOnly
In realtà, non si vuole creare un overload di questo tipo per due motivi:
- La
Products
tabella non contieneSupplierName
campi oCategoryName
, maSupplierID
eCategoryID
. Pertanto, si vuole che il metodo venga passato a questi valori ID specifici, non ai valori delle tabelle di ricerca. - Richiedere all'utente di digitare il nome del fornitore o della categoria è minore dell'ideale, in quanto richiede all'utente di conoscere le categorie e i fornitori disponibili e i relativi ortografici corretti.
I campi fornitore e categoria devono visualizzare i nomi delle categorie e dei fornitori quando sono in modalità di sola lettura (come avviene ora) e un elenco a discesa delle opzioni applicabili quando vengono modificate. Usando un elenco a discesa, l'utente finale può visualizzare rapidamente le categorie e i fornitori tra cui scegliere e può effettuare più facilmente la selezione.
Per fornire questo comportamento, è necessario convertire e SupplierName
CategoryName
BoundFields in TemplateFields i cui ItemTemplate
emettono i SupplierName
valori e CategoryName
e i cui EditItemTemplate
usa un controllo DropDownList per elencare le categorie e i fornitori disponibili.
Aggiunta diCategories
eSuppliers
DropDownList
Per iniziare, convertire e SupplierName
CategoryName
BoundFields in TemplateFields facendo clic sul collegamento Modifica colonne dallo smart tag di GridView, selezionando BoundField dall'elenco in basso a sinistra e facendo clic sul collegamento "Converti questo campo in un campo modello". Il processo di conversione creerà un oggetto TemplateField con un ItemTemplate
oggetto e EditItemTemplate
, come illustrato nella sintassi dichiarativa seguente:
<asp:TemplateField HeaderText="Category" SortExpression="CategoryName">
<EditItemTemplate>
<asp:Label ID="Label1" runat="server"
Text='<%# Eval("CategoryName") %>'></asp:Label>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server"
Text='<%# Bind("CategoryName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
Poiché BoundField è stato contrassegnato come di sola lettura, sia l'oggetto ItemTemplate
che EditItemTemplate
contengono un controllo Web Label la cui Text
proprietà è associata al campo dati applicabile (CategoryName
nella sintassi precedente). È necessario modificare , sostituendo il EditItemTemplate
controllo Web Label con un controllo DropDownList.
Come illustrato nelle esercitazioni precedenti, il modello può essere modificato tramite il Designer o direttamente dalla sintassi dichiarativa. Per modificarlo tramite il Designer, fare clic sul collegamento Modifica modelli dallo smart tag di GridView e scegliere di usare il campo Categoria .EditItemTemplate
Rimuovere il controllo Web Label e sostituirlo con un controllo DropDownList, impostando la proprietà ID di DropDownList su Categories
.
Figura 5: Rimuovere TexBox e Aggiungere un elenco a discesa a (fare clic per visualizzare l'immagineEditItemTemplate
a dimensione intera)
A questo punto è necessario popolare DropDownList con le categorie disponibili. Fare clic sul collegamento Scegli origine dati dallo smart tag dropDownList e scegliere di creare un nuovo ObjectDataSource denominato CategoriesDataSource
.
Figura 6: Creare un nuovo controllo ObjectDataSource denominato CategoriesDataSource
(fare clic per visualizzare l'immagine a dimensione intera)
Per fare in modo che ObjectDataSource restituisca tutte le categorie, associarla al CategoriesBLL
metodo della GetCategories()
classe.
Figura 7: Associare ObjectDataSource al metodo di GetCategories()
(fare clic per visualizzare l'immagineCategoriesBLL
a dimensione intera)
Infine, configurare le impostazioni di DropDownList in modo che il CategoryName
campo venga visualizzato in ogni DropDownList ListItem
con il CategoryID
campo usato come valore.
Figura 8: Visualizzare il CategoryName
campo e l'oggetto CategoryID
Usato come valore (fare clic per visualizzare l'immagine a dimensione intera)
Dopo aver apportato queste modifiche, il markup dichiarativo per EditItemTemplate
in CategoryName
TemplateField includerà sia un oggetto DropDownList che un ObjectDataSource:
<asp:TemplateField HeaderText="Category" SortExpression="CategoryName">
<EditItemTemplate>
<asp:DropDownList ID="Categories" runat="server"
DataSourceID="CategoriesDataSource"
DataTextField="CategoryName" DataValueField="CategoryID">
</asp:DropDownList>
<asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetCategories" TypeName="CategoriesBLL">
</asp:ObjectDataSource>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server"
Text='<%# Bind("CategoryName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
Nota
L'oggetto DropDownList in EditItemTemplate
deve avere lo stato di visualizzazione abilitato. A breve si aggiungerà la sintassi databinding alla sintassi dichiarativa e ai comandi di associazione dati di DropDownList come Eval()
e Bind()
possono essere visualizzati solo nei controlli il cui stato di visualizzazione è abilitato.
Ripetere questi passaggi per aggiungere un oggetto DropDownList denominato Suppliers
all'oggetto SupplierName
TemplateField.EditItemTemplate
Ciò comporta l'aggiunta di un oggetto DropDownList a e la EditItemTemplate
creazione di un'altra objectDataSource. Suppliers
Tuttavia, è necessario configurare ObjectDataSource di DropDownList per richiamare il SuppliersBLL
metodo della GetSuppliers()
classe. Inoltre, configurare DropDownList per visualizzare Suppliers
il CompanyName
campo e usare il SupplierID
campo come valore per ListItem
s.
Dopo aver aggiunto dropDownLists ai due EditItemTemplate
, caricare la pagina in un browser e fare clic sul pulsante Modifica per il prodotto Cajun Seasoning chef Anton. Come illustrato nella figura 9, il rendering delle colonne di categoria e fornitore del prodotto viene eseguito come elenchi a discesa contenenti le categorie e i fornitori disponibili tra cui scegliere. Si noti tuttavia che i primi elementi in entrambi gli elenchi a discesa sono selezionati per impostazione predefinita (Bevande per la categoria e i liquidi esotici come fornitore), anche se Chef Anton's Cajun Seasoning è un condimento fornito da New Orleans Cajun Delights.
Figura 9: Il primo elemento nella Drop-Down Elenchi è selezionato per impostazione predefinita (fare clic per visualizzare l'immagine a dimensioni complete)
Inoltre, se si fa clic su Aggiorna, si troverà che i valori e SupplierID
del CategoryID
prodotto sono impostati su NULL
. Entrambi questi comportamenti non indesiderati vengono causati perché i DropDownList nell'oggetto EditItemTemplate
s non sono associati ad alcun campo dati dai dati sottostanti.
Associazione degli elenchi a discesa aiCategoryID
campi dati eSupplierID
Per avere gli elenchi a discesa delle categorie e dei fornitori modificati del prodotto impostati sui valori appropriati e per avere questi valori inviati al metodo BLL UpdateProduct
facendo clic su Aggiorna, è necessario associare le proprietà DropDownLists SelectedValue
ai CategoryID
campi dati SupplierID
e usando la associazione dei dati bidirezionale. Per eseguire questa operazione con Categories
DropDownList, è possibile aggiungere SelectedValue='<%# Bind("CategoryID") %>'
direttamente alla sintassi dichiarativa.
In alternativa, è possibile impostare i databinding di DropDownList modificando il modello tramite il Designer e facendo clic sul collegamento Modifica DataBindings dallo smart tag di DropDownList. In questo caso, indicare che la proprietà deve essere associata al campo usando l'associazione SelectedValue
CategoryID
dati bidirezionale (vedere la figura 10). Ripetere il processo dichiarativo o Designer per associare il SupplierID
campo dati all'elenco Suppliers
a discesa.
Figura 10: Associare l'oggetto CategoryID
alla proprietà DropDownList usando Two-Way databinding (fare clic per visualizzare l'immagineSelectedValue
a dimensioni complete)
Dopo aver applicato le associazioni alle SelectedValue
proprietà dei due DropDownList, le colonne del prodotto e del fornitore modificate verranno predefinite per i valori del prodotto corrente. Dopo aver fatto clic su Aggiorna, i CategoryID
valori e SupplierID
dell'elemento UpdateProduct
elenco a discesa selezionato verranno passati al metodo . La figura 11 mostra l'esercitazione dopo l'aggiunta delle istruzioni databinding; si noti come gli elementi di elenco a discesa selezionati per Chef Anton's Cajun Seasoning sono correttamente Condimento e New Orleans Cajun Delights.
Figura 11: i valori correnti della categoria e del fornitore del prodotto modificati sono selezionati per impostazione predefinita (fare clic per visualizzare l'immagine full-size)
Gestione deiNULL
valori
Le CategoryID
colonne e SupplierID
nella Products
tabella possono essere NULL
, ma l'elenco a discesa nell'oggetto EditItemTemplate
non include un elemento di elenco per rappresentare un NULL
valore. Ciò ha due conseguenze:
- L'utente non può usare l'interfaccia per modificare la categoria o il fornitore di un prodotto da un valore diverso
NULL
da uno a unoNULL
- Se un prodotto ha un
NULL
CategoryID
oggetto oSupplierID
, facendo clic sul pulsante Modifica verrà generata un'eccezione. Questo avviene perché il valore restituito daCategoryID
(oSupplierID
) nell'istruzione non esegue ilNULL
mapping a un valore nell'elencoBind()
a discesa (l'elenco a discesa genera un'eccezione quandoSelectedValue
la relativa proprietà è impostata su un valore non nella raccolta di elementi di elenco).
Per supportare e SupplierID
valoriNULL
CategoryID
, è necessario aggiungere un altro ListItem
a ogni Elenco a discesa per rappresentare il NULL
valore. Nell'esercitazione Filtro master/dettaglio con un elenco a discesa è stato illustrato come aggiungere un'aggiunta a un elenco dropdownlist in ingresso dati, che ha coinvolto l'impostazione della proprietà DropDownList su True
e l'aggiunta manuale dell'elemento ListItem
AppendDataBoundItems
aggiuntivo ListItem
. In questa esercitazione precedente, tuttavia, è stato aggiunto un ListItem
oggetto con un Value
di -1
. La logica di associazione dati in ASP.NET, tuttavia, converte automaticamente una stringa vuota in un NULL
valore e viceversa. Pertanto, per questa esercitazione si vuole che l'oggetto ListItem
sia Value
una stringa vuota.
Iniziare impostando sia la proprietà DropDownLists AppendDataBoundItems
su True
. Aggiungere quindi l'elemento aggiungendo l'elemento NULL
ListItem
seguente <asp:ListItem>
a ogni DropDownList in modo che il markup dichiarativo sia simile al seguente:
<asp:DropDownList ID="Categories" runat="server"
DataSourceID="CategoriesDataSource" DataTextField="CategoryName"
DataValueField="CategoryID" SelectedValue='<%# Bind("CategoryID") %>'
AppendDataBoundItems="True">
<asp:ListItem Value="">(None)</asp:ListItem>
</asp:DropDownList>
Ho scelto di usare "(None)" come valore Di testo per questo ListItem
, ma puoi modificarlo anche in una stringa vuota se vuoi.
Nota
Come si è visto nell'esercitazione Filtro master/dettaglio con un elenco a discesa, ListItem
è possibile aggiungere s a un elenco a discesa tramite il Designer facendo clic sulla proprietà DropDownList Items
nel Finestra Proprietà (che visualizzerà l'Editor ListItem
raccolta). Tuttavia, assicurarsi di aggiungere l'oggetto NULL
ListItem
per questa esercitazione tramite la sintassi dichiarativa. Se si usa la ListItem
Editor Raccolta, la sintassi dichiarativa generata ometterà completamente l'impostazione Value
quando è stata assegnata una stringa vuota, creando markup dichiarativo come : <asp:ListItem>(None)</asp:ListItem>
. Anche se questo potrebbe essere innocuo, il valore mancante causa l'uso del valore della Text
proprietà dropDownList nel suo posto. Ciò significa che se questa NULL
ListItem
opzione è selezionata, il valore "(None)" verrà tentato di essere assegnato a CategoryID
, che comporterà un'eccezione. Impostando Value=""
in modo esplicito , verrà assegnato un NULL
valore a CategoryID
quando viene NULL
ListItem
selezionato.
Ripetere questi passaggi per l'elenco a discesa Fornitori.
Con questo elemento aggiuntivoListItem
, l'interfaccia di modifica può ora assegnare NULL
valori ai campi e SupplierID
di CategoryID
un prodotto, come illustrato nella figura 12.
Figura 12: scegliere (Nessuno) per Assegnare un valore per la categoria o il fornitore di un prodotto (fare clic per visualizzare l'immagineNULL
a dimensioni complete)
Passaggio 4: Uso di RadioButton per lo stato interrotto
Attualmente il campo dati dei Discontinued
prodotti viene espresso usando un CheckBoxField, che esegue il rendering di una casella di controllo disabilitata per le righe di sola lettura e una casella di controllo abilitata per la riga da modificare. Anche se questa interfaccia utente è spesso adatta, è possibile personalizzarla se necessario usando un TemplateField. Per questa esercitazione, è possibile modificare CheckBoxField in un ModelloField che usa un controllo RadioButtonList con due opzioni "Active" e "Discontinued" da cui l'utente può specificare il valore del Discontinued
prodotto.
Iniziare convertendo Discontinued
CheckBoxField in un oggetto TemplateField, che creerà un oggetto TemplateField con un ItemTemplate
oggetto e EditItemTemplate
. Entrambi i modelli includono un controllo CheckBox con la relativa Checked
proprietà associata al Discontinued
campo dati, l'unica differenza tra i due è che la ItemTemplate
proprietà CheckBox è Enabled
impostata su False
.
Sostituire checkBox sia in ItemTemplate
che EditItemTemplate
con un controllo RadioButtonList, impostando entrambe le proprietà radioButtonLists ID
su DiscontinuedChoice
. In seguito, indicare che radioButtonLists deve contenere due pulsanti di opzione, uno con etichetta "Active" con un valore "False" e un valore "Discontinued" con un valore "True". A tale scopo, è possibile immettere gli <asp:ListItem>
elementi direttamente tramite la sintassi dichiarativa o usare l'Editor ListItem
Raccolta dall'Designer. La figura 13 mostra la ListItem
Editor raccolta dopo che sono state specificate le due opzioni del pulsante di opzione.
Figura 13: Aggiungere opzioni attive e interrotte a RadioButtonList (fare clic per visualizzare l'immagine full-size)
Poiché radioButtonList nell'oggetto ItemTemplate
non deve essere modificabile, impostare la relativa Enabled
proprietà su , lasciando la Enabled
proprietà su True
False
(impostazione predefinita) per RadioButtonList nell'oggetto EditItemTemplate
. In questo modo verranno apportati i pulsanti di opzione nella riga non modificata come di sola lettura, ma consentirà all'utente di modificare i valori RadioButton per la riga modificata.
È comunque necessario assegnare le proprietà dei SelectedValue
controlli RadioButtonList in modo che il pulsante di opzione appropriato sia selezionato in base al campo dati del Discontinued
prodotto. Come per i DropDownList esaminati in precedenza in questa esercitazione, questa sintassi di associazione dati può essere aggiunta direttamente nel markup dichiarativo o tramite il collegamento Modifica DataBindings negli smart tag radioButtonLists.
Dopo aver aggiunto i due RadioButtonList e configurarli, il Discontinued
markup dichiarativo di TemplateField dovrebbe essere simile al seguente:
<asp:TemplateField HeaderText="Discontinued" SortExpression="Discontinued">
<ItemTemplate>
<asp:RadioButtonList ID="DiscontinuedChoice" runat="server"
Enabled="False" SelectedValue='<%# Bind("Discontinued") %>'>
<asp:ListItem Value="False">Active</asp:ListItem>
<asp:ListItem Value="True">Discontinued</asp:ListItem>
</asp:RadioButtonList>
</ItemTemplate>
<EditItemTemplate>
<asp:RadioButtonList ID="DiscontinuedChoice" runat="server"
SelectedValue='<%# Bind("Discontinued") %>'>
<asp:ListItem Value="False">Active</asp:ListItem>
<asp:ListItem Value="True">Discontinued</asp:ListItem>
</asp:RadioButtonList>
</EditItemTemplate>
</asp:TemplateField>
Con queste modifiche, la Discontinued
colonna è stata trasformata da un elenco di caselle di controllo a un elenco di coppie di pulsanti di opzione (vedere la figura 14). Quando si modifica un prodotto, viene selezionato il pulsante di opzione appropriato e lo stato del prodotto può essere aggiornato selezionando l'altro pulsante di opzione e facendo clic su Aggiorna.
Figura 14: le caselle di controllo interrotte sono state sostituite da coppie pulsante di opzione (fare clic per visualizzare l'immagine a dimensioni complete)
Nota
Poiché la Discontinued
colonna nel Products
database non può avere NULL
valori, non è necessario preoccuparsi di acquisire NULL
informazioni nell'interfaccia. Se, tuttavia, Discontinued
la colonna potrebbe contenere NULL
valori che si desidera aggiungere un terzo pulsante di opzione all'elenco con il relativo Value
set su una stringa vuota (Value=""
), proprio come con la categoria e i fornitori DropDownList.
Riepilogo
Mentre BoundField e CheckBoxField eseguono automaticamente il rendering di sola lettura, modifica e inserimento di interfacce, non hanno la possibilità di personalizzazione. Spesso, tuttavia, è necessario personalizzare l'interfaccia di modifica o inserimento, ad esempio aggiungendo controlli di convalida (come illustrato nell'esercitazione precedente) o personalizzando l'interfaccia utente della raccolta dati (come illustrato in questa esercitazione). La personalizzazione dell'interfaccia con un ModelloField può essere sommata nella procedura seguente:
- Aggiungere un modelloField o convertire un oggetto BoundField o CheckBoxField esistente in un modellofield
- Aumentare l'interfaccia in base alle esigenze
- Associare i campi dati appropriati ai controlli Web appena aggiunti usando il databinding bidirezionale
Oltre a usare i controlli Web predefiniti ASP.NET, è anche possibile personalizzare i modelli di un ModelloField con controlli server personalizzati e compilati e Controlli utente.
Programmazione felice!
Informazioni sull'autore
Scott Mitchell, autore di sette libri ASP/ASP.NET e fondatore di 4GuysFromRolla.com, ha lavorato con le tecnologie Microsoft Web dal 1998. Scott lavora come consulente indipendente, allenatore e scrittore. Il suo ultimo libro è Sams Teach Yourself ASP.NET 2,0 in 24 Ore. Può essere raggiunto a mitchell@4GuysFromRolla.com. o tramite il suo blog, che può essere trovato in http://ScottOnWriting.NET.
Commenti e suggerimenti
https://aka.ms/ContentUserFeedback.
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedereInvia e visualizza il feedback per