A FormView-sablonok (VB) használata

A DetailsView nézettől eltérően a FormView nem mezőkből áll. Ehelyett a FormView sablonokkal jelenik meg. Ebben az oktatóanyagban a FormView vezérlővel vizsgáljuk meg az adatok kevésbé merev megjelenítését.

Bevezetés

Az utolsó két oktatóanyagban láttuk, hogyan szabhatja testre a GridView és a DetailsView vezérlők kimenetét a TemplateFields használatával. A TemplateFields lehetővé teszi, hogy egy adott mező tartalma nagymértékben testre szabható legyen, de a Végén mind a GridView, mind a DetailsView meglehetősen dobozos, rácsszerű megjelenésű. Sok esetben az ilyen rácsszerű elrendezés ideális, de időnként folyékonyabb, kevésbé merev kijelzőre van szükség. Egyetlen rekord megjelenítésekor a FormView vezérlővel ilyen folyadékelrendezés lehetséges.

A DetailsView nézettől eltérően a FormView nem mezőkből áll. A FormView-hoz nem vehet fel BoundFieldet vagy TemplateFieldet. Ehelyett a FormView sablonokkal jelenik meg. A FormView-t olyan DetailsView-vezérlőnek tekintheti, amely egyetlen TemplateFieldet tartalmaz. A FormView a következő sablonokat támogatja:

ItemTemplate a FormView-ban megjelenített adott rekord megjelenítésére szolgál
HeaderTemplate nem kötelező fejlécsor megadására szolgál
FooterTemplate nem kötelező láblécsor megadására szolgál
EmptyDataTemplate amikor a FormView DataSource nem rendelkezik rekordokkal, a rendszer a EmptyDataTemplate használja a ItemTemplate helyett a vezérlő jelöléseinek megjelenítéséhez.
PagerTemplate a lapozást engedélyező FormViews lapozási felületének testreszabásához használható
EditItemTemplate / InsertItemTemplate az ilyen funkciókat támogató FormViews szerkesztőfelületének testreszabására vagy beszúrására szolgál

Ebben az oktatóanyagban a FormView vezérlővel vizsgáljuk meg a termékek kevésbé merev megjelenítését. A név, kategória, szállító stb. mezői helyett a FormView-okon ItemTemplate ezek az értékek egy fejlécelem és <table> egy (lásd az 1. ábrát) kombinációjával jelennek meg.

1. ábra: A FormView kiszakad a részletek nézetében látható Grid-Like elrendezésből (kattintson ide a teljes méretű kép megtekintéséhez)

1. lépés: Az adatok kötése a FormView-hoz

Nyissa meg a FormView.aspx oldalt, és húzzon egy FormView-t az eszköztárból a Tervezőre. Amikor először hozzáadjuk a FormView-t, szürke mezőként jelenik meg, amely arra utasít, hogy szükség van egy ItemTemplate-re.

2. ábra: A FormView nem jeleníthető meg a Tervezőben, amíg ItemTemplate nincs megadva (kattintson ide a teljes méretű kép megtekintéséhez)

Ez ItemTemplate kézzel (deklaratív szintaxissal) hozható létre, vagy automatikusan létrehozható úgy, hogy a FormView-t egy adatforrás-vezérlőhöz köti a Tervezőn keresztül. Ez az automatikusan létrehozott ItemTemplate HTML tartalmazza az egyes mezők nevét és egy Címke vezérlőelemet, amelynek Text tulajdonsága a mező értékéhez van kötve. Ez a megközelítés automatikusan létrehoz egy InsertItemTemplate és egy EditItemTemplate, mindkettőt bemeneti vezérlőkkel ellátva az adatforrásvezérlő által visszaadott adatmezők számára.

Ha automatikusan létre szeretné hozni a sablont, a FormView intelligens címkéje alapján adjon hozzá egy új ObjectDataSource-vezérlőt, amely meghívja az ProductsBLL osztály metódusát GetProducts() . Ezzel létrehoz egy FormView-t, amely tartalmaz egy ItemTemplate, egy InsertItemTemplate, és egy EditItemTemplate. A Forrás nézetben távolítsa el azokat, InsertItemTemplate és EditItemTemplate mivel nem szeretnénk olyan FormView-t létrehozni, amely még támogatja a szerkesztést vagy a beszúrást. Ezután törölje a jelöléseket a ItemTemplate belül, hogy tiszta lappal dolgozhassunk.

Ha inkább manuálisan szeretné létrehozni az ItemTemplate objektumot, hozzáadhatja és konfigurálhatja az ObjectDataSource-t az eszközkészletből a Tervezőbe húzva. Ne állítsa be azonban a FormView adatforrását a Tervezőből. Ehelyett lépjen a Forrás nézetre, és állítsa manuálisan a FormView tulajdonságát DataSourceID az ID ObjectDataSource értékére. Ezután adja hozzá manuálisan a ItemTemplate.

Függetlenül attól, hogy milyen megközelítést választotta, ezen a ponton a FormView deklaratív korrektúrája a következőképpen fog kinézni:

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1">
    <ItemTemplate>

    </ItemTemplate>
</asp:FormView>

Szánjon egy kis időt a Lapozás engedélyezése jelölőnégyzet bejelölésére a FormView intelligens címkéjében; ez hozzáadja az AllowPaging="True" attribútumot a FormView deklaratív szintaxisához. Emellett állítsa a EnableViewState tulajdonságot False (Hamis) értékre.

2. lépés: A jelölés`ItemTemplate` meghatározása

A FormView az ObjectDataSource vezérlőhöz van kötve, és úgy van konfigurálva, hogy támogassa a lapozást, ezért készen állunk arra, hogy megadjuk a ItemTemplate tartalmát. Ebben az oktatóanyagban jelenítse meg a termék nevét egy <h3> címsorban. Ezt követően használjunk egy HTML-t <table> a fennmaradó terméktulajdonságok megjelenítéséhez egy négyoszlopos táblában, ahol az első és a harmadik oszlop felsorolja a tulajdonságneveket, a második és a negyedik pedig az értékeket.

Ez a korrektúra beírható a FormView sablonszerkesztő felületén a Tervezőben, vagy manuálisan is beírható a deklaratív szintaxison keresztül. Amikor sablonokkal dolgozik, általában gyorsabban dolgozom közvetlenül a deklaratív szintaxissal, de nyugodtan használhat bármilyen technikát, amellyel a legkényelmesebb.

Az alábbi korrektúra a FormView deklaratív korrektúrát mutatja a ItemTemplatestruktúra befejezése után:

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1"
    AllowPaging="True" EnableViewState="False">
    <ItemTemplate>
        <hr />
        <h3><%# Eval("ProductName") %></h3>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("CategoryName") %></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("SupplierName")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Price:</td>
                <td class="ProductPropertyValue"><%# Eval("UnitPrice",
                  "{0:C}") %></td>
                <td class="ProductPropertyLabel">Units In Stock:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("UnitsInStock")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Units On Order:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("UnitsOnOrder") %></td>
                <td class="ProductPropertyLabel">Reorder Level:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("ReorderLevel")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit</td>
                <td class="ProductPropertyValue">
                  <%# Eval("QuantityPerUnit") %></td>
                <td class="ProductPropertyLabel">Discontinued:</td>
                <td class="ProductPropertyValue">
                    <asp:CheckBox runat="server" Enabled="false"
                      Checked='<%# Eval("Discontinued") %>' />
                </td>
            </tr>
        </table>
        <hr />
    </ItemTemplate>
</asp:FormView>

Figyelje meg, hogy az adatkötés szintaxisa – <%# Eval("ProductName") %>például közvetlenül a sablon kimenetébe injektálható. Vagyis nem kell hozzárendelni egy Címke vezérlőelem tulajdonságához Text . Például az ProductName érték megjelenik egy <h3> elemben, amely a Chai termék esetében <h3><%# Eval("ProductName") %></h3> használatával <h3>Chai</h3> formában lesz megjelenítve.

A ProductPropertyLabel és ProductPropertyValue CSS-osztályok a terméktulajdonságok nevének és értékeinek stílusának megadására szolgálnak a <table>. Ezek a CSS-osztályok definiálva vannak Styles.css-ban, a tulajdonságnevek félkövér és jobbra igazítottak formátumot kapnak, valamint jobb oldali kitöltést adnak a tulajdonságértékekhez.

Mivel a FormView-ban nem érhetők el jelölőnégyzetmezők, az Discontinued érték jelölőnégyzetként való megjelenítéséhez hozzá kell adnunk a saját Jelölőnégyzet vezérlőt. A Enabled tulajdonság értéke Hamis, ami miatt írásvédett, és a Jelölőnégyzet Checked tulajdonsága az Discontinued adatmező értékéhez van kötve.

Miután a ItemTemplate elkészült, a termékinformáció sokkal zökkenőmentesebb módon jelenik meg. Hasonlítsa össze az utolsó oktatóanyag DetailsView-kimenetét (3. ábra) az oktatóanyagBan a FormView által létrehozott kimenettel (4. ábra).

3. ábra: A Merev DetailsView kimenet (kattintson ide a teljes méretű kép megtekintéséhez)

4. ábra: A Fluid FormView kimenet (kattintson ide a teljes méretű kép megtekintéséhez)

Összefoglalás

Bár a GridView és a DetailsView vezérlők kimenete testre szabható a TemplateFields használatával, mindkettő rácsszerű, dobozos formátumban jeleníti meg az adatokat. Azokban az esetekben, amikor egy rekordot kevésbé merev elrendezéssel kell megjeleníteni, a FormView ideális választás. A DetailsView-hoz hasonlóan a FormView is egyetlen rekordot jelenít meg annak DataSourceadataiból, de a DetailsView-val ellentétben csak sablonokból áll, és nem támogatja a mezőket.

Ahogy ebben az oktatóanyagban láttuk, a FormView lehetővé teszi a rugalmasabb elrendezést egyetlen rekord megjelenítésekor. A jövőbeni oktatóanyagokban megvizsgáljuk a DataList és az Repeater vezérlőket, amelyek ugyanolyan rugalmasságot biztosítanak, mint a FormsView, de több rekordot is megjeleníthetnek (például a GridView-t).

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 Tanuld meg ASP.NET 2.0 24 óra alatt. Ő itt elérhető mitchell@4GuysFromRolla.com.

Külön köszönet

Ezt az oktatóanyag-sorozatot sok hasznos véleményező áttekintette. Az oktatóanyag vezető véleményezője E.R. Gilmore volt. Szeretné áttekinteni a közelgő MSDN-cikkeimet? Ha igen, írj egy sort a mitchell@4GuysFromRolla.com-ra.

Előző Következő

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-05-05