Sdílet prostřednictvím

Použití šablon FormView (VB)

od Scotta Mitchella

Stáhnout PDF

Na rozdíl od DetailsView není FormView složen z polí. Místo toho se FormView vykresluje pomocí šablon. V tomto kurzu prozkoumáme použití ovládacího prvku FormView k prezentaci méně tuhé zobrazení dat.

Úvod

V posledních dvou kurzech jsme viděli, jak přizpůsobit výstupy ovládacích prvků GridView a DetailsView pomocí TemplateFields. TemplateFields umožňují, aby obsah pro určité pole mohl být vysoce přizpůsoben, ale nakonec mají jak GridView, tak DetailsView poměrně krabicový, mřížkový vzhled. V mnoha případech je rozložení připomínající mřížku ideální, ale někdy je potřeba pružnější a méně striktní zobrazení. Při zobrazení jednoho záznamu je takové flexibilní rozložení možné díky ovládacímu prvku FormView.

Na rozdíl od DetailsView není FormView složen z polí. Do objektu FormView nelze přidat pole BoundField ani TemplateField. Místo toho se FormView vykresluje pomocí šablon. FormView si můžete představit jako ovládací prvek DetailsView, který obsahuje jedno TemplateField. FormView podporuje následující šablony:

  • ItemTemplate slouží k vykreslení konkrétního záznamu zobrazeného v ovládacím prvku FormView.
  • HeaderTemplate slouží k zadání volitelného řádku záhlaví.
  • FooterTemplate slouží k zadání volitelného řádku zápatí.
  • EmptyDataTemplate když FormView DataSource neobsahuje žádné záznamy, EmptyDataTemplate se použije místo ItemTemplate pro vykreslení HTML kódu ovládacího prvku.
  • PagerTemplate lze použít k přizpůsobení stránkovacího rozhraní pro Objekty FormView s povoleným stránkováním.
  • EditItemTemplate / InsertItemTemplate slouží k přizpůsobení rozhraní pro úpravy nebo vkládání rozhraní pro FormViews, které podporují tyto funkce.

V tomto kurzu prozkoumáme použití ovládacího prvku FormView k prezentaci méně tuhé zobrazení produktů. Místo toho, aby pole pro název, kategorii, dodavatele a tak dále zobrazovala formView ItemTemplate tyto hodnoty pomocí kombinace elementu záhlaví a a <table> (viz obrázek 1).

FormView se vymyká rozložení Grid-Like, které je součástí zobrazení DetailsView.

Obrázek 1: FormView překračuje rozložení Grid-Like používané v DetailsView (kliknutím zobrazíte obrázek v plné velikosti).

Krok 1: Vytvoření vazby dat k objektu FormView

FormView.aspx Otevřete stránku a přetáhněte objekt FormView ze sady nástrojů do Návrháře. Při prvním přidání objektu FormView se zobrazí jako šedé pole s pokynem, že ItemTemplate je potřeba.

Objekt FormView nelze vykreslit v Návrháři, dokud není k dispozici položka ItemTemplate.

Obrázek 2: FormView nelze vykreslit v návrháři, dokud ItemTemplate není k dispozici (kliknutím zobrazíte obrázek v plné velikosti).

Lze ItemTemplate vytvořit ručně (prostřednictvím deklarativní syntaxe) nebo lze automaticky vytvořit vazbou FormView na ovládací prvek zdroje dat prostřednictvím Návrháře. Tento automaticky vytvořený ItemTemplate obsahuje HTML kód, který uvádí názvy jednotlivých polí a ovládací prvek Popisek, jehož vlastnost Text je svázána s hodnotou pole. Tento přístup také automaticky vytvoří InsertItemTemplate a EditItemTemplate, které jsou oba naplněny vstupními prvky pro každé datové pole vrácené řízením zdroje dat.

Pokud chcete šablonu automaticky vytvořit, z inteligentní značky FormView přidejte nový ovládací prvek ObjectDataSource, který vyvolá metodu ProductsBLLGetProducts() třídy. Tím se vytvoří FormView s objektem ItemTemplate, InsertItemTemplatea EditItemTemplate. Z pohledu na zdroj odeberte InsertItemTemplate a EditItemTemplate, protože zatím nemáme zájem vytvořit FormView, který by podporoval úpravy nebo vkládání. Následně vyčistěte značky v rámci ItemTemplate, abychom měli čistý výchozí stav, ze kterého můžeme pracovat.

Pokud chcete raději vytvořit ItemTemplate ručně, můžete přidat a nakonfigurovat ObjectDataSource přetažením ze sady nástrojů do Návrháře. Nenastavujte však zdroj dat FormView z Návrháře. Místo toho přejděte do zobrazení Source a ručně nastavte vlastnost DataSourceID ovládacího prvku FormView na hodnotu ID ObjectDataSource. Dále ručně přidejte ItemTemplate.

Bez ohledu na to, jaký přístup jste se rozhodli provést, by v tomto okamžiku deklarativní kód FormView měl vypadat takto:

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

    </ItemTemplate>
</asp:FormView>

Věnujte chvíli a v inteligentní značce FormView zaškrtněte políčko Povolit stránkování; tím se přidá atribut AllowPaging="True" do deklarativní syntaxe FormView. Také nastavte EnableViewState vlastnost na False.

Krok 2: DefinováníItemTemplate značkování

S FormView, který je vázaný na ovládací prvek ObjectDataSource a nakonfigurován pro podporu stránkování, jsme připraveni určit obsah pro ItemTemplate. Pro tento tutoriál nechme název produktu zobrazen v nadpisu <h3>. Za tímto účelem pomocí html <table> zobrazíme zbývající vlastnosti produktu v tabulce se čtyřmi sloupci, kde první a třetí sloupce uvádějí názvy vlastností a druhý a čtvrtý seznam jejich hodnot.

Tento kód lze zadat prostřednictvím rozhraní pro úpravy šablony FormView v Návrháři nebo ručně prostřednictvím deklarativní syntaxe. Při práci s šablonami obvykle je pro mě rychlejší pracovat přímo s deklarativní syntaxí, ale neváhejte použít jakoukoli techniku, která je vám nejpohodlnější.

Následující značkovací kód ukazuje deklarativní kód FormView po ItemTemplate dokončení struktury:

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

Všimněte si, že syntaxe vazby dat – <%# Eval("ProductName") %>například lze vložit přímo do výstupu šablony. To znamená, že nemusí být přiřazena k vlastnosti Text ovládacího prvku Popisek. Máme například ProductName hodnotu zobrazenou v elementu <h3> pomocí <h3><%# Eval("ProductName") %></h3>, což se pro produkt Chai vykreslí jako <h3>Chai</h3>.

Třídy ProductPropertyLabel CSS ProductPropertyValue se používají k určení stylu názvů a hodnot vlastností produktu v objektu <table>. Tyto třídy CSS jsou definovány v Styles.css a způsobují, že názvy vlastností budou tučné a zarovnané doprava, a přidají odsazení doprava k hodnotám vlastností.

Vzhledem k tomu, že pro FormView nejsou k dispozici žádné CheckBoxFields, abychom mohli zobrazit Discontinued hodnotu jako zaškrtávací políčko, musíme přidat vlastní ovládací prvek CheckBox. Vlastnost Enabled je nastavena na False, takže je určena jen pro čtení a vlastnost CheckBox Checked je vázána na hodnotu datového Discontinued pole.

ItemTemplate Po dokončení se informace o produktu zobrazují mnohem plynulejším způsobem. Porovnejte výstup DetailsView z posledního kurzu (obrázek 3) s výstupem vygenerovaným objektem FormView v tomto kurzu (obrázek 4).

Fixní výstup DetailsView

Obrázek 3: Pevný výstup DetailsView (kliknutím zobrazíte obrázek s plnou velikostí)

Výstup Fluid FormView

Obrázek 4: Výstup Fluid FormView (kliknutím zobrazíte obrázek s plnou velikostí)

Shrnutí

I když ovládací prvky GridView a DetailsView mohou mít svůj výstup přizpůsobený pomocí TemplateFields, oba stále prezentují svá data ve formátu podobném mřížce. Pro tyto časy, kdy je třeba zobrazit jeden záznam pomocí méně tuhé rozložení, je FormView ideální volbou. Podobně jako DetailsView vykreslí FormView jeden záznam z jeho DataSource, ale na rozdíl od DetailsView se skládá pouze ze šablon a nepodporuje pole.

Jak jsme viděli v tomto kurzu, FormView umožňuje flexibilnější rozložení při zobrazení jednoho záznamu. V budoucích kurzech prozkoumáme ovládací prvky DataList a Repeater, které poskytují stejnou úroveň flexibility jako FormsView, ale dokážou zobrazit více záznamů (například GridView).

Šťastné programování!

O autorovi

Scott Mitchell, autor sedmi knih ASP/ASP.NET a zakladatel 4GuysFromRolla.com, pracuje s webovými technologiemi Microsoftu od roku 1998. Scott pracuje jako nezávislý konzultant, trenér a spisovatel. Jeho nejnovější kniha je Sams: Nauč se ASP.NET 2.0 za 24 hodin. Může být dosažitelný na mitchell@4GuysFromRolla.comadrese .

Zvláštní díky

Tato série kurzů byla zkontrolována mnoha užitečnými recenzenty. Vedoucím recenzentem tohoto návodu byl E.R. Gilmore. Chcete si projít nadcházející články MSDN? Pokud ano, napište mi zprávu na mitchell@4GuysFromRolla.com.

předchozíDalší

  • Last updated on