FormView 'un şablonlarını (C#) kullanmaUsing the FormView's Templates (C#)

Scott Mitchell tarafındanby Scott Mitchell

Örnek uygulamayı indirin veya PDF 'yi indirinDownload Sample App or Download PDF

DetailsView 'un aksine FormView, alanlardan oluşamaz.Unlike the DetailsView, the FormView is not composed of fields. Bunun yerine, FormView şablonlar kullanılarak işlenir.Instead, the FormView is rendered using templates. Bu öğreticide, verilerin daha az rigıd görüntüsünü sunmak için FormView denetimini kullanmayı inceleyeceğiz.In this tutorial we'll examine using the FormView control to present a less rigid display of data.

GirişIntroduction

Son iki öğreticilerde, GridView ' i özelleştirmeyi ve DetailsView ' ın TemplateFields kullanarak çıktıları denetimlerini nasıl özelleştireceğinizi gördünüz.In the last two tutorials we saw how to customize the GridView and DetailsView controls' outputs using TemplateFields. TemplateFields, belirli bir alanın içeriğinin yüksek bir şekilde özelleştirilmeye olanak tanır, ancak sonunda hem GridView hem de DetailsView, kılavuz benzeri bir görünüm ' e sahiptir.TemplateFields allow for the contents for a specific field to be highly customized, but in the end both the GridView and DetailsView have a rather boxy, grid-like appearance. Birçok senaryo için, ızgara benzeri düzen idealdir, ancak daha akıcı, daha az rigıd görüntüleme gerekir.For many scenarios such a grid-like layout is ideal, but at times a more fluid, less rigid display is needed. Tek bir kayıt görüntülenirken, FormView denetimi kullanılarak akıcı bir düzen mümkündür.When displaying a single record, such a fluid layout is possible using the FormView control.

DetailsView 'un aksine FormView, alanlardan oluşamaz.Unlike the DetailsView, the FormView is not composed of fields. Bir FormView 'a bir BoundField veya TemplateField ekleyemezsiniz.You can't add a BoundField or TemplateField to a FormView. Bunun yerine, FormView şablonlar kullanılarak işlenir.Instead, the FormView is rendered using templates. FormView öğesini tek bir TemplateField içeren bir DetailsView denetimi olarak düşünün.Think of the FormView as a DetailsView control that contains a single TemplateField. FormView aşağıdaki şablonları destekler:The FormView supports the following templates:

  • FormView 'da görüntülenecek olan belirli kaydı oluşturmak için kullanılan ItemTemplateItemTemplate used to render the particular record displayed in the FormView
  • isteğe bağlı üst bilgi satırını belirtmek için kullanılan HeaderTemplateHeaderTemplate used to specify an optional header row
  • isteğe bağlı bir altbilgi satırını belirtmek için kullanılan FooterTemplateFooterTemplate used to specify an optional footer row
  • FormView 'un DataSource hiçbir kayıt olmadığında EmptyDataTemplate, EmptyDataTemplate denetimin işaretlemesini işlemek için ItemTemplate yerine kullanılırEmptyDataTemplate when the FormView's DataSource lacks any records, the EmptyDataTemplate is used in place of the ItemTemplate for rendering the control's markup
  • PagerTemplate, sayfalama etkinleştirilmiş olan FormViews için sayfalama arabirimini özelleştirmek için kullanılabilirPagerTemplate can be used to customize the paging interface for FormViews that have paging enabled
  • EditItemTemplate / InsertItemTemplate, bu işlevselliği destekleyen FormViews için Düzenle arabirimini veya ekleme arabirimini özelleştirmek için kullanılırEditItemTemplate / InsertItemTemplate used to customize the editing interface or inserting interface for FormViews that support such functionality

Bu öğreticide, ürünlerin daha az rigıd görüntüsünü sunmak için FormView denetimini kullanmayı inceleyeceğiz.In this tutorial we'll examine using the FormView control to present a less rigid display of products. Ad, kategori, tedarikçi ve benzeri alanları yerine, FormView 'un ItemTemplate, bir üst bilgi öğesinin ve bir <table> birleşimini kullanarak bu değerleri gösterir (bkz. Şekil 1).Rather than having fields for the name, category, supplier, and so on, the FormView's ItemTemplate will show these values using a combination of a header element and a <table> (see Figure 1).

DetailsView 'da görülen kılavuza benzer düzenin FormView 'un sonlarını The FormView Breaks Out of the Grid-Like Layout Seen in the DetailsView

Şekil 1: FormView, DetailsView 'Da görülen kılavuza benzer düzende kesilir (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 1: The FormView Breaks Out of the Grid-Like Layout Seen in the DetailsView (Click to view full-size image)

1. Adım: verileri FormView 'a bağlamaStep 1: Binding the Data to the FormView

FormView.aspx sayfasını açın ve araç kutusundan bir FormView öğesini tasarımcı üzerine sürükleyin.Open the FormView.aspx page and drag a FormView from the Toolbox onto the Designer. İlk olarak FormView eklendiğinde, bir ItemTemplate gerekli olduğunu belirten bir gri kutu olarak görünür.When first adding the FormView it appears as a gray box, instructing us that an ItemTemplate is needed.

ItemTemplate sağlanana kadar tasarımcı 'da IşlenemiyorThe FormView Cannot be Rendered in the Designer Until an ItemTemplate is Provided

Şekil 2: FormView bir ItemTemplate sağlanana kadar tasarımcı 'da işlenemiyor (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 2: The FormView Cannot be Rendered in the Designer Until an ItemTemplate is Provided (Click to view full-size image)

ItemTemplate el ile oluşturulabilir (bildirim temelli söz dizimi aracılığıyla) veya FormView, tasarımcı aracılığıyla bir veri kaynağı denetimine bağlayarak otomatik olarak oluşturulabilir.The ItemTemplate can be created by hand (through the declarative syntax) or can be auto-created by binding the FormView to a data source control through the Designer. Bu otomatik oluşturulan ItemTemplate her alanın adını ve Text özelliği alanın değerine bağlanan bir etiket denetimini listeleyen HTML içerir.This auto-created ItemTemplate contains HTML that lists the name of each field and a Label control whose Text property is bound to the field's value. Bu yaklaşım ayrıca, her ikisi de veri kaynağı denetimi tarafından döndürülen her bir veri alanı için giriş denetimleriyle doldurulan bir InsertItemTemplate ve EditItemTemplateotomatik olarak oluşturur.This approach also auto-creates an InsertItemTemplate and EditItemTemplate, both of which are populated with input controls for each of the data fields returned by the data source control.

Şablonu otomatik oluşturmak istiyorsanız, FormView 'un akıllı etiketinden ProductsBLL sınıfının GetProducts() yöntemini çağıran yeni bir ObjectDataSource denetimi ekleyin.If you want to auto-create the template, from the FormView's smart tag add a new ObjectDataSource control that invokes the ProductsBLL class's GetProducts() method. Bu, bir ItemTemplate, InsertItemTemplateve EditItemTemplateile bir FormView oluşturacaktır.This will create a FormView with an ItemTemplate, InsertItemTemplate, and EditItemTemplate. Kaynak görünümünden InsertItemTemplate ve EditItemTemplate kaldırın, ancak henüz düzenlemenizi veya eklemeyi destekleyen bir FormView oluşturma konusunda ilgileniyoruz.From the Source view, remove the InsertItemTemplate and EditItemTemplate since we're not interested in creating a FormView that supports editing or inserting yet. Bundan sonra, üzerinde çalışmak üzere temiz bir tablet olması için ItemTemplate içindeki biçimlendirmeyi temizleyin.Next, clear out the markup within the ItemTemplate so that we have a clean slate to work from.

ItemTemplate el ile oluşturmayı tercih ediyorsanız, ObjectDataSource 'u araç kutusu 'ndan tasarımcı üzerine sürükleyerek ekler ekleyebilir ve yapılandırabilirsiniz.If you'd rather build up the ItemTemplate manually, you can add and configure the ObjectDataSource by dragging it from the Toolbox onto the Designer. Ancak, FormView 'un veri kaynağını tasarımcıdan ayarlamazsanız.However, don't set the FormView's data source from the Designer. Bunun yerine, kaynak görünümüne gidin ve FormView 'un DataSourceID özelliğini, ObjectDataSource 'un ID değerine el ile ayarlayın.Instead, go to the Source view and manually set the FormView's DataSourceID property to the ID value of the ObjectDataSource. Sonra ItemTemplateel ile ekleyin.Next, manually add the ItemTemplate.

Hangi yaklaşımdan bağımsız olarak, bu noktada FormView 'un bildirim temelli biçimlendirmesi şöyle görünmelidir:Regardless of what approach you decided to take, at this point your FormView's declarative markup should look like:

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

    </ItemTemplate>
</asp:FormView>

FormView 'un akıllı etiketinde sayfalama etkinleştir onay kutusunu işaretleyin. Bu, AllowPaging="True" özniteliğini FormView 'un bildirime dayalı sözdizimine ekler.Take a moment to check the Enable Paging checkbox in the FormView's smart tag; this will add the AllowPaging="True" attribute to the FormView's declarative syntax. Ayrıca, EnableViewState özelliğini false olarak ayarlayın.Also, set the EnableViewState property to False.

2. Adım:ItemTemplateIşaretlemesini tanımlamaStep 2: Defining theItemTemplate's Markup

Olan FormView, ObjectDataSource denetimine bağlamakta ve sayfalama desteklemek üzere yapılandırıldıktan sonra ItemTemplateiçin içerik belirtmeye hazırız.With the FormView bound to the ObjectDataSource control and configured to support paging we're ready to specify the content for the ItemTemplate. Bu öğreticide, ürün adının bir <h3> başlığında görüntülenmesini görelim.For this tutorial, let's have the product's name displayed in an <h3> heading. Bundan sonra, ilk ve üçüncü sütunların özellik adlarını ve ikinci ve dördüncü liste değerlerini listelebileceği dört sütunlu bir tabloda kalan ürün özelliklerini göstermek için bir HTML <table> kullanalım.Following that, let's use an HTML <table> to display the remaining product properties in a four-column table where the first and third columns list the property names and the second and fourth list their values.

Bu biçimlendirme, tasarımcıda FormView 'un şablon düzenlemesi arabiriminden veya bildirime dayalı sözdizimi aracılığıyla el ile girilebilir.This markup can be entered in through the FormView's template editing interface in the Designer or entered manually through the declarative syntax. Şablonlarla çalışırken, genellikle bildirim temelli söz dizimi ile doğrudan çalışmayı daha hızlı buldum, ancak en rahat olan yöntemleri kullanmayı ücretsiz olarak öğrendim.When working with templates I typically find it quicker to work directly with the declarative syntax, but feel free to use whatever technique you're most comfortable with.

Aşağıdaki biçimlendirme ItemTemplateyapısı tamamlandıktan sonra FormView bildirim temelli işaretlemesini gösterir:The following markup shows the FormView declarative markup after the ItemTemplate's structure has been completed:

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

Veri bağlama sözdiziminin <%# Eval("ProductName") %>, örneğin doğrudan şablonun çıktısına eklenebilir olduğuna dikkat edin.Notice that the databinding syntax - <%# Eval("ProductName") %>, for example can be injected directly into the template's output. Diğer bir deyişle, bir etiket denetiminin Text özelliğine atanması gerekmez.That is, it need not be assigned to a Label control's Text property. Örneğin, ProductName değeri, <h3><%# Eval("ProductName") %></h3>kullanarak <h3> öğesinde görüntülenir, bu da ürün Chai 'nin <h3>Chai</h3>olarak işlenir.For example, we have the ProductName value displayed in an <h3> element using <h3><%# Eval("ProductName") %></h3>, which for the product Chai will render as <h3>Chai</h3>.

ProductPropertyLabel ve ProductPropertyValue CSS sınıfları, <table>ürün özelliği adlarının ve değerlerinin stilini belirtmek için kullanılır.The ProductPropertyLabel and ProductPropertyValue CSS classes are used for specifying the style of the product property names and values in the <table>. Bu CSS sınıfları Styles.css tanımlanmıştır ve özellik adlarının kalın ve sağa hizalı olmasına ve özellik değerlerine doğru bir doldurma eklemesine neden olur.These CSS classes are defined in Styles.css and cause the property names to be bold and right-aligned and add a right padding to the property values.

FormView ile kullanılabilen bir CheckBoxField olmadığından, Discontinued değerini bir onay kutusu olarak göstermek için kendi onay kutusu denetiminizi eklememiz gerekir.Since there are no CheckBoxFields available with the FormView, in order to show the Discontinued value as a checkbox we must add our own CheckBox control. Enabled özelliği false olarak ayarlanır, salt okunurdur ve CheckBox 'ın Checked özelliği Discontinued veri alanının değerine bağlanır.The Enabled property is set to False, making it read-only, and the CheckBox's Checked property is bound to the value of the Discontinued data field.

ItemTemplate tamamlandıktan sonra ürün bilgileri çok daha akıcı bir şekilde görüntülenir.With the ItemTemplate complete, the product information is displayed in a much more fluid manner. Son öğreticideki DetailsView çıktısını (Şekil 3) Bu öğreticide FormView tarafından oluşturulan çıktıyı karşılaştırın (Şekil 4).Compare the DetailsView output from the last tutorial (Figure 3) with the output generated by the FormView in this tutorial (Figure 4).

Rigıd DetailsView çıkışını The Rigid DetailsView Output

Şekil 3: Rigıd DetailsView çıkışı (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 3: The Rigid DetailsView Output (Click to view full-size image)

Sıvı FormView çıkışını The Fluid FormView Output

Şekil 4: akışkan FormView çıkışı (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 4: The Fluid FormView Output (Click to view full-size image)

ÖzetSummary

GridView ve DetailsView denetimlerinin çıktısı TemplateFields kullanılarak özelleştirilmişse, her ikisi de verileri kılavuz benzeri bir kutu biçiminde de sunar.While the GridView and DetailsView controls can have their output customized using TemplateFields, both still present their data in a grid-like, boxy format. Bu süreler için, tek bir kaydın daha az rigıd düzeni kullanılarak gösterilmesi gerektiğinde, FormView ideal bir seçimdir.For those times when a single record needs to be shown using a less rigid layout, the FormView is an ideal choice. DetailsView gibi, FormView DataSourcetek bir kayıt oluşturur, ancak bu, DetailsView 'tan farklı olarak yalnızca şablonlardan oluşur ve alanları desteklemez.Like the DetailsView, the FormView renders a single record from its DataSource, but unlike the DetailsView it is composed just of templates and does not support fields.

Bu öğreticide gördüğünüz gibi, FormView tek bir kayıt görüntülenirken daha esnek bir düzen sağlar.As we saw in this tutorial, the FormView allows for a more flexible layout when displaying a single record. Gelecek öğreticilerde, FormsView ile aynı düzeyde esneklik sağlayan, ancak birden çok kayıt (GridView gibi) görüntüleyebilen DataList ve Repeater denetimlerini inceleyeceğiz.In future tutorials we'll examine the DataList and Repeater controls, which provide the same level of flexibility as the FormsView, but are able to display multiple records (like the GridView).

Programlamanın kutlu olsun!Happy Programming!

Yazar hakkındaAbout the Author

4GuysFromRolla.com 'in, Scott Mitchell, yedi ASP/ASP. net books ve 'in yazarı, 1998 sürümünden bu yana Microsoft Web teknolojileriyle çalışmaktadır.Scott Mitchell, author of seven ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Scott bağımsız danışman, Trainer ve yazıcı olarak çalışıyor.Scott works as an independent consultant, trainer, and writer. En son kitabı, 24 saat içinde ASP.NET 2,0 kendi kendinize eğitimister.His latest book is Sams Teach Yourself ASP.NET 2.0 in 24 Hours. mitchell@4GuysFromRolla.comadresinden erişilebilir .He can be reached at mitchell@4GuysFromRolla.com. ya da blog aracılığıyla http://ScottOnWriting.NETbulabilirsiniz.or via his blog, which can be found at http://ScottOnWriting.NET.

Özel olarak teşekkürlerSpecial Thanks To

Bu öğretici serisi birçok yararlı gözden geçirenler tarafından incelendi.This tutorial series was reviewed by many helpful reviewers. Bu öğretici için baş gözden geçiren E.R. idiLead reviewer for this tutorial was E.R. Gilmore.Gilmore. Yaklaşan MSDN makalelerimi gözden geçiriyor musunuz?Interested in reviewing my upcoming MSDN articles? Öyleyse, benimitchell@4GuysFromRolla.combir satır bırakın .If so, drop me a line at mitchell@4GuysFromRolla.com.