Az adatmódosítási felület testreszabása (C#)

által Scott Mitchell

PDF letöltése

Ebben az oktatóanyagban azt vizsgáljuk meg, hogyan szabhatja testre a szerkeszthető GridView felületét úgy, hogy a szabványos Szövegdoboz és Jelölőnégyzet vezérlőket helyettesítő beviteli webes vezérlőkre cseréli.

Bevezetés

A GridView és a DetailsView vezérlő által használt BoundFields és CheckBoxFields vezérlők leegyszerűsítik az adatok módosítását, mivel írásvédett, szerkeszthető és beszúrható interfészeket képesek megjeleníteni. Ezek az interfészek anélkül jeleníthetők meg, hogy további deklaratív korrektúrát vagy kódot kellene hozzáadniuk. A BoundField és a CheckBoxField felületei azonban nem rendelkeznek a valós forgatókönyvekben gyakran szükséges testreszabhatósággal. A szerkeszthető vagy beszúrható felület GridView-ban vagy DetailsView-ban való testreszabásához ehelyett egy TemplateFieldet kell használnunk.

Az előző oktatóanyagban láthattuk, hogyan szabhatja testre az adatmódosítási felületeket érvényesítési webvezérlők hozzáadásával. Ebben az oktatóanyagban azt vizsgáljuk meg, hogyan szabhatja testre a tényleges adatgyűjtési webvezérlőket, a BoundField és a CheckBoxField szabványos TextBox és CheckBox vezérlői helyett alternatív beviteli webes vezérlőket. Létrehozunk egy szerkeszthető GridView-t, amely lehetővé teszi egy termék nevének, kategóriájának, szállítójának és megszűnt állapotának frissítését. Egy adott sor szerkesztésekor a kategória- és szállítómezők legördülő listákként jelennek meg, amelyek tartalmazzák az elérhető kategóriákat és szállítókat, amelyek közül választhat. Ezenkívül a CheckBoxField alapértelmezett jelölőnégyzetét egy RadioButtonList vezérlőre cseréljük, amely két lehetőséget kínál: "Aktív" és "Megszűnt".

1. ábra: A GridView szerkesztőfelülete legördülő listákat és radiobuttonokat tartalmaz (kattintson ide a teljes méretű kép megtekintéséhez)

1. lépés: A megfelelőUpdateProducttúlterhelés létrehozása

Ebben az oktatóanyagban létrehozunk egy szerkeszthető GridView-t, amely lehetővé teszi egy termék nevének, kategóriájának, szállítójának és megszűnt állapotának szerkesztését. Ezért olyan UpdateProduct túlterhelésre van szükségünk, amely öt bemeneti paramétert fogad el: ez a négy termékérték, plusz a ProductID. A korábbi túlterhelésekhez hasonlóan ez is a következő lesz:

1. A termékinformációk lekérése a megadott ProductIDadatbázisból,
2. Frissítse a ProductName, CategoryID, SupplierID és Discontinued mezőket.
3. Küldje el a frissítési kérelmet a DAL-nak a TableAdapter metódusán Update() keresztül.

A rövidség kedvéért ebben az adott esetben kihagytam az üzleti szabály ellenőrzését, amely biztosítja, hogy a megszüntetésre kerülő termék ne legyen az egyetlen, amit a szállító kínál. Nyugodtan felveheti, ha szeretné, vagy ideális esetben egy külön metódusra bontja át a logikát.

Az alábbi kód bemutatja az új UpdateProduct túlterhelést a ProductsBLL osztályban.

[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;
}

2. lépés: A szerkeszthető GridView létrehozása

UpdateProduct A túlterhelés hozzáadásával készen állunk a szerkeszthető GridView létrehozására. Nyissa meg a CustomizedUI.aspx lapot a EditInsertDelete mappában, és adjon hozzá egy GridView-vezérlőt a Tervezőhöz. Ezután hozzon létre egy új ObjectDataSource-t a GridView intelligens címkéje alapján. Konfigurálja az ObjectDataSource-t, hogy a ProductBLL osztály GetProducts() metódusával kérje le a termékadatokat, és a termékadatokat az imént létrehozott UpdateProduct túlterhelés használatával frissítse. A BESZÚRÁS és a TÖRLÉS lapon válassza a (Nincs) lehetőséget a legördülő listákból.

2. ábra: Konfigurálja az ObjectDataSource-t az UpdateProduct imént létrehozott túlterhelés használatára (kattintson ide a teljes méretű kép megtekintéséhez)

Ahogy az adatmódosítási oktatóanyagok során láttuk, a Visual Studio által létrehozott ObjectDataSource deklaratív szintaxisa hozzárendeli a OldValuesParameterFormatString tulajdonságot original_{0}. Ez természetesen nem fog működni az üzleti logikai réteggel, mivel a metódusok nem várják el az eredeti ProductID érték átadását. Ezért, ahogy az előző oktatóanyagokban is végeztük, szánjon egy kis időt, hogy eltávolítsa ezt a tulajdonság-hozzárendelést a deklaratív szintaxisból, vagy állítsa a tulajdonság értékét a következőre {0}.

A módosítás után az ObjectDataSource deklaratív korrektúrája a következőhöz hasonlóan fog kinézni:

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

Vegye figyelembe, hogy a OldValuesParameterFormatString tulajdonság el lett távolítva, és a Parameter gyűjteményben megtalálható minden olyan UpdateParameters, amelyet a UpdateProduct túlterhelés vár a bemeneti paraméterek alapján.

Bár az ObjectDataSource úgy van konfigurálva, hogy csak a termékértékek egy részhalmazát frissítse, a GridView jelenleg az összes termékmezőt megjeleníti. Szánjon egy kis időt a GridView szerkesztésére, hogy:

• Csak tartalmazza a ProductName, SupplierName, CategoryName BoundFields-t és a Discontinued CheckBoxField-et.
• A CategoryName és SupplierName mezők a Discontinued jelölőnégyzetmező előtt (a bal oldalon) jelenjenek meg.
• A CategoryName és SupplierName BoundFields HeaderText tulajdonsága megfelelően "Category" és "Supplier" értékre van állítva
• A szerkesztési támogatás engedélyezve van (jelölje be a Szerkesztés engedélyezése jelölőnégyzetet a GridView intelligens címkéjében)

A módosítások után a Tervező a 3. ábrához hasonlóan fog kinézni, a GridView deklaratív szintaxisa alább látható.

3. ábra: Távolítsa el a felesleges mezőket a GridView nézetből (kattintson ide a teljes méretű kép megtekintéséhez)

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

Ezen a ponton a GridView csak olvasható állapotú. Az adatok megtekintésekor minden termék a GridView egy soraként jelenik meg, amely megjeleníti a termék nevét, kategóriáját, szállítóját és megszűnt állapotát.

A GridView Read-Only felülete kész

4. ábra: A GridView Read-Only felülete kész (kattintson ide a teljes méretű kép megtekintéséhez)

Megjegyzés:

Az adatok beszúrásának, frissítésének és törlésének áttekintésében leírtaknak megfelelően rendkívül fontos, hogy a GridView nézetállapota engedélyezve legyen (az alapértelmezett viselkedés). Ha a GridView tulajdonságot úgy állítja be EnableViewState, hogy false, azzal kockázatot vállal, hogy véletlenül egyidejű felhasználók törölhetnek vagy szerkeszthetnek rekordokat.

3. lépés: DropDownList használata a kategória- és szállítószerkesztő felületekhez

Ne feledje, hogy az ProductsRow objektum tartalmaz CategoryID, CategoryName, SupplierIDés SupplierName tulajdonságokat, amelyek biztosítják az adatbázistábla tényleges idegenkulcs-azonosító értékeitProducts, valamint a megfelelő Name értékeket a Categories táblákban.Suppliers Az ProductRow és CategoryID egyaránt olvasható és írható, míg a SupplierID és a CategoryName tulajdonságok írásvédettként vannak megjelölve.

A CategoryName és SupplierName tulajdonságok írásvédett állapota miatt a megfelelő BoundFields ReadOnly tulajdonsága true értékre van állítva, ami megakadályozza, hogy ezek az értékek módosuljanak egy sor szerkesztésekor. Bár a ReadOnly tulajdonságot beállíthatjuk úgy, hogy a false alatt a CategoryName és SupplierName BoundFields szövegdobozként jelenik meg szerkesztés közben, ez a megközelítés kivételt fog eredményezni, amikor a felhasználó megpróbálja frissíteni a terméket, mivel nincs olyan UpdateProduct túlterhelési lehetőség, amely CategoryName és SupplierName bemeneteket képes fogadni. Valójában két okból nem szeretnénk ilyen túlterhelést létrehozni:

• A Products tábla nem rendelkezik SupplierName vagy CategoryName mezőkkel, de SupplierID és CategoryID. Ezért azt szeretnénk, hogy a metódusunk ezeket az azonosítóértékeket adja át, nem pedig a keresési táblák értékeit.
• Ha a felhasználónak be kell gépelnie a szállító vagy kategória nevét, az nem ideális, mivel a felhasználónak ismernie kell a rendelkezésre álló kategóriákat és szállítókat, valamint a megfelelő helyesírásukat.

A szállítói és kategóriamezőknek írásvédett módban meg kell jeleníteniük a kategóriák és a szállítók neveit (ahogy most is), valamint szerkesztéskor egy legördülő listát az alkalmazható lehetőségekről. Egy legördülő lista használatával a végfelhasználó gyorsan láthatja, hogy mely kategóriák és szállítók közül választhat, és könnyebben kiválaszthatja őket.

Ennek a viselkedésnek a biztosításához a SupplierName és a CategoryName BoundFields-t sablonmezőkké kell konvertálnunk, amelyek ItemTemplate kibocsátják a SupplierName és CategoryName értékeket, és amelyek EditItemTemplate egy DropDownList-vezérlőt használnak az elérhető kategóriák és szállítók listázásához.

A Categories és Suppliers legördülő listák hozzáadása

Kezdje azzal, hogy a SupplierName és CategoryName BoundFields mezőket Sablonmezőkké alakítja át. Ehhez kattintson a GridView intelligens címkéjén található Oszlopok szerkesztése linkre; válassza ki a BoundFieldet a bal alsó sarokban található listából, majd kattintson a "Mező átalakítása sablonmezővé" hivatkozásra. A konvertálási folyamat létrehoz egy TemplateFieldet, amely mind egy ItemTemplate, mind egy EditItemTemplate is tartalmaz, az alábbi deklaratív szintaxisban látható módon:

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

Mivel a BoundField írásvédettként lett megjelölve, mind a ItemTemplate, mind a EditItemTemplate egy címke webes vezérlőt tartalmaz, amelynek Text tulajdonsága a megfelelő adatmezőhöz van kötve (a fenti szintaxisban CategoryName). Módosítanunk kell a EditItemTemplate-t úgy, hogy a Címke webvezérlő helyett egy DropDownList vezérlőelemet használunk.

Ahogy az előző oktatóanyagokban láttuk, a sablon szerkeszthető a Tervezőn keresztül vagy közvetlenül a deklaratív szintaxisból. Ha a Tervezőn keresztül szeretné szerkeszteni, kattintson a GridView intelligens címkéjének Sablonok szerkesztése hivatkozására, és válassza a Kategória mező EditItemTemplatehasználhatóságát. Távolítsa el a Címke webvezérlőt, és cserélje le egy DropDownList-vezérlőre, és állítsa be a DropDownList azonosító tulajdonságát a következőre Categories.

5. ábra: Távolítsa el a TexBoxot, és vegyen fel egy dropDownList-et a EditItemTemplate (kattintson ide a teljes méretű kép megtekintéséhez)

Ezután fel kell töltenünk a Legördülő listát az elérhető kategóriákkal. Kattintson az Adatforrás kiválasztása hivatkozásra a DropDownList intelligens címkéjén, és válasszon egy új ObjectDataSource nevű CategoriesDataSourceobjektumot.

6. ábra: Új ObjectDataSource-vezérlő létrehozása elnevezve CategoriesDataSource (ide kattintva megtekintheti a teljes méretű képet)

Ha azt szeretné, hogy ez az ObjectDataSource az összes kategóriát visszaadja, kösse azt az CategoriesBLL osztály metódusához GetCategories() .

7. ábra: Az ObjectDataSource kötése CategoriesBLL a GetCategories()metódushoz (ide kattintva megtekintheti a teljes méretű képet)

Végül konfigurálja a DropDownList beállításait úgy, hogy a CategoryName mező megjelenjen az egyes Legördülő listákban ListItem az CategoryID értékként használt mezővel.

8. ábra: A CategoryName mező megjelenítése és értékként CategoryID való használata (kattintson ide a teljes méretű kép megtekintéséhez)

A módosítások elvégzése után a EditItemTemplate TemplateFieldben található CategoryName deklaratív jelölésnyelv tartalmazni fog egy DropDownList és egy ObjectDataSource komponenst.

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

Megjegyzés:

A EditItemTemplate legördülő lista nézetállapotának engedélyezve kell lennie. Hamarosan adatkötési szintaxist adunk hozzá a DropDownList deklaratív szintaxisához és adatkötési parancsaihoz, amelyek csak Eval()Bind() olyan vezérlőkben jelennek meg, amelyek nézetállapota engedélyezve van.

Ismételje meg ezeket a lépéseket, hogy hozzáadjon egy Suppliers DropDownList-et a SupplierName TemplateField EditItemTemplate-hez. Ehhez hozzá kell adni egy DropDownList-et, EditItemTemplate és létre kell hoznia egy másik ObjectDataSource-t. A Suppliers DropDownList ObjectDataSource-ját azonban úgy kell konfigurálni, hogy meghívja az SuppliersBLL osztály metódusát GetSuppliers() . Emellett állítsa be a Suppliers DropDownList-et úgy, hogy megjelenítse a CompanyName mezőt és a SupplierID mezőt használja értékként a ListItem számára.

Miután hozzáadta a legördülő listákat a két EditItemTemplate termékhez, töltse be az oldalt egy böngészőben, és kattintson a Chef Anton Cajun Seasoning termékének Szerkesztés gombjára. A 9. ábrán látható, hogy a termék kategória- és szállítóoszlopai legördülő listákként jelennek meg, amelyek a választható kategóriákat és szállítókat tartalmazzák. Vegye figyelembe azonban, hogy mindkét legördülő lista első elemei alapértelmezés szerint vannak kiválasztva (italok mint kategória és egzotikus folyadékok mint szállító), annak ellenére, hogy Chef Anton's Cajun Seasoning egy fűszer, amelyet a New Orleans Cajun Delights biztosít.

9. ábra: A Drop-Down listák első eleme alapértelmezés szerint ki van jelölve (kattintson ide a teljes méretű kép megtekintéséhez)

Továbbá, ha a Frissítés gombra kattint, azt fogja tapasztalni, hogy a termék CategoryID és SupplierID az értékek értéke a következőre NULLvan állítva: . Mindkét nem kívánt viselkedést az okozza, hogy az s legördülő listái EditItemTemplate nincsenek az alapul szolgáló termékadatok adatmezőihez kötve.

A legördülő listák összekapcsolása az CategoryID és SupplierID adatmezőkkel

Ahhoz, hogy a szerkesztett termék kategóriája és szállítói legördülő listája a megfelelő értékekre legyen állítva, és hogy ezek az értékek visszakerüljenek a BLL metódusába UpdateProduct az Update gombra kattintva, a DropDownLists tulajdonságait kétirányú adatkötéssel kell összekapcsolnunk az SelectedValue adatmezőkkelCategoryID.SupplierID Categories közvetlenül a deklaratív szintaxishoz is hozzáadható a SelectedValue='<%# Bind("CategoryID") %>' DropDownList használatával.

Másik lehetőségként beállíthatja a DropDownList adatkötéseit úgy is, hogy szerkeszti a sablont a Tervezőn keresztül, és a DropDownList intelligens címkéjének DataBindings szerkesztése hivatkozására kattint. Ezután jelezze, hogy a SelectedValue tulajdonságot kétirányú adatkötéssel kell a mezőhöz CategoryID kötni (lásd a 10. ábrát). Ismételje meg a deklaratív vagy tervezői folyamatot, hogy az adatmezőt SupplierID a Suppliers DropDownListhez kösse.

10. ábra: Kötés a CategoryID legördülő lista tulajdonságához SelectedValue Two-Way adatkötéssel (ide kattintva megtekintheti a teljes méretű képet)

Miután a kötéseket alkalmazták a SelectedValue két Legördülő lista tulajdonságaira, a szerkesztett termék kategória- és szállítóoszlopai alapértelmezés szerint az aktuális termék értékeire kerülnek. Frissítésre kattintva a kijelölt legördülő listaelem CategoryID és SupplierID értékei átadásra kerülnek a UpdateProduct metódusnak. A 11. ábra bemutatja a bemutatót az adatkötési utasítások hozzáadása után; figyelje meg, hogy a 'Chef Anton's Cajun Seasoning' legördülő listán kiválasztott elemek helyesen 'Condiment' és 'New Orleans Cajun Delights'.

11. ábra: A szerkesztett termék aktuális kategóriája és szállítói értékei alapértelmezés szerint ki vannak választva (kattintással megtekintheti a teljes méretű képet)

Értékek kezeléseNULL

A CategoryID táblázat SupplierID és Products oszlopai lehetnek NULL, de a EditItemTemplate-ban található legördülő listák nem tartalmaznak listaelemeket, amelyek egy NULL értéket ábrázolnának. Ennek két következménye van:

• A felhasználó nem használhatja a felületünket arra, hogy egy termék kategóriáját vagy szállítóját egy nem-NULL értékről NULL értékre módosítsa.
• Ha egy termék rendelkezik NULL, CategoryID vagy SupplierID, a Szerkesztés gombra kattintva kivételt eredményez. Ennek az az oka, hogy az NULL utasítás által CategoryID visszaadott SupplierID (vagy Bind()) érték nem felel meg a DropDownList egyik értékének (a DropDownList kivételt okoz, ha a tulajdonsága SelectedValue olyan értékre van beállítva, amely nem szerepel a listaelemek gyűjteményében).

Annak érdekében, hogy támogatni tudjuk a NULL, CategoryID és SupplierID értékeket, hozzá kell adnunk minden DropDownList-hez egy további ListItem-ot, amely az NULL értéket képviseli. A Master/Detail szűrése DropDownList segítségével című oktatóanyagban láthattuk, hogyan lehet egy adathoz kötött DropDownList-hez további ListItem elemet hozzáadni, ami a DropDownList AppendDataBoundItems tulajdonságának true értékre állításával és az extra ListItem manuális hozzáadásával történik. Az előző oktatóanyagban azonban hozzáadtunk egy ListItem, amelynek Value a -1. A ASP.NET adatkötési logikája azonban automatikusan átalakít egy üres sztringet értékké NULL , és fordítva. Ezért ebben az oktatóanyagban azt szeretnénk, hogy az ListItemValue egy üres karakterlánc legyen.

Először állítsa be mindkét DropDownLists tulajdonságait AppendDataBoundItems értékre true. Ezután adja hozzá a következő NULL elemet a DropDownList-ekhez, hogy a deklaratív jelölés a következőképpen nézzen ki:

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

Úgy döntöttem, hogy a(z) "(None)" értéket használom a szövegértékként, ListItemde ha szeretné, módosíthatja üres sztringként is.

Megjegyzés:

Ahogy a Mester/Részletek szűrése a DropDownList oktatóanyagban láttuk, ListItem elemeket adhat hozzá a DropDownList-hez a Tervezőn keresztül, a DropDownList Items tulajdonságára kattintva a Tulajdonságok ablakban (ami megjeleníti a ListItem Gyűjteményszerkesztőt). A NULLListItem elemeket azonban mindenképpen adja hozzá ehhez az oktatóanyaghoz a deklaratív szintaxis használatával. Ha a Gyűjteményszerkesztőt ListItem használja, az elkészült deklaratív szintaxis kompletten kihagyja a Value beállítást, ha egy üres karakterláncot rendel hozzá, és így jelölőnyelvi markupot állít elő, például: <asp:ListItem>(None)</asp:ListItem>. Bár ez ártalmatlannak tűnhet, a hiányzó érték miatt a DropDownList a helyén használja a Text tulajdonságértéket. Ez azt jelenti, hogy ha ez NULLListItem ki van választva, a "(None)" értéket a rendszer megpróbálja hozzárendelni a CategoryID(nincs) értékhez, ami kivételt eredményez. Ha explicit módon beállítja a Value="", a NULL érték lesz hozzárendelve a CategoryID amikor a NULLListItem ki van választva.

Ismételje meg ezeket a lépéseket a Szállítók legördülő listához.

Ezzel a további ListItemlehetőséggel a szerkesztőfelület mostantól értékeket rendelhet NULL egy termékhez CategoryID és SupplierID a mezőkhöz a 12. ábrán látható módon.

12. ábra: Válassza a (Nincs) lehetőséget egy termék kategóriájának vagy szállítójának értékének hozzárendeléséhez NULL (ide kattintva megtekintheti a teljes méretű képet)

4. lépés: A RadioButtons használata a megszűnt állapothoz

A termékek adatmezője Discontinued jelenleg egy Jelölőnégyzetmezővel van kifejezve, amely letiltott jelölőnégyzetet jelenít meg az írásvédett sorokhoz, valamint a szerkesztett sor engedélyezett jelölőnégyzetét. Bár ez a felhasználói felület gyakran megfelelő, igény szerint testre szabhatjuk egy TemplateField használatával. Ebben az oktatóanyagban módosítsa a CheckBoxFieldet egy Olyan TemplateFieldre, amely egy RadioButtonList vezérlőt használ két "Aktív" és "Megszűnt" beállítással, amelyekből a felhasználó megadhatja a termék Discontinued értékét.

Először konvertálja a Discontinued CheckBoxFieldet egy TemplateFielddé, amely egy ItemTemplate és egy EditItemTemplate-t fog tartalmazni. Mindkét sablon tartalmaz egy jelölőnégyzetet, amelynek tulajdonsága a Checked az Discontinued adatmezőhöz van kötve. Az egyetlen különbség a kettő között, hogy a ItemTemplate jelölőnégyzet Enabled tulajdonsága false értékre van állítva.

Cserélje le a jelölőnégyzeteket mind a ItemTemplate és EditItemTemplate vezérlőkben RadioButtonList vezérlőkre, és mindkét RadioButtonList ID tulajdonságát állítsa DiscontinuedChoice-ra. Ezután jelezze, hogy minden rádiógomblistának két rádiógombot kell tartalmaznia: egy "Aktív" feliratút, "Hamis" értékkel, és egy "Megszűnt" feliratút, "Igaz" értékkel. Ehhez közvetlenül a <asp:ListItem> deklaratív szintaxison keresztül, vagy a ListItem Tervező Gyűjteményszerkesztőjével adhatja meg az elemeket. A 13. ábrán a ListItem Gyűjteményszerkesztő látható a két választógomb-beállítás megadása után.

13. ábra: "Aktív" és "Megszűnt" beállítások hozzáadása a RadioButtonListhez (kattintson ide a teljes méretű kép megtekintéséhez)

Mivel a ItemTemplate RadioButtonList nem szerkeszthető, állítsa be a Enabled tulajdonságát false-re, és hagyja meg a Enabled tulajdonság értékét true-ként (az alapértelmezett) a RadioButtonList esetében EditItemTemplate. Így a nem szerkesztett sorban lévő választógombok írásvédettek lesznek, de a felhasználó módosíthatja a szerkesztett sor RadioButton-értékeit.

Továbbra is ki kell rendelnünk a RadioButtonList vezérlők SelectedValue tulajdonságait, hogy a termék adatmezője Discontinued alapján a megfelelő választógomb legyen kiválasztva. Az oktatóanyag korábbi részében megvizsgált Legördülő listákhoz hasonlóan ez az adatkötési szintaxis közvetlenül a deklaratív jelölőnyelvben vagy a RadioButtonLists okos címkéiben található DataBindings szerkesztése link segítségével is hozzáadható.

A két RadioButtonList hozzáadása és konfigurálása után a Discontinued TemplateField deklaratív jelölésének a következőképpen kell kinéznie:

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

Ezekkel a módosításokkal az Discontinued oszlop a jelölőnégyzetek listájáról a választógombpárok listájára lett átalakítva (lásd a 14. ábrát). A termék szerkesztésekor a megfelelő választógomb lesz kiválasztva, és a termék megszűnt állapota frissíthető a másik választógomb kiválasztásával, majd a Frissítés gombra kattintva.

14. ábra: A megszüntetett jelölőnégyzeteket felváltották a választógombpárok (kattintson ide a teljes méretű kép megtekintéséhez)

Megjegyzés:

Mivel a Discontinued adatbázisban lévő Products oszlop nem rendelkezhet NULL értékekkel, nem kell aggódnunk NULL információ rögzítésével a felületen. Ha azonban az Discontinued oszlop tartalmazhat NULL értékeket, szeretnénk egy harmadik választógombot hozzáadni a listához, amelynek Value egy üres karakterláncra van állítva (Value=""), ugyanúgy, mint a kategória és a szállító legördülő listáinál.

Összefoglalás

Bár a BoundField és a CheckBoxField automatikusan csak olvasási, szerkesztési és beszúrási felületeket jelenít meg, nem rendelkeznek a testreszabási képességekkel. Gyakran azonban testre kell szabnunk a szerkesztő- vagy beszúró felületet, esetleg érvényesítési vezérlőket kell hozzáadnunk (ahogy az előző oktatóanyagban láttuk), vagy az adatgyűjtés felhasználói felületének testreszabásával (ahogy az oktatóanyagban láttuk). A sablonmezővel rendelkező felület testreszabása az alábbi lépésekben foglalható össze:

1. Sablonmező hozzáadása vagy meglévő BoundField vagy CheckBoxField átalakítása Sablonmezővé
2. Szükség szerint bővítse a felületet
3. A megfelelő adatmezők kötése az újonnan hozzáadott webvezérlőkhöz kétirányú adatkötéssel

A beépített ASP.NET webvezérlők használata mellett testre is szabhatja a TemplateField sablonjait egyéni, lefordított kiszolgálóvezérlőkkel és felhasználói vezérlőkkel.

Boldog programozást!

Tudnivalók a szerzőről

Scott Mitchell, hét ASP/ASP.NET-könyv szerzője és a 4GuysFromRolla.com alapítója, 1998 óta dolgozik a Microsoft webtechnológiáival. Scott független tanácsadóként, edzőként és íróként dolgozik. Legújabb könyve Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Itt érhető el mitchell@4GuysFromRolla.com.

Előzőkövetkező