DataList'in Düzenleme Arabirimini Özelleştirme (VB)Customizing the DataList's Editing Interface (VB)

Scott Mitchell tarafındanby Scott Mitchell

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

Bu öğreticide, bir, DropDownLists ve CheckBox içeren bir DataList için daha zengin bir düzen arabirimi oluşturacağız.In this tutorial we will create a richer editing interface for the DataList, one that includes DropDownLists and a CheckBox.

GirişIntroduction

DataList 'teki biçimlendirme ve Web denetimleri, düzenlenebilir arabirimini tanımlar EditItemTemplate.The markup and Web controls in the DataList s EditItemTemplate define its editable interface. Şimdiye kadar incelediğimiz tüm düzenlenebilir DataList örneklerinde, düzenlenebilir arabirim metin kutusu Web denetimlerinden oluşur.In all of the editable DataList examples we ve examined thus far, the editable interface has been composed of TextBox Web controls. Önceki öğreticide , doğrulama denetimleri ekleyerek düzenleme zamanı kullanıcı deneyimini geliştirdik.In the preceding tutorial we improved the edit-time user experience by adding validation controls.

EditItemTemplate, DropDownLists, RadioButtonLists, takvimler gibi metin kutusu dışındaki Web denetimlerini içerecek şekilde daha da genişletilebilir.The EditItemTemplate can be further expanded to include Web controls other than the TextBox, such as DropDownLists, RadioButtonLists, Calendars, and so on. Metin kutularına olduğu gibi, diğer Web denetimlerini içerecek şekilde, düzen arabirimini özelleştirirken, aşağıdaki adımları uygulayın:As with TextBoxes, when customizing the editing interface to include other Web controls, employ the following steps:

  1. EditItemTemplateWeb denetimini ekleyin.Add the Web control to the EditItemTemplate.
  2. Uygun özelliğe karşılık gelen veri alanı değerini atamak için DataBinding sözdizimini kullanın.Use databinding syntax to assign the corresponding data field value to the appropriate property.
  3. UpdateCommand olay işleyicisinde, programlı olarak Web denetim değerine erişin ve uygun BLL metoduna geçirin.In the UpdateCommand event handler, programmatically access the Web control value and pass it into the appropriate BLL method.

Bu öğreticide, bir, DropDownLists ve CheckBox içeren bir DataList için daha zengin bir düzen arabirimi oluşturacağız.In this tutorial we will create a richer editing interface for the DataList, one that includes DropDownLists and a CheckBox. Özellikle ürün bilgilerini listeleyen bir DataList oluşturacağız ve ürün adı, sağlayıcı, kategori ve Discontinued durumunun güncelleştirilmesini sağlar (bkz. Şekil 1).In particular, we'll create a DataList that lists product information and permits the product s name, supplier, category, and discontinued status to be updated (see Figure 1).

düzen arabirimi bir TextBox, Iki DropDownLists ve bir CheckBox IçerirThe Editing Interface Includes a TextBox, Two DropDownLists, and a CheckBox

Şekil 1: düzen arabirimi bir TextBox, Iki dropdownlists ve bir onay kutusu içerir (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 1: The Editing Interface Includes a TextBox, Two DropDownLists, and a CheckBox (Click to view full-size image)

1. Adım: ürün bilgilerini görüntülemeStep 1: Displaying Product Information

DataList 'ler düzenlenebilir arabirimini oluşturabilmeniz için önce salt okunurdur arabirimini derlemeniz gerekir.Before we can create the DataList s editable interface, we first need to build the read-only interface. CustomizedUI.aspx sayfasını EditDeleteDataList klasöründen açıp tasarımcıdan sayfaya bir DataList ekleyerek ID özelliğini Productsolarak ayarlayarak başlayın.Start by opening the CustomizedUI.aspx page from the EditDeleteDataList folder and, from the Designer, add a DataList to the page, setting its ID property to Products. DataList s akıllı etiketinden yeni bir ObjectDataSource oluşturun.From the DataList s smart tag, create a new ObjectDataSource. Bu yeni ObjectDataSource ProductsDataSource adlandırın ve ProductsBLL Class s GetProducts yönteminden verileri almak üzere yapılandırın.Name this new ObjectDataSource ProductsDataSource and configure it to retrieve data from the ProductsBLL class s GetProducts method. Önceki düzenlenebilir DataList öğreticilerinde olduğu gibi, düzenlenen ürün bilgilerini doğrudan Iş mantığı katmanına giderek güncelleştireceğiz.As with the previous editable DataList tutorials, we'll update the edited product s information by going directly to the Business Logic Layer. Buna uygun olarak, GÜNCELLEŞTIRME, ekleme ve SILME sekmelerinden (hiçbiri) açılan listeleri ayarlayın.Accordingly, set the drop-down lists in the UPDATE, INSERT, and DELETE tabs to (None).

GÜNCELLEŞTIRME, ekleme ve SILME sekmeleri aşağı açılan listelerini (hiçbiri) ayarlamak Set the UPDATE, INSERT, and DELETE Tabs Drop-Down Lists to (None)

Şekil 2: GÜNCELLEŞTIRME, ekleme ve silme sekmelerini ayarlama açılan listelerini (yok) ayarlayın (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 2: Set the UPDATE, INSERT, and DELETE Tabs Drop-Down Lists to (None) (Click to view full-size image)

ObjectDataSource yapılandırıldıktan sonra Visual Studio, döndürülen veri alanlarının her biri için adı ve değeri listeleyen DataList için varsayılan bir ItemTemplate oluşturur.After configuring the ObjectDataSource, Visual Studio will create a default ItemTemplate for the DataList that lists the name and value for each of the data fields returned. ItemTemplate, şablonun ürün adını kategori adı, tedarikçi adı, Fiyat ve Discontinued durumuyla birlikte bir <h4> öğesinde listelediğinden bu şekilde değiştirin.Modify the ItemTemplate so that the template lists the product name in an <h4> element along with the category name, supplier name, price, and discontinued status. Ayrıca, bir Düzenle düğmesi ekleyin ve CommandName özelliğinin Düzenle olarak ayarlandığından emin olun.Moreover, add an Edit button, making sure that its CommandName property is set to Edit. ItemTemplate için bildirim temelli biçimlendirme şu şekildedir:The declarative markup for my ItemTemplate follows:

<ItemTemplate>
    <h4>
        <asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Eval("ProductName") %>' />
    </h4>
    <table border="0">
        <tr>
            <td class="ProductPropertyLabel">Category:</td>
            <td class="ProductPropertyValue">
                <asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' />
            </td>
            <td class="ProductPropertyLabel">Supplier:</td>
            <td class="ProductPropertyValue">
                <asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' />
            </td>
        </tr>
        <tr>
            <td class="ProductPropertyLabel">Discontinued:</td>
            <td class="ProductPropertyValue">
                <asp:Label ID="DiscontinuedLabel" runat="server"
                    Text='<%# Eval("Discontinued") %>' />
            </td>
            <td class="ProductPropertyLabel">Price:</td>
            <td class="ProductPropertyValue">
                <asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' />
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <asp:Button runat="Server" ID="EditButton"
                    Text="Edit" CommandName="Edit" />
            </td>
        </tr>
    </table>
    <br />
</ItemTemplate>

Yukarıdaki biçimlendirme ürün bilgilerini, ürün adı için bir <H4> başlığını ve kalan alanlar için dört sütunlu <table> kullanarak düzenler.The above markup lays out the product information using an <h4> heading for the product s name and a four-column <table> for the remaining fields. Styles.csstanımlanmış ProductPropertyLabel ve ProductPropertyValue CSS sınıfları önceki öğreticilerde ele alınmıştır.The ProductPropertyLabel and ProductPropertyValue CSS classes, defined in Styles.css, have been discussed in previous tutorials. Şekil 3 ' te bir tarayıcıdan görüntülendiklerinde ilerleme durumu gösterilmektedir.Figure 3 shows our progress when viewed through a browser.

Ad, tedarikçi, kategori, Discontinued durumu ve her ürünün fiyatı görüntülenirThe Name, Supplier, Category, Discontinued Status, and Price of Each Product is Displayed

Şekil 3: ad, tedarikçi, kategori, Discontinued durumu ve her bir ürünün fiyatı görüntülenir (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 3: The Name, Supplier, Category, Discontinued Status, and Price of Each Product is Displayed (Click to view full-size image)

2. Adım: düzen arabirimine Web denetimleri eklemeStep 2: Adding the Web Controls to the Editing Interface

Özelleştirilmiş DataList düzenlemesi arabirimini oluşturmanın ilk adımı, gerekli Web denetimlerini EditItemTemplateeklemektir.The first step in building the customized DataList editing interface is to add the needed Web controls to the EditItemTemplate. Özellikle, kategori için bir DropDownList ve bir tedarikçi için bir DropDownList ve Discontinued durumu için bir onay kutusu gerekir.In particular, we need a DropDownList for the category, another for the supplier, and a CheckBox for the discontinued state. Bu örnekte ürün fiyatı düzenlenebilir olmadığından, etiketi Web denetimi kullanarak görüntülemeye devam edebiliriz.Since the product s price is not editable in this example, we can continue displaying it using a Label Web control.

Düzenleme arabirimini özelleştirmek için, DataList s akıllı etiketinden Şablonları Düzenle bağlantısına tıklayın ve açılan listeden EditItemTemplate seçeneğini belirleyin.To customize the editing interface, click on the Edit Templates link from the DataList s smart tag and choose the EditItemTemplate option from the drop-down list. EditItemTemplate bir DropDownList ekleyin ve ID Categoriesolarak ayarlayın.Add a DropDownList to the EditItemTemplate and set its ID to Categories.

Kategoriler için DropDownList eklemek Add a DropDownList for the Categories

Şekil 4: Kategoriler Için bir DropDownList ekleyin (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 4: Add a DropDownList for the Categories (Click to view full-size image)

Ardından, DropDownList s akıllı etiketinden veri kaynağı seç seçeneğini belirleyin ve CategoriesDataSourceadlı yeni bir ObjectDataSource oluşturun.Next, from the DropDownList s smart tag, select the Choose Data Source option and create a new ObjectDataSource named CategoriesDataSource. Bu ObjectDataSource 'ı CategoriesBLL Class s GetCategories() metodunu kullanacak şekilde yapılandırın (bkz. Şekil 5).Configure this ObjectDataSource to use the CategoriesBLL class s GetCategories() method (see Figure 5). Ardından, DropDownList s veri kaynağı Yapılandırma Sihirbazı her bir ListItem s Text ve Value özellikleri için veri alanlarının kullanılmasını ister.Next, the DropDownList s Data Source Configuration Wizard prompts for the data fields to use for each ListItem s Text and Value properties. DropDownList 'in CategoryName veri alanını göstermesini ve Şekil 6 ' da gösterildiği gibi CategoryID değerini kullanmasını sağlayabilirsiniz.Have the DropDownList display the CategoryName data field and use the CategoryID as the value, as shown in Figure 6.

CategoriesDataSource adlı yeni bir ObjectDataSource oluşturmaCreate a New ObjectDataSource Named CategoriesDataSource

Şekil 5: CategoriesDataSource adlı yeni bir ObjectDataSource oluşturun (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 5: Create a New ObjectDataSource Named CategoriesDataSource (Click to view full-size image)

DropDownList s görüntüleme ve değer alanlarını yapılandırma Configure the DropDownList s Display and Value Fields

Şekil 6: DropDownList s görüntüleme ve değer alanlarını yapılandırma (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 6: Configure the DropDownList s Display and Value Fields (Click to view full-size image)

Tedarikçilere yönelik bir DropDownList oluşturmak için bu adım dizisini tekrarlayın.Repeat this series of steps to create a DropDownList for the suppliers. Bu DropDownList için ID Suppliers olarak ayarlayın ve ObjectDataSource SuppliersDataSourceadlandırın.Set the ID for this DropDownList to Suppliers and name its ObjectDataSource SuppliersDataSource.

İki DropDownLists eklendikten sonra, Discontinued durumu için bir onay kutusu ve ürün adı için bir TextBox ekleyin.After adding the two DropDownLists, add a CheckBox for the discontinued state and a TextBox for the product s name. CheckBox ve TextBox için ID s öğesini sırasıyla Discontinued ve ProductNameolarak ayarlayın.Set the ID s for the CheckBox and TextBox to Discontinued and ProductName, respectively. Kullanıcının ürün adı için bir değer sağladığından emin olmak için bir RequiredFieldValidator ekleyin.Add a RequiredFieldValidator to ensure that the user provides a value for the product s name.

Son olarak, Güncelleştir ve Iptal düğmelerini ekleyin.Lastly, add the Update and Cancel buttons. Bu iki düğme için, CommandName özelliklerinin sırasıyla güncelleştir ve Iptal olarak ayarlandığını unutmayın.Remember that for these two buttons it is imperative that their CommandName properties are set to Update and Cancel, respectively.

Düzenleme arabirimini istediğiniz gibi düzenleyebilirsiniz.Feel free to lay out the editing interface however you like. Aşağıdaki bildirim temelli söz dizimi ve ekran görüntüsünde gösterildiği gibi, salt okuma arabiriminden aynı dört sütunlu <table> düzeni kullanmayı kabul ediyorum:I ve opted to use the same four-column <table> layout from the read-only interface, as the following declarative syntax and screen shot illustrates:

<EditItemTemplate>
    <h4>
        <asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Eval("ProductName") %>' />
    </h4>
    <table border="0">
        <tr>
            <td class="ProductPropertyLabel">Name:</td>
            <td colspan="3" class="ProductPropertyValue">
                <asp:TextBox runat="server" ID="ProductName" Width="90%" />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
                    ControlToValidate="ProductName"
                    ErrorMessage="You must enter a name for the product."
                    runat="server">*</asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td class="ProductPropertyLabel">Category:</td>
            <td class="ProductPropertyValue">
                <asp:DropDownList ID="Categories" runat="server"
                    DataSourceID="CategoriesDataSource"
                    DataTextField="CategoryName" DataValueField="CategoryID" />
            </td>
            <td class="ProductPropertyLabel">Supplier:</td>
            <td class="ProductPropertyValue">
                <asp:DropDownList ID="Suppliers"
                    DataSourceID="SuppliersDataSource" DataTextField="CompanyName"
                    DataValueField="SupplierID" runat="server" />
            </td>
        </tr>
        <tr>
            <td class="ProductPropertyLabel">Discontinued:</td>
            <td class="ProductPropertyValue">
                <asp:CheckBox runat="server" id="Discontinued" />
            </td>
            <td class="ProductPropertyLabel">Price:</td>
            <td class="ProductPropertyValue">
                <asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' />
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <asp:Button runat="Server" ID="UpdateButton" CommandName="Update"
                    Text="Update" />
                 
                <asp:Button runat="Server" ID="CancelButton" CommandName="Cancel"
                    Text="Cancel" CausesValidation="False" />
            </td>
        </tr>
    </table>
    <br />
    <asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
        OldValuesParameterFormatString="original_{0}" SelectMethod="GetCategories"
        TypeName="CategoriesBLL">
    </asp:ObjectDataSource>
    <asp:ObjectDataSource ID="SuppliersDataSource" runat="server"
        OldValuesParameterFormatString="original_{0}" SelectMethod="GetSuppliers"
        TypeName="SuppliersBLL">
    </asp:ObjectDataSource>
</EditItemTemplate>

düzen arabirimi salt okuma arabirimi gibi düzenlenmiştirThe Editing Interface is Laid Out like the Read-Only Interface

Şekil 7: düzen arabirimi salt okuma arabirimi gibi düzenlenir (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 7: The Editing Interface is Laid Out like the Read-Only Interface (Click to view full-size image)

3. Adım: EditCommand ve CancelCommand olay Işleyicilerini oluşturmaStep 3: Creating the EditCommand and CancelCommand Event Handlers

Şu anda, EditItemTemplate veri bağlama söz dizimi yoktur (UnitPriceLabeldışında ItemTemplate).Currently, there is no databinding syntax in the EditItemTemplate (except for the UnitPriceLabel, which was copied over verbatim from the ItemTemplate). Veri bağlama söz dizimini bir kez daha ekleyeceğiz, ancak ilk olarak DataList s EditCommand ve CancelCommand olayları için olay işleyicileri oluşturalım.We'll add the databinding syntax momentarily, but first let s create the event handlers for the DataList s EditCommand and CancelCommand events. EditCommand olay işleyicisinin sorumluluğunun, düzenleme düğmesine tıklandığı DataList öğesi için düzenleme arabirimini işleymesinin, CancelCommand s işinin DataList 'i düzenleme öncesi durumuna döndürmesidir.Recall that the responsibility of the EditCommand event handler is to render the editing interface for the DataList item whose Edit button was clicked, whereas the CancelCommand s job is to return the DataList to its pre-editing state.

Bu iki olay işleyicisini oluşturun ve aşağıdaki kodu kullanın:Create these two event handlers and have them use the following code:

Protected Sub Products_EditCommand(source As Object, e As DataListCommandEventArgs) _
    Handles Products.EditCommand
    ' Set the DataList's EditItemIndex property to the
    ' index of the DataListItem that was clicked
    Products.EditItemIndex = e.Item.ItemIndex
    ' Rebind the data to the DataList
    Products.DataBind()
End Sub
Protected Sub Products_CancelCommand(source As Object, e As DataListCommandEventArgs) _
    Handles Products.CancelCommand
    ' Set the DataList's EditItemIndex property to -1
    Products.EditItemIndex = -1
    ' Rebind the data to the DataList
    Products.DataBind()
End Sub

Bu iki olay işleyicisi yerine, Düzenle düğmesine tıkladığınızda düzenleme arabirimi görüntülenir ve Iptal düğmesine tıklandığında düzenlenen öğe salt okunurdur moduna döndürülür.With these two event handlers in place, clicking the Edit button displays the editing interface and clicking the Cancel button returns the edited item to its read-only mode. Şekil 8 ' de Chef Anton s Gumbo Mix için Düzenle düğmesine tıklandıktan sonra DataList görüntülenir.Figure 8 shows the DataList after the Edit button has been clicked for Chef Anton s Gumbo Mix. Henüz bir veri bağlama sözdizimini düzen arabirimine eklemediğimiz için ProductName metin kutusu boş, Discontinued onay kutusu işaretlenmemiş ve Categories ve Suppliers DropDownLists tarafından seçilen ilk öğe.Since we ve yet to add any databinding syntax to the editing interface, the ProductName TextBox is blank, the Discontinued CheckBox unchecked, and the first items selected from the Categories and Suppliers DropDownLists.

Düzenle düğmesine tıklamak düzenleme arabirimini görüntülerClicking the Edit Button Displays the Editing Interface

Şekil 8: Düzenle düğmesine tıkladığınızda düzenleme arabirimi görüntülenir (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 8: Clicking the Edit Button Displays the Editing Interface (Click to view full-size image)

4. Adım: bağlama sözdizimini, düzen arabirimine eklemeStep 4: Adding the DataBinding Syntax to the Editing Interface

Düzen arabiriminin geçerli ürün değerlerini görüntülemesi için veri alanı değerlerini uygun Web denetimi değerlerine atamak üzere veri bağlama söz dizimini kullandık.To have the editing interface display the current product s values, we need to use databinding syntax to assign the data field values to the appropriate Web control values. Veri bağlama söz dizimi, Şablonları Düzenle ekranına gidip Web denetimleri akıllı etiketleri ' nden DataBindings bağlantısını Düzenle ' ye tıklayarak tasarımcı aracılığıyla uygulanabilir.The databinding syntax can be applied through the Designer by going to the Edit Templates screen and selecting the Edit DataBindings link from the Web controls smart tags. Alternatif olarak, veri bağlama söz dizimi doğrudan bildirime dayalı biçimlendirmeye eklenebilir.Alternatively, the databinding syntax can be added directly to the declarative markup.

ProductName veri alanı değerini ProductName TextBox s Text özelliğine, CategoryID ve SupplierID veri alanı değerlerini Categories ve Suppliers DropDownLists SelectedValue özelliklerine ve Discontinued veri alanı değerini Discontinued onay kutusu s Checked özelliğine atayın.Assign the ProductName data field value to the ProductName TextBox s Text property, the CategoryID and SupplierID data field values to the Categories and Suppliers DropDownLists SelectedValue properties, and the Discontinued data field value to the Discontinued CheckBox s Checked property. Bu değişiklikleri, tasarımcı aracılığıyla ya da doğrudan bildirime dayalı biçimlendirme aracılığıyla yaptıktan sonra, sayfayı bir tarayıcı aracılığıyla geri ziyaret edin ve Chef Anton s Gumbo Mix için Düzenle düğmesine tıklayın.After making these changes, either through the Designer or directly through the declarative markup, revisit the page through a browser and click the Edit button for Chef Anton s Gumbo Mix. Şekil 9 ' da gösterildiği gibi, veri bağlama söz dizimi geçerli değerleri TextBox, DropDownLists ve CheckBox içine ekledi.As Figure 9 shows, the databinding syntax has added the current values into the TextBox, DropDownLists, and CheckBox.

Düzenle düğmesine tıklamak düzenleme arabirimini görüntülerClicking the Edit Button Displays the Editing Interface

Şekil 9: Düzenle düğmesine tıkladığınızda düzenleme arabirimi görüntülenir (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 9: Clicking the Edit Button Displays the Editing Interface (Click to view full-size image)

5. Adım: Kullanıcı değişikliklerini, UpdateCommand olay Işleyicisine kaydetmeStep 5: Saving the User s Changes in the UpdateCommand Event Handler

Kullanıcı bir ürünü düzenlediğinde ve Güncelleştir düğmesine tıkladığında, bir geri gönderme gerçekleşir ve DataList UpdateCommand olayı başlatılır.When the user edits a product and clicks the Update button, a postback occurs and the DataList s UpdateCommand event fires. Olay İşleyicide, veritabanındaki ürünü güncelleştirmek için EditItemTemplate ve arabirimdeki Web denetimlerinden değerleri okuduk.In the event handler, we need to read the values from the Web controls in the EditItemTemplate and interface with the BLL to update the product in the database. Önceki öğreticilerde gördüğünüz gibi, güncelleştirilmiş ürünün ProductID DataKeys koleksiyonu aracılığıyla erişilebilir.As we ve seen in previous tutorials, the ProductID of the updated product is accessible through the DataKeys collection. Aşağıdaki kodun gösterdiği gibi, Kullanıcı tarafından girilen alanlara FindControl("controlID")kullanılarak Web denetimlerine programlı olarak başvurulduğunda erişilir:The user-entered fields are accessed by programmatically referencing the Web controls using FindControl("controlID"), as the following code shows:

Protected Sub Products_UpdateCommand(source As Object, e As DataListCommandEventArgs) _
    Handles Products.UpdateCommand
    If Not Page.IsValid Then
        Exit Sub
    End If
    ' Read in the ProductID from the DataKeys collection
    Dim productID As Integer = Convert.ToInt32(Products.DataKeys(e.Item.ItemIndex))
    ' Read in the product name and price values
    Dim productName As TextBox = CType(e.Item.FindControl("ProductName"), TextBox)
    Dim categories As DropDownList=CType(e.Item.FindControl("Categories"), DropDownList)
    Dim suppliers As DropDownList = CType(e.Item.FindControl("Suppliers"), DropDownList)
    Dim discontinued As CheckBox = CType(e.Item.FindControl("Discontinued"), CheckBox)
    Dim productNameValue As String = Nothing
    If productName.Text.Trim().Length > 0 Then
        productNameValue = productName.Text.Trim()
    End If
    Dim categoryIDValue As Integer = Convert.ToInt32(categories.SelectedValue)
    Dim supplierIDValue As Integer = Convert.ToInt32(suppliers.SelectedValue)
    Dim discontinuedValue As Boolean = discontinued.Checked
    ' Call the ProductsBLL's UpdateProduct method...
    Dim productsAPI As New ProductsBLL()
    productsAPI.UpdateProduct(productNameValue, categoryIDValue, supplierIDValue, _
        discontinuedValue, productID)
    ' Revert the DataList back to its pre-editing state
    Products.EditItemIndex = -1
    Products.DataBind()
End Sub

Kod, sayfadaki tüm doğrulama denetimlerinin geçerli olduğundan emin olmak için Page.IsValid özelliğine danışarak başlatılır.The code starts out by consulting the Page.IsValid property to ensure that all the validation controls on the page are valid. Page.IsValid True, düzenlenen ürün s ProductID değeri DataKeys koleksiyonundan okunurdur ve EditItemTemplate veri girişi Web denetimlerine programlı olarak başvurulur.If Page.IsValid is True, the edited product s ProductID value is read from the DataKeys collection and the data entry Web controls in the EditItemTemplate are programmatically referenced. Daha sonra, bu Web denetimlerinde bulunan değerler, daha sonra uygun UpdateProduct aşırı yüklemeye geçirilmiş değişkenlere okunurdur.Next, the values from these Web controls are read into variables that are then passed into the appropriate UpdateProduct overload. Veriler güncelleştirildikten sonra DataList, önceden düzenlenen durumuna döndürülür.After updating the data, the DataList is returned to its pre-editing state.

Note

Kodu ve bu örneği odaklanmış tutmak için, BLL ve dal düzeyi özel durum öğreticisinde eklenen özel durum işleme mantığını atlıyorum.I ve omitted the exception handling logic added in the Handling BLL- and DAL-Level Exceptions tutorial in order to keep the code and this example focused. Alıştırma olarak, bu Öğreticiyi tamamladıktan sonra bu işlevselliği ekleyin.As an exercise, add this functionality after completing this tutorial.

6. Adım: NULL CategoryID ve SupplierID değerlerini IşlemeStep 6: Handling NULL CategoryID and SupplierID Values

Northwind veritabanı, Products tablo s CategoryID ve SupplierID sütunları için NULL değerleri sağlar.The Northwind database allows for NULL values for the Products table s CategoryID and SupplierID columns. Ancak, düzen arabirimimiz Şu anda NULL değerleri barındıramamaktadır.However, our editing interface doesn t currently accommodate NULL values. CategoryID veya SupplierID sütunları için NULL değerine sahip bir ürünü düzenlemeye başladığımızda, şuna benzer bir hata iletisi içeren bir ArgumentOutOfRangeException alacaksınız: ' Categories ' öğe listesinde bulunmadığından, geçersiz bir SelectedValue içeriyor.If we attempt to edit a product that has a NULL value for either its CategoryID or SupplierID columns, we'll get an ArgumentOutOfRangeException with an error message similar to: 'Categories' has a SelectedValue which is invalid because it does not exist in the list of items. Ayrıca, şu anda bir ürün kategorisi veya tedarikçi değeriniNULL olmayan bir değerden NULL bir değere değiştirme yolu yoktur.Also, there s currently no way to change a product s category or supplier value from a non-NULL value to a NULL one.

Kategori ve tedarikçi DropDownLists için NULL değerlerini desteklemek üzere, ek bir ListItemeklememiz gerekiyor.To support NULL values for the category and supplier DropDownLists, we need to add an additional ListItem. Bu ListItemiçin Text değer olarak (hiçbiri) kullanmayı seçtim, ancak d isterseniz bunu başka bir şekilde (boş bir dize gibi) değiştirebilirsiniz.I ve chosen to use (None) as the Text value for this ListItem, but you can change it to something else (such as an empty string) if you d like. Son olarak, DropDownLists AppendDataBoundItems Trueolarak ayarlamayı unutmayın. Bunu unutursanız, DropDownList 'e Bağlan Kategoriler ve tedarikçiler statik olarak eklenen ListItemüzerine yazar.Finally, remember to set the DropDownLists AppendDataBoundItems to True; if you forget to do so, the categories and suppliers bound to the DropDownList will overwrite the statically-added ListItem.

Bu değişiklikleri yaptıktan sonra, DataList s EditItemTemplate ' deki DropDownLists işaretlemesi aşağıdakine benzer görünmelidir:After making these changes, the DropDownLists markup in the DataList s EditItemTemplate should look similar to the following:

<asp:DropDownList ID="Categories" DataSourceID="CategoriesDataSource"
    DataTextField="CategoryName" DataValueField="CategoryID"  runat="server"
    SelectedValue='<%# Eval("CategoryID") %>' AppendDataBoundItems="True">
    <asp:ListItem Value=" Selected="True">(None)</asp:ListItem>
</asp:DropDownList>
...
<asp:DropDownList ID="Suppliers" DataSourceID="SuppliersDataSource"
    DataTextField="CompanyName" DataValueField="SupplierID" runat="server"
    SelectedValue='<%# Eval("SupplierID") %>' AppendDataBoundItems="True">
    <asp:ListItem Value=" Selected="True">(None)</asp:ListItem>
</asp:DropDownList>

Note

Statik ListItem s, tasarımcı aracılığıyla veya doğrudan bildirime dayalı sözdizimi aracılığıyla bir DropDownList 'e eklenebilir.Static ListItem s can be added to a DropDownList through the Designer or directly through the declarative syntax. Bir veritabanı NULL değerini temsil etmek için bir DropDownList öğesi eklenirken, bildirime dayalı söz dizimi aracılığıyla ListItem eklediğinizden emin olun.When adding a DropDownList item to represent a database NULL value, be sure to add the ListItem through the declarative syntax. Tasarımcıda ListItem koleksiyonu düzenleyicisini kullanıyorsanız, oluşturulan bildirime dayalı sözdizimi, boş bir dize atandığında Value ayarını tamamen atlar, şöyle bildirime dayalı biçimlendirme oluşturulur: <asp:ListItem>(None)</asp:ListItem>.If you use the ListItem Collection Editor in the Designer, the generated declarative syntax will omit the Value setting altogether when assigned a blank string, creating declarative markup like: <asp:ListItem>(None)</asp:ListItem>. Bu durum zararsız görünebilir, ancak eksik Value DropDownList 'in yerinde Text özellik değerini kullanmasına neden olur.While this may look harmless, the missing Value causes the DropDownList to use the Text property value in its place. Yani, bu NULL ListItem seçilirse, (Bu öğreticideCategoryID veya SupplierID, bu öğreticide) değerin (yok), bir özel durumla sonuçlanabileceği anlamına gelir.That means that if this NULL ListItem is selected, the value (None) will be attempted to be assigned to the product data field (CategoryID or SupplierID, in this tutorial), which will result in an exception. Value=""açıkça ayarlayarak, NULL ListItem seçildiğinde ürün verileri alanına bir NULL değeri atanır.By explicitly setting Value="", a NULL value will be assigned to the product data field when the NULL ListItem is selected.

Bir tarayıcıdan ilerleme durumunu görüntülemek için bir dakikanızı ayırın.Take a moment to view our progress through a browser. Bir ürünü düzenlediğinizde, Categories ve Suppliers DropDownLists öğesinin her ikisinin de DropDownList başlangıcında bir (None) seçeneği olduğunu unutmayın.When editing a product, note that the Categories and Suppliers DropDownLists both have a (None) option at the start of the DropDownList.

Kategoriler ve satıcılar DropDownLists , (None) seçeneği içerirThe Categories and Suppliers DropDownLists include a (None) Option

Şekil 10: Categories ve Suppliers Dropdownlists (yok) seçeneği içerir (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 10: The Categories and Suppliers DropDownLists include a (None) Option (Click to view full-size image)

(None) seçeneğini bir veritabanı NULL değeri olarak kaydetmek için UpdateCommand olay işleyicisine dönmemiz gerekiyor.To save the (None) option as a database NULL value, we need to return to the UpdateCommand event handler. categoryIDValue ve supplierIDValue değişkenlerini null değer atanabilir tamsayılar olacak şekilde değiştirin ve yalnızca DropDownList s SelectedValue boş bir dize değilse Nothing dışında bir değer atayın:Change the categoryIDValue and supplierIDValue variables to be nullable integers and assign them a value other than Nothing only if the DropDownList s SelectedValue is not an empty string:

Dim categoryIDValue As Nullable(Of Integer) = Nothing
If Not String.IsNullOrEmpty(categories.SelectedValue) Then
    categoryIDValue = Convert.ToInt32(categories.SelectedValue)
End If
Dim supplierIDValue As Nullable(Of Integer) = Nothing
If Not String.IsNullOrEmpty(suppliers.SelectedValue) Then
    supplierIDValue = Convert.ToInt32(suppliers.SelectedValue)
End If

Bu değişiklik ile, Kullanıcı bir NULL veritabanı değerine karşılık gelen açılan listelerden birinden (hiçbiri) seçeneğini belirlediyseniz, Nothing değeri UpdateProduct BLL yöntemine geçirilir.With this change, a value of Nothing will be passed into the UpdateProduct BLL method if the user selected the (None) option from either of the drop-down lists, which corresponds to a NULL database value.

ÖzetSummary

Bu öğreticide, üç farklı giriş Web denetimi içeren bir metin kutusu, iki DropDownLists ve onay kutusu içeren daha karmaşık bir DataList Editing arabirimi oluşturmayı, doğrulama denetimleriyle birlikte gördük.In this tutorial we saw how to create a more complex DataList editing interface that included three different input Web controls a TextBox, two DropDownLists, and a CheckBox along with validation controls. Yapılandırma arabirimini oluştururken, adımlar, kullanılan Web denetimlerinden bağımsız olarak aynıdır: bir Web denetimlerini DataList s 'e ekleyerek başlayın EditItemTemplate; uygun Web denetimi özellikleriyle ilgili veri alanı değerlerini atamak için DataBinding sözdizimini kullanın; UpdateCommand olay işleyicisinde, Web denetimlerine ve uygun özelliklerine programlı bir şekilde erişin ve değerlerini BLL 'e geçirerek bu özelliklere sahiptir.When building the editing interface, the steps are the same regardless of the Web controls being used: start by adding the Web controls to the DataList s EditItemTemplate; use databinding syntax to assign the corresponding data field values with the appropriate Web control properties; and, in the UpdateCommand event handler, programmatically access the Web controls and their appropriate properties, passing their values into the BLL.

Bir düzen arabirimi oluştururken, ister yalnızca metin kutuları, ister farklı Web denetimleri koleksiyonu olsun, veritabanı NULL değerlerini doğru şekilde işlediğinizden emin olun.When creating an editing interface, whether it s composed of just TextBoxes or a collection of different Web controls, be sure to correctly handle database NULL values. NULL s için hesaplama yaparken, yalnızca bir düzen arabiriminde var olan bir NULL değerini doğru görüntülemediğinizi ve ayrıca bir değeri NULLolarak işaretlemek için bir yol sunuyoruz.When accounting for NULL s, it is imperative that you not only correctly display an existing NULL value in the editing interface, but also that you offer a means for marking a value as NULL. Veritecleriyle ilgili olan DropDownLists için genellikle, Value özelliği açıkça boş bir dizeye (Value="") ayarlanmış statik bir ListItem ekleme ve UpdateCommand olay işleyicisine NULL``ListItem seçili olup olmadığını belirleme için bir kod ekleme anlamına gelir.For DropDownLists in DataLists, that typically means adding a static ListItem whose Value property is explicitly set to an empty string (Value=""), and adding a bit of code to the UpdateCommand event handler to determine whether or not the NULL``ListItem was selected.

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 öğreticide lider gözden geçirenler dennıs Patterson, David suru ve Randy SCHMIDT olarak değiştirildi.Lead reviewers for this tutorial were Dennis Patterson, David Suru, and Randy Schmidt. 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.