Not
Bu sayfaya erişim yetkilendirme gerektiriyor. Oturum açmayı veya dizinleri değiştirmeyi deneyebilirsiniz.
Bu sayfaya erişim yetkilendirme gerektiriyor. Dizinleri değiştirmeyi deneyebilirsiniz.
tarafından Scott Mitchell
GridView denetimi, yeni bir veri kaydı eklemek için yerleşik destek sağlamasa da, bu öğreticide GridView'un ekleme arabirimini içerecek şekilde nasıl genişletilmediği gösterilir.
Giriş
Veri Ekleme, Güncelleştirme ve Silmeye Genel Bakış öğreticisinde açıklandığı gibi GridView, DetailsView ve FormView Web denetimlerinin her biri yerleşik veri değiştirme özelliklerini içerir. Bildirim temelli veri kaynağı denetimleriyle kullanıldığında, bu üç Web denetimi tek bir kod satırı yazmaya gerek kalmadan ve senaryolarda verileri değiştirmek için hızlı ve kolay bir şekilde yapılandırılabilir. Ne yazık ki, yalnızca DetailsView ve FormView denetimleri yerleşik ekleme, düzenleme ve silme özellikleri sağlar. GridView yalnızca düzenleme ve silme desteği sunar. Ancak, biraz dirsek gresi ile GridView'ı bir ekleme arabirimi içerecek şekilde genişletebiliriz.
GridView'a ekleme özellikleri eklerken, yeni kayıtların nasıl ekleneceğini belirleme, ekleme arabirimini oluşturma ve yeni kaydı eklemek için kodu yazma sorumluluğumuz vardır. Bu öğreticide, GridView alt bilgi satırına ekleme arabirimini eklemeyi inceleyeceğiz (bkz. Şekil 1). Her sütun için alt bilgi hücresi uygun veri koleksiyonu kullanıcı arabirimi öğesini (ürün adı için TextBox, sağlayıcı için DropDownList vb.) içerir. Ekle düğmesi için tıklandığında sayfanın yenilenmesine ve alt bilgi satırında sağlanan değerlerin kullanılmasıyla Products
tablosuna yeni bir kayıt eklenmesine neden olacak bir sütuna ihtiyacımız var.
Şekil 1: Alt Bilgi Satırı Yeni Ürünler Eklemek için Bir Arabirim Sağlar (Tam boyutlu görüntüyü görüntülemek için tıklayın)
1. Adım: GridView'da Ürün Bilgilerini Görüntüleme
GridView alt bilgisinde ekleme arabirimini oluşturma konusunda kaygılanmadan önce, önce veritabanındaki ürünleri listeleyen sayfaya bir GridView eklemeye odaklanalım. İlk olarak, InsertThroughFooter.aspx
klasöründeki EnhancedGridView
sayfasını açın ve Toolbox'tan bir GridView'ı Tasarımcı'ya sürükleyin, GridView'ın ID
özelliğini Products
olarak ayarlayın. Ardından, GridView akıllı etiketini kullanarak adlı ProductsDataSource
yeni bir ObjectDataSource'a bağlayın.
Şekil 2: Adlı ProductsDataSource
Yeni Bir ObjectDataSource Oluşturma (Tam boyutlu görüntüyü görüntülemek için tıklayın)
ObjectDataSource'u ürün bilgilerini almak için s sınıfı ProductsBLL
yöntemini kullanacak GetProducts()
şekilde yapılandırın. Bu öğreticide, ekleme özelliklerine odaklanalım ve düzenleme ve silme konularında endişelenmeyelim. Bu nedenle, INSERT sekmesindeki açılan listenin olarak ayarlandığından AddProduct()
ve UPDATE ve DELETE sekmelerindeki açılan listelerin (Yok) olarak ayarlandığından emin olun.
Şekil 3: Yöntemi ObjectDataSource AddProduct
yöntemiyle eşleme Insert()
(Tam boyutlu görüntüyü görüntülemek için tıklayın)
Şekil 4: UPDATE ve DELETE Sekmelerini Drop-Down Listelerini (Yok) olarak ayarlayın (Tam boyutlu görüntüyü görüntülemek için tıklayın)
ObjectDataSource'un Veri Kaynağını Yapılandırma sihirbazını tamamladıktan sonra, Visual Studio ilgili veri alanlarının her biri için GridView'a otomatik olarak alanlar ekler. Şimdilik Visual Studio tarafından eklenen tüm alanları bırakın. Bu öğreticinin ilerleyen bölümlerinde geri dönüp yeni kayıt eklerken değerleri belirtilmesi gerekmeyen alanlardan bazılarını kaldıracağız.
Veritabanında 80'e yakın ürün olduğundan, kullanıcının yeni bir kayıt eklemek için web sayfasının en altına kadar kaydırması gerekir. Bu nedenle, ekleme arabirimini daha görünür ve erişilebilir hale getirmek için sayfalamayı etkinleştirelim. Sayfalama özelliğini açmak için GridView akıllı etiketinden Sayfalandırmayı Etkinleştir onay kutusunu işaretlemeniz yeterlidir.
Bu noktada GridView ve ObjectDataSource bildirim temelli işaretlemesi aşağıdakine benzer olmalıdır:
<asp:GridView ID="Products" runat="server" AutoGenerateColumns="False"
DataKeyNames="ProductID" DataSourceID="ProductsDataSource"
AllowPaging="True" EnableViewState="False">
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="ProductID"
InsertVisible="False" ReadOnly="True"
SortExpression="ProductID" />
<asp:BoundField DataField="ProductName" HeaderText="ProductName"
SortExpression="ProductName" />
<asp:BoundField DataField="SupplierID" HeaderText="SupplierID"
SortExpression="SupplierID" />
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID"
SortExpression="CategoryID" />
<asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit"
SortExpression="QuantityPerUnit" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice"
SortExpression="UnitPrice" />
<asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock"
SortExpression="UnitsInStock" />
<asp:BoundField DataField="UnitsOnOrder" HeaderText="UnitsOnOrder"
SortExpression="UnitsOnOrder" />
<asp:BoundField DataField="ReorderLevel" HeaderText="ReorderLevel"
SortExpression="ReorderLevel" />
<asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued"
SortExpression="Discontinued" />
<asp:BoundField DataField="CategoryName" HeaderText="CategoryName"
ReadOnly="True" SortExpression="CategoryName" />
<asp:BoundField DataField="SupplierName" HeaderText="SupplierName"
ReadOnly="True" SortExpression="SupplierName" />
</Columns>
</asp:GridView>
<asp:ObjectDataSource ID="ProductsDataSource" runat="server"
InsertMethod="AddProduct" OldValuesParameterFormatString="original_{0}"
SelectMethod="GetProducts" TypeName="ProductsBLL">
<InsertParameters>
<asp:Parameter Name="productName" Type="String" />
<asp:Parameter Name="supplierID" Type="Int32" />
<asp:Parameter Name="categoryID" Type="Int32" />
<asp:Parameter Name="quantityPerUnit" Type="String" />
<asp:Parameter Name="unitPrice" Type="Decimal" />
<asp:Parameter Name="unitsInStock" Type="Int16" />
<asp:Parameter Name="unitsOnOrder" Type="Int16" />
<asp:Parameter Name="reorderLevel" Type="Int16" />
<asp:Parameter Name="discontinued" Type="Boolean" />
</InsertParameters>
</asp:ObjectDataSource>
Şekil 5: Tüm Ürün Veri Alanları Paged GridView'da Görüntülenir (Tam boyutlu görüntüyü görüntülemek için tıklayın)
2. Adım: Alt Başlık Satırı Ekleme
GridView, üst bilgi ve veri satırlarıyla birlikte bir alt bilgi satırı içerir. Üst bilgi ve alt bilgi satırları GridView s ShowHeader
ve ShowFooter
özelliklerinin değerlerine bağlı olarak görüntülenir. Özelliği ShowFooter
olarak true
ayarlamanız alt bilgi satırını göstermek için yeterlidir. Şekil 6'da gösterildiği gibi, ShowFooter
özelliğini true
olarak ayarlamak kılavuza bir alt bilgi satırı ekler.
Şekil 6: Alt bilgi satırını görüntülemek için ShowFooter
'yi True
olarak ayarlayın (Tam boyutlu resmi görmek için tıklayın)
Alt bilgi satırının koyu kırmızı arka plan rengine sahip olduğunu unutmayın. Bunun nedeni, oluşturduğumuz ve ObjectDataSource ile Veri Görüntüleme öğreticisindeki tüm sayfalara uyguladığımız DataWebControls Temasıdır. Özellikle, GridView.skin
dosyası FooterStyle
özelliğini FooterStyle
CSS sınıfını kullanacak şekilde yapılandırmaktadır.
FooterStyle
sınıfı içinde aşağıdaki gibi tanımlanırStyles.css
:
.FooterStyle
{
background-color: #a33;
color: White;
text-align: right;
}
Uyarı
Önceki eğitimlerde GridView'in alt satırını kullanarak inceledik. Gerekirse, bilgiyi tazelemek amacıyla GridView Alt Bilgisinde Özet Bilgilerini Görüntüleme konusuna geriye dönüp bakın.
ShowFooter
özelliğini true
olarak ayarladıktan sonra, çıkışı tarayıcıda görüntülemek için kısa bir süre gözden geçirin. Şu anda alt bilgi satırı herhangi bir metin veya Web denetimi içermiyor. 3. Adım'da, her GridView alanının alt bilgisini uygun ekleme arabirimini içerebilecek şekilde değiştireceğiz.
Şekil 7: Sayfalama Arabirimi Denetimlerinin Üzerinde Boş Alt Bilgi Satırı Görüntüleniyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)
3. Adım: Alt Bilgi Satırını Özelleştirme
GridView Denetimindeki TemplateField'leri Kullanma öğreticisine geri dönerek TemplateFields kullanarak belirli bir GridView sütununun görünümünü büyük ölçüde özelleştirmeyi gördük (BoundFields veya CheckBoxFields'in aksine); Veri Değiştirme Arabirimini Özelleştirme bölümünde, Bir GridView'da düzenleme arabirimini özelleştirmek için TemplateFields'i kullanarak baktık. TemplateField'in belirli satır türleri için kullanılan işaretleme, Web denetimleri ve veri bağlama söz dizimi karışımını tanımlayan bir dizi şablondan oluştuğunu hatırlayın.
ItemTemplate
örneğin, salt okunur satırlar için kullanılan şablonu belirtirkenEditItemTemplate
, düzenlenebilir satır için şablonu tanımlar.
ItemTemplate
ve EditItemTemplate
ile birlikte TemplateField, alt bilgi satırının içeriğini belirten bir FooterTemplate
de içerir. Bu nedenle, her alanın ekleme arabirimi için gereken Web denetimlerini içine FooterTemplate
ekleyebiliriz. Başlamak için GridView'daki tüm alanları TemplateFields'e dönüştürün. Bu, GridView akıllı etiketinde Sütunları Düzenle bağlantısına tıklayarak, sol alt köşedeki her alanı seçerek ve Bu alanı TemplateField'a dönüştür bağlantısına tıklayarak yapılabilir.
Şekil 8: Her Alanı TemplateField'e Dönüştürme
Bu alanı TemplateField'e dönüştür seçeneğine tıklanması geçerli alan türünü eşdeğer bir TemplateField'a dönüştürür. Örneğin, her BoundField, karşılık gelen veri alanını görüntüleyen bir Etiket içeren ve verileri bir TextBox içinde görüntüleyen bir ItemTemplate
içeren bir EditItemTemplate
ile değiştirilen bir TemplateField olur.
ProductName
BoundField aşağıdaki TemplateField işaretlemesine dönüştürüldü:
<asp:TemplateField HeaderText="ProductName" SortExpression="ProductName">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"
Text='<%# Bind("ProductName") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server"
Text='<%# Bind("ProductName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
Benzer şekilde, Discontinued
CheckBoxField, ItemTemplate
'teki CheckBox'ın devre dışı bırakıldığı bir CheckBox Web denetimi içeren EditItemTemplate
ve ItemTemplate
'yi içeren bir TemplateField'a dönüştürülmüştür. Salt okunur ProductID
BoundField, hem ItemTemplate
hem de EditItemTemplate
içinde Label kontrolüne sahip bir TemplateField'a dönüştürüldü. Kısacası, mevcut bir GridView alanını TemplateField'a dönüştürmek, mevcut alanın işlevselliğini kaybetmeden daha özelleştirilebilir TemplateField'e geçmenin hızlı ve kolay bir yoludur.
Üzerinde çalıştığımız GridView düzenlemeyi desteklemediğinden, her TemplateField'den EditItemTemplate
öğesini kaldırabilir ve sadece ItemTemplate
öğesini bırakabilirsiniz. Bunu yaptıktan sonra GridView bildirimsel işaretlemeniz aşağıdaki gibi görünmelidir.
<asp:GridView ID="Products" runat="server" AutoGenerateColumns="False"
DataKeyNames="ProductID" DataSourceID="ProductsDataSource"
AllowPaging="True" EnableViewState="False" ShowFooter="True">
<Columns>
<asp:TemplateField HeaderText="ProductID" InsertVisible="False"
SortExpression="ProductID">
<ItemTemplate>
<asp:Label ID="Label1" runat="server"
Text='<%# Bind("ProductID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ProductName" SortExpression="ProductName">
<ItemTemplate>
<asp:Label ID="Label2" runat="server"
Text='<%# Bind("ProductName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="SupplierID" SortExpression="SupplierID">
<ItemTemplate>
<asp:Label ID="Label3" runat="server"
Text='<%# Bind("SupplierID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CategoryID" SortExpression="CategoryID">
<ItemTemplate>
<asp:Label ID="Label4" runat="server"
Text='<%# Bind("CategoryID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="QuantityPerUnit"
SortExpression="QuantityPerUnit">
<ItemTemplate>
<asp:Label ID="Label5" runat="server"
Text='<%# Bind("QuantityPerUnit") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UnitPrice" SortExpression="UnitPrice">
<ItemTemplate>
<asp:Label ID="Label6" runat="server"
Text='<%# Bind("UnitPrice") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UnitsInStock"
SortExpression="UnitsInStock">
<ItemTemplate>
<asp:Label ID="Label7" runat="server"
Text='<%# Bind("UnitsInStock") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UnitsOnOrder"
SortExpression="UnitsOnOrder">
<ItemTemplate>
<asp:Label ID="Label8" runat="server"
Text='<%# Bind("UnitsOnOrder") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ReorderLevel"
SortExpression="ReorderLevel">
<ItemTemplate>
<asp:Label ID="Label9" runat="server"
Text='<%# Bind("ReorderLevel") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Discontinued"
SortExpression="Discontinued">
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server"
Checked='<%# Bind("Discontinued") %>' Enabled="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CategoryName"
SortExpression="CategoryName">
<ItemTemplate>
<asp:Label ID="Label10" runat="server"
Text='<%# Bind("CategoryName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="SupplierName"
SortExpression="SupplierName">
<ItemTemplate>
<asp:Label ID="Label11" runat="server"
Text='<%# Bind("SupplierName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Artık her GridView alanı bir TemplateField'e dönüştürüldüğüne göre, her alanın FooterTemplate
içine uygun ekleme arabirimini girebiliriz. Bazı alanların bir ekleme arayüzü olmayacak (ProductID
örneğin); bazıları, yeni ürünün bilgilerini toplamak için kullanılan web kontrollerinde farklılık gösterecek.
Düzenleme arabirimini oluşturmak için GridView akıllı etiketinden Şablonları Düzenle bağlantısını seçin. Ardından, açılan listeden uygun alanları FooterTemplate
seçin ve uygun denetimi Araç Kutusu'ndan Tasarımcı'ya sürükleyin.
Şekil 9: Her Alana FooterTemplate
Uygun Ekleme Arabirimini Ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Aşağıdaki madde işaretli liste, GridView alanlarını numaralandırır ve eklenmesi gereken ekleme arayüzünü belirtir.
-
ProductID
hiçbiri. -
ProductName
bir TextBox ekleyin veID
öğesiniNewProductName
olarak ayarlayın. Kullanıcının yeni ürün adı için bir değer girmesini sağlamak için bir RequiredFieldValidator denetimi de ekleyin. -
SupplierID
hiçbiri. -
CategoryID
hiçbiri. -
QuantityPerUnit
bir TextBox ekleyin,ID
öğeyiNewQuantityPerUnit
olarak ayarlayın. -
UnitPrice
girilen değerin sıfırdan büyük veya sıfıra eşit bir para birimi değeri olmasını sağlayan adlıNewUnitPrice
bir TextBox ve CompareValidator ekleyin. -
UnitsInStock
ID
olarak ayarlanmışNewUnitsInStock
bir TextBox kullanın. Girilen değerin sıfırdan büyük veya sıfıra eşit bir tamsayı değeri olmasını sağlayan bir CompareValidator ekleyin. -
UnitsOnOrder
ID
olarak ayarlanmışNewUnitsOnOrder
bir TextBox kullanın. Girilen değerin sıfırdan büyük veya sıfıra eşit bir tamsayı değeri olmasını sağlayan bir CompareValidator ekleyin. -
ReorderLevel
ID
olarak ayarlanmışNewReorderLevel
bir TextBox kullanın. Girilen değerin sıfırdan büyük veya sıfıra eşit bir tamsayı değeri olmasını sağlayan bir CompareValidator ekleyin. -
Discontinued
bir Onay Kutusu ekleyin veID
öğesiniNewDiscontinued
olarak ayarlayın. -
CategoryName
DropDownList ekleyin veID
değeriniNewCategoryID
olarak ayarlayın. AdlıCategoriesDataSource
yeni bir ObjectDataSource'a bağlayın ve sınıfınCategoriesBLL
GetCategories()
yöntemini kullanacak şekilde yapılandırın. DropDownList'lerinListItem
veri alanını görüntülemesini veCategoryName
veri alanını değerleri olarak kullanmasını sağlayın. -
SupplierName
DropDownList ekleyin veID
değeriniNewSupplierID
olarak ayarlayın. AdlıSuppliersDataSource
yeni bir ObjectDataSource'a bağlayın ve sınıfınSuppliersBLL
GetSuppliers()
yöntemini kullanacak şekilde yapılandırın. DropDownList'lerinListItem
veri alanını görüntülemesini veCompanyName
veri alanını değerleri olarak kullanmasını sağlayın.
Doğrulama denetimlerinin her biri için, varsayılan kırmızı yerine CSS sınıfının beyaz ön plan renginin kullanılabilmesi için ForeColor
özelliğini temizleyin.
ErrorMessage
özelliğini ayrıntılı bir açıklama için kullanın, ancak Text
özelliğini bir yıldız olarak ayarlayın. Doğrulama denetimi metninin ekleme arabiriminin iki satıra kaydırılmasını önlemek için, doğrulama denetimi kullanan her FooterStyle
için, Wrap
'nin FooterTemplate
özelliğini false olarak ayarlayın. Son olarak, GridView altına bir ValidationSummary denetimi ekleyin ve ShowMessageBox
özelliğini true
olarak, ShowSummary
özelliğini false
olarak ayarlayın.
Yeni bir ürün eklerken CategoryID
ve SupplierID
sağlamamız gerekir. Bu bilgiler, alt bilgi hücrelerindeki CategoryName
ve SupplierName
alanları için DropDownLists aracılığıyla yakalanır. Bu alanları TemplateFields'in yerine kullanmayı seçtim çünkü tablodaki veri satırlarında kullanıcı, kategori ve sağlayıcı adlarını kimlik değerleri yerine görmekle daha çok ilgileniyor olabilir.
CategoryID
ve SupplierID
değerleri artık CategoryName
ve SupplierName
alanlarının ekleme arabirimlerinde yakalandığından, CategoryID
ve SupplierID
TemplateFields'ı GridView'dan kaldırabiliriz.
Benzer şekilde, ProductID
yeni bir ürün eklenirken de kullanılmaz, bu nedenle ProductID
TemplateField de kaldırılabilir. Ancak, alanı ızgarada bırakalım ProductID
. Ekleme arabirimini oluşturan TextBoxes, DropDownLists, CheckBoxes ve doğrulama denetimlerine ek olarak, tıklandığında yeni ürünü veritabanına ekleme mantığını gerçekleştiren bir Ekle düğmesine de ihtiyacımız vardır. 4. Adım'da TemplateField'ın ProductID
ekleme arabirimine FooterTemplate
bir Ekle düğmesi ekleyeceğiz.
Çeşitli GridView alanlarının görünümünü geliştirmek için çekinmeyin. Örneğin, UnitPrice
değerlerini para birimi olarak biçimlendirmek, UnitsInStock
, UnitsOnOrder
ve ReorderLevel
alanlarını sağa hizalamak ve HeaderText
TemplateFields değerlerini güncelleştirmek isteyebilirsiniz.
S'lere arabirim ekleme, FooterTemplate
kaldırma, SupplierID
'i kaldırma ve CategoryID
TemplateField'leri düzenleme ve hizalama yoluyla kılavuzun estetiğini geliştirdikten sonra, GridView'unuzun bildirime dayalı işaretlemesi aşağıdakine benzer şekilde görünmelidir:
<asp:GridView ID="Products" runat="server" AutoGenerateColumns="False"
DataKeyNames="ProductID" DataSourceID="ProductsDataSource"
AllowPaging="True" EnableViewState="False" ShowFooter="True">
<Columns>
<asp:TemplateField HeaderText="ProductID" InsertVisible="False"
SortExpression="ProductID">
<ItemTemplate>
<asp:Label ID="Label1" runat="server"
Text='<%# Bind("ProductID") %>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Product" SortExpression="ProductName">
<ItemTemplate>
<asp:Label ID="Label2" runat="server"
Text='<%# Bind("ProductName") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="NewProductName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
runat="server" ControlToValidate="NewProductName"
Display="Dynamic" ForeColor="
ErrorMessage="You must enter a name for the new product.">
* </asp:RequiredFieldValidator>
</FooterTemplate>
<FooterStyle Wrap="False" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Category" SortExpression="CategoryName">
<ItemTemplate>
<asp:Label ID="Label10" runat="server"
Text='<%# Bind("CategoryName") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="NewCategoryID" 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>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Supplier" SortExpression="SupplierName">
<ItemTemplate>
<asp:Label ID="Label11" runat="server"
Text='<%# Bind("SupplierName") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="NewSupplierID" runat="server"
DataSourceID="SuppliersDataSource"
DataTextField="CompanyName" DataValueField="SupplierID">
</asp:DropDownList><asp:ObjectDataSource ID="SuppliersDataSource"
runat="server" OldValuesParameterFormatString="original_{0}"
SelectMethod="GetSuppliers" TypeName="SuppliersBLL">
</asp:ObjectDataSource>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Qty/Unit" SortExpression="QuantityPerUnit">
<ItemTemplate>
<asp:Label ID="Label5" runat="server"
Text='<%# Bind("QuantityPerUnit") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="NewQuantityPerUnit" runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Price" SortExpression="UnitPrice">
<ItemTemplate>
<asp:Label ID="Label6" runat="server"
Text='<%# Bind("UnitPrice", "{0:c}") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
$<asp:TextBox ID="NewUnitPrice" runat="server" Columns="8" />
<asp:CompareValidator ID="CompareValidator1" runat="server"
ControlToValidate="NewUnitPrice"
ErrorMessage="You must enter a valid currency value greater than
or equal to 0.00. Do not include the currency symbol."
ForeColor="" Operator="GreaterThanEqual" Type="Currency"
ValueToCompare="0" Display="Dynamic">
* </asp:CompareValidator>
</FooterTemplate>
<ItemStyle HorizontalAlign="Right" />
<FooterStyle Wrap="False" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Units In Stock"
SortExpression="Units In Stock">
<ItemTemplate>
<asp:Label ID="Label7" runat="server"
Text='<%# Bind("UnitsInStock") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="NewUnitsInStock" runat="server" Columns="5" />
<asp:CompareValidator ID="CompareValidator2" runat="server"
ControlToValidate="NewUnitsInStock" Display="Dynamic"
ErrorMessage="You must enter a valid numeric value for units
in stock that's greater than or equal to zero."
ForeColor="" Operator="GreaterThanEqual" Type="Integer"
ValueToCompare="0">*</asp:CompareValidator>
</FooterTemplate>
<ItemStyle HorizontalAlign="Right" />
<FooterStyle Wrap="False" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Units On Order" SortExpression="UnitsOnOrder">
<ItemTemplate>
<asp:Label ID="Label8" runat="server"
Text='<%# Bind("UnitsOnOrder") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="NewUnitsOnOrder" runat="server" Columns="5" />
<asp:CompareValidator ID="CompareValidator3" runat="server"
ControlToValidate="NewUnitsOnOrder" Display="Dynamic"
ErrorMessage="You must enter a valid numeric value for units on
order that's greater than or equal to zero."
ForeColor="" Operator="GreaterThanEqual" Type="Integer"
ValueToCompare="0">*</asp:CompareValidator>
</FooterTemplate>
<ItemStyle HorizontalAlign="Right" />
<FooterStyle Wrap="False" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Reorder Level" SortExpression="ReorderLevel">
<ItemTemplate>
<asp:Label ID="Label9" runat="server"
Text='<%# Bind("ReorderLevel") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="NewReorderLevel" runat="server" Columns="5" />
<asp:CompareValidator ID="CompareValidator4" runat="server"
ControlToValidate="NewReorderLevel" Display="Dynamic"
ErrorMessage="You must enter a valid numeric value for reorder
level that's greater than or equal to zero."
ForeColor="" Operator="GreaterThanEqual" Type="Integer"
ValueToCompare="0">*</asp:CompareValidator>
</FooterTemplate>
<ItemStyle HorizontalAlign="Right" />
<FooterStyle Wrap="False" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Discontinued" SortExpression="Discontinued">
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server"
Checked='<%# Bind("Discontinued") %>' Enabled="false" />
</ItemTemplate>
<FooterTemplate>
<asp:CheckBox ID="NewDiscontinued" runat="server" />
</FooterTemplate>
<ItemStyle HorizontalAlign="Center" />
<FooterStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
</asp:GridView>
Bir tarayıcı üzerinden görüntülendiğinde, GridView alt bilgi satırı artık tamamlanmış ekleme arabirimini içerir (bkz. Şekil 10). Bu noktada, ekleme arabirimi, kullanıcının yeni ürün için verileri girdiğinizi ve veritabanına yeni bir kayıt eklemek istediğini belirtmesi için bir araç içermez. Ayrıca alt bilgiye girilen verilerin veritabanındaki yeni bir kayda nasıl çevrileceğini henüz ele almadık Products
. 4. Adım'da ekleme arabirimine Ekle düğmesi eklemeyi ve tıklandığında geri göndermede kodu yürütmeyi inceleyeceğiz. 5. adım, alt bilgideki verileri kullanarak yeni kayıt eklemeyi gösterir.
Şekil 10: GridView Alt Bilgisi Yeni Kayıt Eklemek için Bir Arabirim Sağlar (Tam boyutlu görüntüyü görüntülemek için tıklayın)
4. Aşama: Ekleme Arayüzüne Ekleme Düğmesi Dahil Etme
Alt bilgi satırının ekleme arabirimi şu anda kullanıcının yeni ürün bilgilerini girmeyi tamamlamış olduğunu belirtecek araçlara sahip olmadığından ekleme arabiriminde bir Ekle düğmesi eklememiz gerekir. Bu, mevcut FooterTemplate
sütunlardan birine yerleştirilebilir veya bu amaçla kılavuza yeni bir sütun ekleyebiliriz. Bu eğitim için, Ekle düğmesini ProductID
TemplateField'in FooterTemplate
içine yerleştirelim.
Tasarımcı'dan GridView'un akıllı etiketindeki Şablonları Düzenle bağlantısına tıklayın ve açılan listeden ProductID
s alanını FooterTemplate
seçin. Şablona Bir Düğme Web denetimi (veya dilerseniz LinkButton veya ImageButton) ekleyin, kimliğini AddProduct
CommandName
olarak, öğesini Ekle olarak, özelliğini de Text
Şekil 11'de gösterildiği gibi Ekle olarak ayarlayın.
Şekil 11: Ekle Düğmesini TemplateField'lere ProductID
FooterTemplate
yerleştirme (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Ekle düğmesini ekledikten sonra, sayfayı tarayıcıda test edin. Ekleme arabiriminde geçersiz veri içeren Ekle düğmesine tıklandığında geri göndermenin kısa devreli olduğunu ve ValidationSummary denetiminin geçersiz verileri gösterdiğini unutmayın (bkz. Şekil 12). Uygun veriler girildiğinde Ekle düğmesine tıklanması geri göndermeye neden olur. Ancak veritabanına kayıt eklenmez. Ekleme işlemini gerçekleştirmek için biraz kod yazmamız gerekir.
Şekil 12: Ekleme Arabiriminde Geçersiz Veri Varsa Ekle Düğmesinin Geri Gönderimi Devre Dışı Bırakılır (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Uyarı
Ekleme arabirimindeki doğrulama denetimleri bir doğrulama grubuna atanmadı. Ekleme arabirimi sayfadaki tek doğrulama denetimleri kümesi olduğu sürece bu işlem düzgün çalışır. Ancak, sayfada başka doğrulama denetimleri de varsa (kılavuz düzenleme arabirimindeki doğrulama denetimleri gibi), ekleme arabirimindeki doğrulama denetimleri ve Ekle düğmesi ValidationGroup
özellikleri, bu denetimleri belirli bir doğrulama grubuyla ilişkilendirmek için aynı değere atanmalıdır. Sayfadaki doğrulama denetimlerini ve düğmelerini doğrulama gruplarına bölme hakkında daha fazla bilgi için bkz. ASP.NET 2.0'da Doğrulama Denetimlerini Kesme.
5. Adım: TabloyaProducts
Yeni Kayıt Ekleme
GridView'un yerleşik düzenleme özelliklerini kullanırken, GridView güncelleştirmeyi gerçekleştirmek için gereken tüm işleri otomatik olarak işler. Özellikle, Güncelleştir düğmesine tıklandığında, düzenleme arabiriminden girilen değerleri ObjectDataSource koleksiyonundaki parametrelere kopyalar ve ObjectDataSource UpdateParameters
Update()
yöntemini çağırarak güncelleştirmeyi başlatır. GridView ekleme için bu tür yerleşik işlevler sağlamadığından ObjectDataSource yöntemini çağıran ve ekleme arabirimindeki değerleri ObjectDataSource Insert()
InsertParameters
koleksiyonuna kopyalayan kodu uygulamamız gerekir.
Ekle düğmesine tıklandıktan sonra bu ekleme mantığı yürütülmelidir.
GridView'da Düğme Ekleme ve Düğmelere Yanıt Verme öğreticisinde açıklandığı gibi, GridView'daki bir Düğme, LinkButton veya ImageButton öğesine tıklandığında, GridView'in RowCommand
olayı postback sırasında tetikleniyor. Bu olay, Button, LinkButton veya ImageButton öğesinin alt bilgi satırındaki Ekle düğmesi gibi açıkça eklenip eklenmediğine veya GridView tarafından otomatik olarak eklenip eklenmediğine (Sıralamayı Etkinleştir seçildiğinde her sütunun üst kısmındaki LinkButton'lar veya Sayfalandırmayı Etkinleştir seçildiğinde sayfalama arayüzündeki LinkButton'lar gibi) göre tetiklenir.
Bu nedenle, Ekle düğmesine tıklayan kullanıcıya yanıt vermek için GridView RowCommand
olayı için bir olay işleyicisi oluşturmamız gerekir. GridView'da herhangi bir Button, LinkButton veya ImageButton tıklatıldığında bu olay tetiklendiğinden, ekleme mantığıyla yalnızca olay işleyicisine geçirilen özelliğin Ekle düğmesinin (CommandName
Insert ) değeriyle eşlenmesi durumunda devam etmek çok önemlidir. Ayrıca, yalnızca doğrulama denetimleri geçerli verileri bildiriyorsa devam etmeliyiz. Buna uyum sağlamak için aşağıdaki kodla olay için RowCommand
bir olay işleyicisi oluşturun:
protected void Products_RowCommand(object sender, GridViewCommandEventArgs e)
{
// Insert data if the CommandName == "Insert"
// and the validation controls indicate valid data...
if (e.CommandName == "Insert" && Page.IsValid)
{
// TODO: Insert new record...
}
}
Uyarı
Olay işleyicisinin neden Page.IsValid
özelliğini kontrol etme zahmetine girdiğini merak edebilirsiniz. Sonuçta, ekleme arabiriminde geçersiz veriler sağlandığında postback işlemi bastırılmayacak mı? Kullanıcı JavaScript'i devre dışı bırakmıyorsa veya istemci tarafı doğrulama mantığını aşmak için adımlar atmışsa bu varsayım doğrudur. Kısacası, hiçbir zaman istemci tarafı doğrulamaya kesinlikle güvenmemelidir; Verilerle çalışmadan önce her zaman sunucu tarafı geçerlilik denetimi yapılmalıdır.
1. Adımda ObjectDataSource'un ProductsDataSource
Insert()
yönteminin sınıfın ProductsBLL
yöntemine AddProduct
eşlenmesi için oluşturduk. Tabloya Products
yeni kayıt eklemek için ObjectDataSource Insert()
yöntemini çağırmamız yeterlidir:
protected void Products_RowCommand(object sender, GridViewCommandEventArgs e)
{
// Insert data if the CommandName == "Insert"
// and the validation controls indicate valid data...
if (e.CommandName == "Insert" && Page.IsValid)
{
// Insert new record
ProductsDataSource.Insert();
}
}
Artık Insert()
yöntemi çağrıldığından, geriye kalan tek şey ekleme arabirimindeki değerleri sınıf ProductsBLL
yöntemine geçirilen parametrelere AddProduct
kopyalamaktır.
Ekleme, Güncelleştirme ve Silme ile İlişkili Olayları inceleme öğreticisinde gördüğümüz gibi bu, ObjectDataSource Inserting
olayı aracılığıyla gerçekleştirilebilir.
Inserting
Bu durumda GridView alt bilgi satırındaki denetimlere Products
program aracılığıyla başvurmamız ve değerlerini koleksiyona e.InputParameters
atamamız gerekir. Kullanıcı TextBox'ı boş bırakma ReorderLevel
gibi bir değeri atlarsa veritabanına eklenen değerin olması NULL
gerektiğini belirtmemiz gerekir.
AddProducts
yöntemi null atanabilir veritabanı alanları için null atanabilir türler kabul ettiğinden, null atanabilir bir tür kullanın ve kullanıcı girişinin atlandığı durumda değerini null
olarak ayarlayın.
protected void ProductsDataSource_Inserting
(object sender, ObjectDataSourceMethodEventArgs e)
{
// Programmatically reference Web controls in the inserting interface...
TextBox NewProductName =
(TextBox)Products.FooterRow.FindControl("NewProductName");
DropDownList NewCategoryID =
(DropDownList)Products.FooterRow.FindControl("NewCategoryID");
DropDownList NewSupplierID =
(DropDownList)Products.FooterRow.FindControl("NewSupplierID");
TextBox NewQuantityPerUnit =
(TextBox)Products.FooterRow.FindControl("NewQuantityPerUnit");
TextBox NewUnitPrice =
(TextBox)Products.FooterRow.FindControl("NewUnitPrice");
TextBox NewUnitsInStock =
(TextBox)Products.FooterRow.FindControl("NewUnitsInStock");
TextBox NewUnitsOnOrder =
(TextBox)Products.FooterRow.FindControl("NewUnitsOnOrder");
TextBox NewReorderLevel =
(TextBox)Products.FooterRow.FindControl("NewReorderLevel");
CheckBox NewDiscontinued =
(CheckBox)Products.FooterRow.FindControl("NewDiscontinued");
// Set the ObjectDataSource's InsertParameters values...
e.InputParameters["productName"] = NewProductName.Text;
e.InputParameters["supplierID"] =
Convert.ToInt32(NewSupplierID.SelectedValue);
e.InputParameters["categoryID"] =
Convert.ToInt32(NewCategoryID.SelectedValue);
string quantityPerUnit = null;
if (!string.IsNullOrEmpty(NewQuantityPerUnit.Text))
quantityPerUnit = NewQuantityPerUnit.Text;
e.InputParameters["quantityPerUnit"] = quantityPerUnit;
decimal? unitPrice = null;
if (!string.IsNullOrEmpty(NewUnitPrice.Text))
unitPrice = Convert.ToDecimal(NewUnitPrice.Text);
e.InputParameters["unitPrice"] = unitPrice;
short? unitsInStock = null;
if (!string.IsNullOrEmpty(NewUnitsInStock.Text))
unitsInStock = Convert.ToInt16(NewUnitsInStock.Text);
e.InputParameters["unitsInStock"] = unitsInStock;
short? unitsOnOrder = null;
if (!string.IsNullOrEmpty(NewUnitsOnOrder.Text))
unitsOnOrder = Convert.ToInt16(NewUnitsOnOrder.Text);
e.InputParameters["unitsOnOrder"] = unitsOnOrder;
short? reorderLevel = null;
if (!string.IsNullOrEmpty(NewReorderLevel.Text))
reorderLevel = Convert.ToInt16(NewReorderLevel.Text);
e.InputParameters["reorderLevel"] = reorderLevel;
e.InputParameters["discontinued"] = NewDiscontinued.Checked;
}
Inserting
olay işleyicisi tamamlandığında, yeni kayıtlar GridView'in alt satırı aracılığıyla Products
veritabanı tablosuna eklenebilir. Devam edin ve birkaç yeni ürün eklemeyi deneyin.
Ekleme İşlemini Geliştirme ve Özelleştirme
Şu anda Ekle düğmesine tıklandığında veritabanı tablosuna yeni bir kayıt eklenir, ancak kaydın başarıyla eklendiğine ilişkin görsel geri bildirim sağlamaz. İdeal olarak, Etiket Web denetimi veya istemci tarafı uyarı kutusu kullanıcıyı ekleme işleminin başarıyla tamamlandığını bildirir. Bunu okuyucuya alıştırma olarak bırakıyorum.
Bu öğreticide kullanılan GridView, listelenen ürünlere herhangi bir sıralama düzeni uygulamaz ve son kullanıcının verileri sıralamasına izin vermez. Sonuç olarak, kayıtlar veritabanında birincil anahtar alanına göre sıralanır. Her yeni kaydın ProductID
değeri son kayıttan büyük olduğundan, her yeni ürün eklendiğinde kılavuzun sonuna yapıştırılır. Bu nedenle, yeni bir kayıt ekledikten sonra kullanıcıyı otomatik olarak GridView'un son sayfasına göndermek isteyebilirsiniz. Bu, GridView’a veriler bağlandıktan sonra kullanıcının son sayfaya gönderilmesi gerektiğini belirtmek için ProductsDataSource.Insert()
çağrısından sonra RowCommand
olay işleyicisine aşağıdaki kod satırını ekleyerek gerçekleştirilebilir.
// Indicate that the user needs to be sent to the last page
SendUserToLastPage = true;
SendUserToLastPage
başlangıçta false
değerine atanmış olan bir sayfa düzeyinde Boole değişkenidir. GridView olayının işleyicisinde, DataBound
false ise, SendUserToLastPage
özelliği kullanıcıyı son sayfaya göndermek için güncellenir.
protected void Products_DataBound(object sender, EventArgs e)
{
// Send user to last page of data, if needed
if (SendUserToLastPage)
Products.PageIndex = Products.PageCount - 1;
}
Özelliğin PageIndex
olay işleyicisinde ayarlanmasının nedeni (olay işleyicisi DataBound
yerine), RowCommand
olay işleyicisi tetiklendiğinde henüz yeni kaydı RowCommand
veritabanı tablosuna eklememiş olmamızdır. Bu nedenle, olay işleyicisinde RowCommand
son sayfa dizini (PageCount - 1
), yeni ürün eklenmeden önceki son sayfa dizinini temsil eder. Eklenen ürünlerin çoğu için, yeni ürün eklendikten sonra son sayfa dizini aynıdır. Ancak eklenen ürün, yeni bir son sayfa dizini oluşturduğunda, PageIndex
öğesini RowCommand
olay işleyicisinde yanlış güncellersek, yeni son sayfa dizini yerine, ikinci ve son sayfaya (yeni ürünü eklemeden önceki son sayfa dizini) yönlendiriliriz. Olay işleyicisi DataBound
yeni ürün eklendikten ve veriler kılavuza yeniden yüklendikten sonra tetiklendiğinden, özelliği orada ayarladığımızda PageIndex
doğru son sayfa dizinini aldığımızı biliyoruz.
Son olarak, bu öğreticide kullanılan GridView, yeni bir ürün eklemek için toplanması gereken alan sayısı nedeniyle oldukça geniştir. Bu genişlik nedeniyle DetailsView dikey düzeni tercih edilebilir. GridView'un genel genişliği daha az giriş toplanarak azaltılabilir. Belki de yeni bir ürün eklerken , UnitsOnOrder
ve UnitsInStock
alanlarını toplamamız ReorderLevel
gerekmez; bu durumda bu alanlar GridView'dan kaldırılabilir.
Toplanan verileri ayarlamak için iki yaklaşımdan birini kullanabiliriz:
-
AddProduct
,UnitsOnOrder
veUnitsInStock
alanları için değer bekleyenReorderLevel
yöntemini kullanmaya devam edin. Olay işleyicisindeInserting
, ekleme arabiriminden kaldırılan bu girişler için kullanılacak sabit kodlanmış, varsayılan değerler sağlayın. -
AddProduct
yönteminin,ProductsBLL
,UnitsOnOrder
, veUnitsInStock
alanları için giriş kabul etmeyen yeni bir aşırı yüklemesini,ReorderLevel
sınıfında oluşturun. Ardından, ASP.NET sayfasında ObjectDataSource'ı bu yeni aşırı yüklemeyi kullanacak şekilde yapılandırın.
Her iki seçenek de aynı şekilde çalışır. Önceki eğitimlerde ProductsBLL
sınıfının UpdateProduct
metoduna birden fazla aşırı yükleme oluşturarak ikinci seçeneği kullandık.
Özet
GridView, DetailsView ve FormView'da bulunan yerleşik ekleme özelliklerinden yoksundur, ancak biraz çabayla alt bilgi satırına ekleme arabirimi eklenebilir. GridView'da alt bilgi satırını görüntülemek için ShowFooter
özelliğini true
olarak ayarlamanız yeterlidir. Alt bilgi satırı içeriği, alanı TemplateField'e dönüştürerek ve ekleme arabirimini FooterTemplate
içine ekleyerek her alan için özelleştirilebilir. Bu öğreticide gördüğümüz gibi, FooterTemplate
Düğmeler, Metin Kutuları, Açılır Listeler, Onay Kutuları, veriye dayalı Web denetimlerini (Açılır Listeler gibi) doldurmak için veri kaynağı kontrollerini ve doğrulama denetimlerini içerebilir. Kullanıcının girişini toplamak için denetimlerin yanı sıra Ekle Düğmesi, BağlantıDüğmesi veya ImageButton gerekir.
Ekle düğmesine tıklandığında, ekleme iş akışını başlatmak için ObjectDataSource Insert()
yöntemi çağrılır. ObjectDataSource daha sonra yapılandırılmış insert yöntemini (bu öğreticide ProductsBLL
sınıf s AddProduct
yöntemi) çağırır. Ekleme yöntemi çağrılmadan önce GridView ekleme arabirimindeki değerleri ObjectDataSource koleksiyonuna InsertParameters
kopyalamamız gerekir. Bu, ObjectDataSource Inserting
olay işleyicisinde web denetimleri ekleme arabirimine program aracılığıyla başvurarak gerçekleştirilebilir.
Bu öğretici, GridView görünümünü geliştirmeye yönelik tekniklere bakışımızı tamamlar. Sonraki öğretici kümesinde görüntüler, PDF'ler, Word belgeleri vb. gibi ikili verilerle ve veri Web denetimleriyle nasıl çalışılacağı incelenir.
Mutlu Programlama!
Yazar Hakkında
Yedi ASP/ASP.NET kitabının yazarı ve 4GuysFromRolla.com kurucusu Scott Mitchell, 1998'den beri Microsoft Web teknolojileriyle çalışmaktadır. Scott bağımsız bir danışman, eğitmen ve yazar olarak çalışır. Son kitabı Sams Teach Yourself ASP.NET 24 Hours 2.0'dır. Ona adresinden mitchell@4GuysFromRolla.comulaşabilirsiniz.
Özel Teşekkürler
Bu eğitim serisi, birçok yararlı kişi tarafından incelendi. Bu öğreticinin baş gözden geçireni Bernadette Leigh oldu. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, mitchell@4GuysFromRolla.com'a bir mesaj bırakın.