De interface voor gegevenswijziging aanpassen (C#)

door Scott Mitchell

PDF downloaden

In deze zelfstudie bekijken we hoe u de interface van een bewerkbare GridView kunt aanpassen door de standaardbesturingselementen Tekstvak en Selectievakje te vervangen door alternatieve invoerwebbesturingselementen.

Introductie

De BoundFields en CheckBoxFields die door de GridView- en DetailsView-besturingselementen worden gebruikt, vereenvoudigen het wijzigen van gegevens dankzij hun vermogen om alleen-lezen, bewerkbare en invoegbare interfaces weer te geven. Deze interfaces kunnen worden weergegeven zonder dat u extra declaratieve markeringen of code hoeft toe te voegen. De interfaces van BoundField en CheckBoxField hebben echter niet de aanpassingsmogelijkheden die vaak nodig zijn in praktijkscenario's. Als u de bewerkbare of invoegbare interface in een GridView of DetailsView wilt aanpassen, moeten we in plaats daarvan een TemplateField gebruiken.

In de vorige tutorial hebben we geleerd hoe we de interfaces voor gegevenswijziging aanpassen door validatie-webcontrols toe te voegen. In deze zelfstudie bekijken we hoe u de werkelijke webbesturingselementen voor gegevensverzameling kunt aanpassen, waarbij u de standaardbesturingselementen tekstvak en selectievakje van BoundField en CheckBoxField vervangt door alternatieve invoerwebbesturingselementen. We bouwen met name een bewerkbare GridView waarmee de naam, categorie, leverancier en stopgezette status van een product kunnen worden bijgewerkt. Wanneer u een bepaalde rij bewerkt, worden de categorie- en leveranciersvelden weergegeven als DropDownLists, met daarin de set beschikbare categorieën en leveranciers waaruit u kunt kiezen. Bovendien vervangen we het standaard selectievakje van CheckBoxField door een RadioButtonList-besturingselement dat twee opties biedt: 'Actief' en 'Stopgezet'.

Afbeelding 1: De bewerkingsinterface van GridView bevat vervolgkeuzelijsten en RadioButtons (klik om de volledige afbeelding weer te geven)

Stap 1: de juisteUpdateProductoverload-functie maken

In deze zelfstudie bouwen we een bewerkbare GridView die het bewerken van de naam, categorie, leverancier en stopgezette status van een product toestaat. Daarom hebben we een UpdateProduct overbelasting nodig die vijf invoerparameters accepteert, deze vier productwaarden plus de ProductID. Zoals bij onze eerdere overbelastingen, zal deze:

1. Haal de productgegevens op uit de database voor de opgegeven ProductID,
2. Werk de ProductName-, CategoryID-, SupplierID- en Discontinued-velden bij.
3. Verzend de updateaanvraag naar de DAL via de methode van Update() TableAdapter.

Kortom, voor deze specifieke overbelasting heb ik de bedrijfsregelcontrole weggelaten om ervoor te zorgen dat een product wordt gemarkeerd als stopgezet, niet het enige product is dat door zijn leverancier wordt aangeboden. U kunt het indien gewenst toevoegen, of, nog beter, de logica naar een afzonderlijke methode herstructureren.

De volgende code toont de nieuwe UpdateProduct overbelasting in de ProductsBLL klasse:

[System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Update, false)]
public bool UpdateProduct(string productName, int? categoryID,
    int? supplierID, bool discontinued, int productID)
{
    Northwind.ProductsDataTable products = Adapter.GetProductByProductID(productID);
    if (products.Count == 0)
        // no matching record found, return false
        return false;
    Northwind.ProductsRow product = products[0];
    product.ProductName = productName;
    if (supplierID == null) product.SetSupplierIDNull();
      else product.SupplierID = supplierID.Value;
    if (categoryID == null) product.SetCategoryIDNull();
      else product.CategoryID = categoryID.Value;
    product.Discontinued = discontinued;
    // Update the product record
    int rowsAffected = Adapter.Update(product);
    // Return true if precisely one row was updated, otherwise false
    return rowsAffected == 1;
}

Stap 2: de bewerkbare rasterweergave maken

Nu de UpdateProduct overload-functie is toegevoegd, zijn we klaar om onze bewerkbare GridView-component te maken. Open de CustomizedUI.aspx pagina in de EditInsertDelete map en voeg een GridView-besturingselement toe aan de ontwerpfunctie. Maak vervolgens een nieuwe ObjectDataSource op basis van de infotag van GridView. Configureer de ObjectDataSource om productgegevens op te halen via de methode van ProductBLL de GetProducts() klasse en om productgegevens bij te werken met behulp van de UpdateProduct overbelasting die we zojuist hebben gemaakt. Selecteer (Geen) in de vervolgkeuzelijsten op de tabbladen INVOEGEN en VERWIJDEREN.

Afbeelding 2: De ObjectDataSource configureren voor het gebruik van de UpdateProduct overbelasting die u zojuist hebt gemaakt (klik om de afbeelding op volledige grootte weer te geven)

Zoals we in de zelfstudies voor het wijzigen van gegevens hebben gezien, wijst de declaratieve syntaxis voor de ObjectDataSource die door Visual Studio is gemaakt, de OldValuesParameterFormatString eigenschap toe aan original_{0}. Dit werkt natuurlijk niet met onze bedrijfslogicalaag, omdat onze methoden niet verwachten dat de oorspronkelijke ProductID waarde wordt doorgegeven. Zoals we in de vorige zelfstudies hebben gedaan, moet u deze eigenschapstoewijzing verwijderen uit de declaratieve syntaxis of in plaats daarvan de waarde van deze eigenschap instellen op {0}.

Na deze wijziging moet de declaratieve markering van ObjectDataSource er als volgt uitzien:

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

Houd er rekening mee dat de OldValuesParameterFormatString eigenschap is verwijderd en dat er een Parameter in de UpdateParameters verzameling is voor elk van de invoerparameters die door onze UpdateProduct overbelasting worden verwacht.

Hoewel ObjectDataSource is geconfigureerd voor het bijwerken van slechts een subset van productwaarden, worden in GridView momenteel alle productvelden weergegeven. Neem even de tijd om de GridView te bewerken, zodat:

• Het bevat alleen de ProductName, SupplierName, CategoryName BoundFields en het Discontinued CheckBoxVeld
• De CategoryName velden en SupplierName velden die moeten worden weergegeven vóór (links van) het Discontinued Selectievakjeveld
• De CategoryName en SupplierName BoundFields' eigenschap HeaderText is respectievelijk ingesteld op 'Categorie' en 'Leverancier'.
• Ondersteuning voor bewerken is ingeschakeld (schakel het selectievakje Bewerken inschakelen in de infotag van GridView in)

Na deze wijzigingen ziet de ontwerpfunctie er ongeveer uit als afbeelding 3, met de declaratieve syntaxis van GridView die hieronder wordt weergegeven.

Afbeelding 3: Verwijder de overbodige velden uit de Rasterweergave (klik hier om de volledige afbeelding weer te geven)

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

Op dit moment is de Alleen-lezen functionaliteit van de GridView ingesteld. Wanneer u de gegevens bekijkt, wordt elk product weergegeven als een rij in de GridView, met de naam, categorie, leverancier en stopgezette status van het product.

Afbeelding 4: de Read-Only interface van GridView is voltooid (klik om de afbeelding op volledige grootte weer te geven)

Opmerking

Zoals besproken in een overzicht van de zelfstudie Gegevens invoegen, bijwerken en verwijderen, is het van cruciaal belang dat de weergavestatus van GridView is ingeschakeld (het standaardgedrag). Als u de EnableViewState-eigenschap van GridView instelt op false, loopt u het risico dat gelijktijdige gebruikers onbedoeld records verwijderen of bewerken.

Stap 3: Een vervolgkeuzelijst gebruiken voor de bewerkingsinterfaces van categorieën en leveranciers.

Herinner u dat het ProductsRow object de CategoryID, CategoryName, SupplierID en SupplierName eigenschappen bevat, die de werkelijke waarden voor vreemde-sleutel-id's in de Products databasetabel en de bijbehorende Name waarden in de tabellen Categories en Suppliers bieden. De ProductRow's CategoryID en SupplierID kunnen zowel worden gelezen als geschreven naar, terwijl de CategoryName en SupplierName eigenschappen zijn gemarkeerd als alleen-lezen.

Vanwege de alleen-lezenstatus van de CategoryName en SupplierName eigenschappen, zijn de bijbehorende BoundFields zodanig ingesteld dat hun ReadOnly eigenschap op true staat. Hierdoor kunnen deze waarden niet worden gewijzigd wanneer een rij wordt bewerkt. Hoewel we de ReadOnly eigenschap kunnen instellen op false, waarbij de CategoryName en SupplierName BoundFields tijdens het bewerken als tekstvakken worden weergegeven, zal een dergelijke benadering resulteren in een uitzonderingssituatie wanneer de gebruiker probeert het product bij te werken, omdat er geen UpdateProduct overload is die CategoryName en SupplierName als invoer accepteert. In feite willen we om twee redenen geen dergelijke overbelasting creëren:

• De Products tabel heeft de velden SupplierName en CategoryName niet, maar wel SupplierID en CategoryID. Daarom willen we dat aan onze methode deze specifieke ID-waarden worden doorgegeven, niet de waarden van de opzoektabellen.
• Vereisen dat de gebruiker de naam van de leverancier of categorie typt, is minder dan ideaal, omdat de gebruiker de beschikbare categorieën en leveranciers en de juiste spelling moet kennen.

In de velden leverancier en categorie moeten de namen van de categorieën en leveranciers worden weergegeven in de modus Alleen-lezen (zoals nu het geval is) en een vervolgkeuzelijst met toepasselijke opties wanneer ze worden bewerkt. Met behulp van een vervolgkeuzelijst kan de eindgebruiker snel zien welke categorieën en leveranciers beschikbaar zijn om uit te kiezen en kunnen ze gemakkelijker hun keuze maken.

Om dit gedrag te realiseren, moeten we de SupplierName en CategoryName BoundFields converteren naar TemplateFields, waarbij ItemTemplate de SupplierName en CategoryName waarden uitzendt en EditItemTemplate een DropDownList-controle gebruikt om de beschikbare categorieën en leveranciers weer te geven.

CategoriesenSuppliersDropDownLists toevoegen

Converteer eerst de SupplierName en CategoryName BoundFields naar TemplateFields door op de link "Kolommen bewerken" van de smart tag van de GridView te klikken, het BoundField te selecteren in de lijst linksonder en op de link "Dit veld converteren naar een TemplateField" te klikken. Tijdens het conversieproces wordt een TemplateField gemaakt met zowel een ItemTemplate als een EditItemTemplate, zoals wordt weergegeven in de declaratieve syntaxis hieronder.

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

Aangezien het gebonden veld als alleen-lezen is gemarkeerd, bevatten zowel ItemTemplate als EditItemTemplate een Label Web-besturingselement waarvan de Text-eigenschap is gekoppeld aan het toepasselijke gegevensveld (CategoryName in de bovenstaande syntaxis). We moeten het EditItemTemplate Label Web-besturingselement vervangen door een vervolgkeuzelijstbesturingselement.

Zoals we in de vorige zelfstudies hebben gezien, kan de sjabloon worden bewerkt via de ontwerpfunctie of rechtstreeks vanuit de declaratieve syntaxis. Als u deze wilt bewerken via de ontwerpfunctie, klikt u op de koppeling Sjablonen bewerken vanuit de infotag van GridView en kiest u ervoor om te werken met de velden EditItemTemplateCategorie. Verwijder het Label Web-besturingselement en vervang dit door een DropDownList-besturingselement, waarbij de eigenschap ID van de DropDownList wordt ingesteld op Categories.

Afbeelding 5: Verwijder het TexBox en voeg een vervolgkeuzelijst toe aan de EditItemTemplate afbeelding (klik om de afbeelding op volledige grootte weer te geven)

Vervolgens moeten we de vervolgkeuzelijst vullen met de beschikbare categorieën. Klik op de koppeling Gegevensbron kiezen in de infolabel van de DropDownList en kies ervoor om een nieuwe ObjectDataSource met de naam CategoriesDataSourcete maken.

Afbeelding 6: Een nieuw ObjectDataSource-besturingselement maken met de naam CategoriesDataSource (klik hier om de volledige afbeelding weer te geven)

Als u wilt dat deze ObjectDataSource alle categorieën retourneert, verbindt u deze met de methode van CategoriesBLL de GetCategories() klasse.

Afbeelding 7: De ObjectDataSource binden aan de CategoriesBLLGetCategories() methode (klik om de afbeelding op volledige grootte weer te geven)

Ten slotte configureert u de instellingen van de DropDownList zodanig dat het CategoryName veld in elke vervolgkeuzelijst ListItem wordt weergegeven met het CategoryID veld dat wordt gebruikt als de waarde.

Afbeelding 8: Laat het CategoryName veld weergeven en de CategoryID waarde gebruiken (klik om de afbeelding op volledige grootte weer te geven)

Nadat u deze wijzigingen hebt aangebracht, bevatten de declaratieve markeringen voor de EditItemTemplate in TemplateField CategoryName zowel een DropDownList als een 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>

Opmerking

De vervolgkeuzelijst in de EditItemTemplate moet de weergavestatus ingeschakeld hebben. We voegen binnenkort de syntaxis van de gegevensbinding toe aan de declaratieve syntaxis en gegevensbindingsopdrachten van de DropDownList, zoals Eval() en Bind() kunnen alleen worden weergegeven in besturingselementen waarvan de weergavestatus is ingeschakeld.

Herhaal deze stappen om een vervolgkeuzelijst genaamd Suppliers toe te voegen aan de SupplierName TemplateFieldEditItemTemplate. Dit omvat het toevoegen van een DropDownList aan de EditItemTemplate en het maken van een andere ObjectDataSource. De Suppliers ObjectDataSource van de DropDownList moet echter worden geconfigureerd om de methode van SuppliersBLL de GetSuppliers() klasse aan te roepen. Daarnaast configureert u de Suppliers vervolgkeuzelijst om het CompanyName-veld weer te geven en gebruikt u het SupplierID-veld als waarde voor de ListItem.

Nadat u de DropDownLists aan de twee EditItemTemplate s hebt toegevoegd, laadt u de pagina in een browser en klikt u op de knop Bewerken voor het product Chef Anton's Cajun Seasoning. Zoals in afbeelding 9 wordt weergegeven, worden de categorie- en leverancierskolommen van het product weergegeven als vervolgkeuzelijsten met de beschikbare categorieën en leveranciers waaruit u kunt kiezen. Houd er echter rekening mee dat de eerste items in beide vervolgkeuzelijsten standaard zijn geselecteerd (Dranken voor de categorie en Exotische Vloeistoffen als leverancier), ook al is Chef Anton's Cajun Seasoning een Condiment geleverd door New Orleans Cajun Delights.

Afbeelding 9: Het eerste item in de Drop-Down-lijsten is standaard geselecteerd (klik om de volledige afbeelding weer te geven)

Als u bovendien op Bijwerken klikt, merkt u dat de CategoryID en SupplierID waarden van het product zijn ingesteld op NULL. Beide ongewenste gedragingen worden veroorzaakt omdat de DropDownLists in de EditItemTemplate s niet zijn gebonden aan gegevensvelden uit de onderliggende productgegevens.

De vervolgkeuzelijsten binden aan deCategoryIDenSupplierIDgegevensvelden

Om ervoor te zorgen dat de vervolgkeuzelijsten van het bewerkte product en de vervolgkeuzelijsten van leveranciers zijn ingesteld op de juiste waarden en om deze waarden terug te laten sturen naar de methode van UpdateProduct BLL wanneer u op Update klikt, moeten we de eigenschappen van de DropDownLists koppelen aan de SelectedValue velden en CategoryID gegevensvelden met behulp van gegevensbinding in twee richtingenSupplierID. U kunt dit doen met de Categories DropDownList door rechtstreeks toe te voegen SelectedValue='<%# Bind("CategoryID") %>' aan de declaratieve syntaxis.

U kunt de gegevensbindingen van de DropDownList ook instellen door de sjabloon te bewerken via de ontwerpfunctie en op de koppeling DataBindings bewerken te klikken vanuit de infotag van de DropDownList. Geef vervolgens aan dat de SelectedValue eigenschap moet worden gebonden aan het CategoryID veld met behulp van gegevensbinding in twee richtingen (zie afbeelding 10). Herhaal het declaratieve proces of het designerproces om het SupplierID gegevensveld te binden aan de Suppliers vervolgkeuzelijst.

Afbeelding 10: Bind de CategoryID aan de SelectedValue-eigenschap van de vervolgkeuzelijst met behulp van Two-Way databinding (klik om de afbeelding op volledige grootte weer te geven)

Zodra de bindingen zijn toegepast op de SelectedValue eigenschappen van de twee vervolgkeuzelijsten, worden de categorie- en leverancierskolommen van het bewerkte product standaard ingesteld op de waarden van het huidige product. Wanneer u op Bijwerken klikt, worden de CategoryID en SupplierID waarden van het geselecteerde vervolgkeuzelijstitem doorgegeven aan de UpdateProduct methode. In afbeelding 11 ziet u de handleiding nadat de gegevensbindingsinstructies zijn toegevoegd; let op hoe de geselecteerde vervolgkeuzelijstitems voor Chef Anton's Cajun Seasoning correct condiment en New Orleans Cajun Delights zijn.

Afbeelding 11: De huidige categorie en leverancierswaarden van het bewerkte product zijn standaard geselecteerd (klik hier om de volledige afbeelding weer te geven)

Waarden verwerkenNULL

De CategoryID en SupplierID kolommen in de Products tabel kunnen worden ingesteld als NULL, maar de dropdownmenu's in de EditItemTemplate bevatten geen lijstitem om een NULL waarde weer te geven. Dit heeft twee gevolgen:

• De gebruiker kan onze interface niet gebruiken om de categorie of leverancier van een product te wijzigen van een niet-NULL waarde naar een NULL waarde.
• Als een product een NULLCategoryID of SupplierIDheeft, resulteert het klikken op de knop Bewerken tot een uitzondering. Dit komt doordat de NULL waarde die wordt geretourneerd door CategoryID (of SupplierID) in de Bind() verklaring niet wordt toegewezen aan een waarde in de vervolgkeuzelijst (de DropDownList werpt een uitzondering op wanneer de eigenschap SelectedValue is ingesteld op een waarde die niet in de verzameling lijstitems voorkomt).

Om NULLCategoryID en SupplierID waarden te ondersteunen, moeten we nog een ListItem toevoegen aan elke vervolgkeuzelijst om de NULL waarde weer te geven. In de zelfstudie Master/Detail Filtering With a DropDownList hebben we gezien hoe we een extra ListItem aan een databound DropDownList kunnen toevoegen, waarbij de eigenschap AppendDataBoundItems van de DropDownList is ingesteld op true en de extra ListItem handmatig wordt toegevoegd. In die vorige zelfstudie hebben we echter een ListItem met een Value van -1toegevoegd. De gegevensbindingslogica in ASP.NET converteert echter automatisch een lege tekenreeks naar een NULL waarde en omgekeerd. Daarom willen we voor deze zelfstudie dat de ListItem's Value een lege tekenreeks zijn.

Begin door de eigenschap van beide DropDownLists AppendDataBoundItems in te stellen op true. Voeg vervolgens het NULLListItem volgende <asp:ListItem> element toe aan elke DropDownList, zodat de declaratieve markering er als volgt uitziet:

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

Ik heb ervoor gekozen om '(Geen)' als de tekstwaarde hiervoor ListItemte gebruiken, maar u kunt deze desgewenst ook wijzigen in een lege tekenreeks.

Opmerking

Zoals we in de zelfstudie Master/Detail Filtering met een DropDownList hebben gezien, kunnen ListItem worden toegevoegd aan een vervolgkeuzelijst via de ontwerpfunctie door te klikken op de eigenschap Items van de DropDownList in het venster Eigenschappen (waarmee de ListItem Collection Editor wordt weergegeven). Voeg voor deze handleiding de NULLListItem toe via de declaratieve syntaxis. Als u de ListItem verzamelingseditor gebruikt, laat de gegenereerde declaratieve syntaxis de Value instelling helemaal weg wanneer er een lege tekenreeks wordt toegewezen, waardoor declaratieve markeringen worden gemaakt zoals: <asp:ListItem>(None)</asp:ListItem>. Hoewel dit er ongevaarlijk uitziet, zorgt de ontbrekende waarde ervoor dat de DropDownList de Text eigenschapswaarde op zijn plaats gebruikt. Dit betekent dat als dit NULLListItem is geselecteerd, de waarde '(Geen)' wordt toegewezen aan de CategoryID, wat resulteert in een uitzondering. Wanneer Value=""NULL is geselecteerd, wordt door expliciete instelling van CategoryID een NULL waarde toegewezen aan ListItem.

Herhaal deze stappen voor de leveranciers-vervolgkeuzelijst.

Met deze extra ListItem kan de bewerkingsinterface nu waarden toewijzen aan NULL velden van een Product, CategoryID en SupplierID, zoals weergegeven in afbeelding 12.

Afbeelding 12: Kies (Geen) om een NULL waarde toe te wijzen voor de categorie of leverancier van een product (klik om de afbeelding op volledige grootte weer te geven)

Stap 4: RadioButtons gebruiken voor de stopgezette status

Op dit moment wordt het gegevensveld van de producten Discontinued uitgedrukt met behulp van een Selectievakjeveld, dat een uitgeschakeld selectievakje weergeeft voor de alleen-lezen rijen en een ingeschakeld selectievakje voor de rij die wordt bewerkt. Hoewel deze gebruikersinterface vaak geschikt is, kunnen we deze zo nodig aanpassen met behulp van een TemplateField. Voor deze zelfstudie gaan we het SelectievakjeVeld wijzigen in een TemplateField dat gebruikmaakt van een Besturingselement RadioButtonList met twee opties 'Actief' en 'Stopgezet' waaruit de gebruiker de waarde van Discontinued het product kan opgeven.

Begin met het converteren van het Discontinued SelectievakjeVeld naar een TemplateField, waarmee een TemplateField wordt gemaakt met een ItemTemplate en EditItemTemplate. Beide sjablonen bevatten een selectievakje met zijn Checked-eigenschap die is gebonden aan het Discontinued gegevensveld. Het enige verschil tussen de twee is dat de eigenschap van het ItemTemplate-selectievakje is ingesteld op Enabled.

Vervang het selectievakje in zowel ItemTemplate als EditItemTemplate door een RadioButtonList-besturingselement, waarbij de eigenschappen van beide RadioButtonLists worden ingesteld op ID. Geef vervolgens aan dat de RadioButtonLists elk twee radioknoppen moeten bevatten: één met het label 'Actief' en de waarde 'False', en één met het label 'Stopgezet' en de waarde 'True'. Hiervoor kunt u de <asp:ListItem> elementen rechtstreeks invoeren via de declaratieve syntaxis of de ListItem verzamelingseditor van de ontwerpfunctie gebruiken. Afbeelding 13 toont de ListItem verzamelingseditor nadat de twee keuzerondjeopties zijn opgegeven.

Afbeelding 13: Voeg de opties 'Actief' en 'Stopgezet' toe aan de RadioButtonList (klik om de volledige afbeelding weer te geven)

Aangezien de RadioButtonList in de ItemTemplate niet bewerkbaar zou moeten zijn, stelt u de eigenschap Enabled in op false, waarbij de eigenschap Enabled op true blijft staan (de standaardinstelling) voor de RadioButtonList in de EditItemTemplate. Hierdoor worden de radioknoppen in de niet-bewerkte rij met een alleen-lezen status weergegeven, maar kan de gebruiker de waardes van de radioknoppen in de bewerkte rij wijzigen.

We moeten nog steeds de eigenschappen van de SelectedValue RadioButtonList-besturingselementen toewijzen, zodat het juiste radioknopje wordt geselecteerd op basis van het gegevensveld van het product Discontinued. Net als bij de DropDownLists die eerder in deze tutorial zijn behandeld, kan deze gegevensbindingssyntaxis direct worden toegevoegd aan de declaratieve markup of via de koppeling "DataBindings bewerken" in de smart tags van de RadioButtonLists.

Nadat u de twee RadioButtonLists hebt toegevoegd en deze hebt geconfigureerd, moet de Discontinued declaratieve markering van TemplateField er als volgt uitzien:

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

Met deze wijzigingen is de Discontinued kolom getransformeerd van een lijst met selectievakjes naar een lijst met paren van keuzerondjes (zie figuur 14). Wanneer u een product bewerkt, wordt het juiste keuzerondje geselecteerd en kan de beëindigingsstatus van het product worden bijgewerkt door het andere keuzerondje te selecteren en op Bijwerken te klikken.

Afbeelding 14: De stopgezette selectievakjes zijn vervangen door keuzerondjes (Klik om de afbeelding volledig weer te geven)

Opmerking

Omdat de Discontinued kolom in de Products database geen waarden kan hebben NULL , hoeft u zich geen zorgen te maken over het vastleggen van NULL gegevens in de interface. Als echter de kolom Discontinued waarden zou kunnen bevatten NULL, willen we een derde keuzerondje toevoegen aan de lijst met zijn Value ingesteld op een lege tekenreeks (Value=""), net als bij de vervolgkeuzelijsten van de categorie en leverancier.

Samenvatting

Hoewel BoundField en CheckBoxField automatisch alleen-lezen-, bewerk- en invoeginterfaces weergeven, hebben ze niet de mogelijkheid tot aanpassing. Vaak moeten we echter de bewerkings- of invoeginterface aanpassen, mogelijk validatiebesturingselementen toevoegen (zoals we in de vorige zelfstudie hebben gezien) of door de gebruikersinterface voor gegevensverzameling aan te passen (zoals we in deze zelfstudie hebben gezien). Het aanpassen van de interface met een TemplateField kan worden opgeteld in de volgende stappen:

1. Een TemplateField toevoegen of een bestaand BoundField of CheckBoxField converteren naar een TemplateField
2. De interface zo nodig uitbreiden
3. Koppel de juiste gegevensvelden aan de zojuist toegevoegde webbesturingselementen met behulp van gegevensbinding in twee richtingen

Naast het gebruik van de ingebouwde ASP.NET Webbesturingselementen, kunt u ook de sjablonen van een TemplateField aanpassen met aangepaste, gecompileerde serverbesturingselementen en gebruikersbesturingselementen.

Veel plezier met programmeren!

Over de auteur

Scott Mitchell, auteur van zeven ASP/ASP.NET-boeken en oprichter van 4GuysFromRolla.com, werkt sinds 1998 met Microsoft-webtechnologieën. Scott werkt als onafhankelijk consultant, trainer en schrijver. Zijn laatste boek is Sams Teach Yourself ASP.NET 2.0 in 24 uur. Hij kan worden bereikt op mitchell@4GuysFromRolla.com.

VorigeVolgende