Microsoft ASP.NET AJAX çerçevesini kullanarak basamaklı açılan liste oluşturma adımları

Bu makalede, ASP.NET AJAX çerçevesini kullanarak basamaklı bir açılan listenin nasıl derlenmesi gösterilmektedir.

Orijinal ürün sürümü: .NET Framework 3.5
Özgün KB numarası: 976156

Giriş

Basamaklı açılan liste, bir denetimin üst veya önceki DropDownList denetimlere bağımlı olduğu DropDownList bir dizi bağımlı DropDownList denetimdir. Denetimdeki DropDownList öğeler, kullanıcı tarafından başka DropDownList bir denetimden seçilen bir öğeye göre doldurulur. Üst DropDownList denetimin seçimi değiştiğinde, web sayfası AJAX Web hizmetini çağırarak alt DropDownList denetimin değerlerinin listesini alır. ASP.NET AJAX çerçevesi, istemci betiklerini kullanarak web hizmetlerini (.asmx dosyaları) tarayıcıdan çağırmanızı sağlar. Bu nedenle, üst DropDownList denetimin istemci tarafı onchange olayında Web hizmetini çağırdığınızda, Web sayfası yalnızca alt DropDownList denetimin öğelerini doldurmak için kısmen yenilenir.

Basamaklı açılan liste oluşturma adımları

1. Visual Studio'da bir ASP.NET Web Hizmeti uygulaması oluşturun.

   Not

   Sağlanan örnek kodda, C# örnek projesinin proje adı KB_CascadingDDL_CS. Visual Basic .NET örnek projesinin proje adı KB_CascadingDDL_VB.

2. Projeye bir AJAX Web Formu ekleyin.

   Not

   Örnek kodda, Web formunun dosya adı Default.aspx. AJAX Web hizmeti adı WebService'tir.

3. AJAX Web hizmeti için WebServiceName.asmx dosyasını açın ve sınıf bildiriminin açıklama işaretini aşağıdaki gibi kaldırın.

   Visual Basic

   <System.Web.Script.Services.ScriptService()>
   Public Class WebService
   

   Visual C#

   [System.Web.Script.Services.ScriptService]
   public class WebService : System.Web.Services.WebService
   

   Not

   Bu adım, AJAX Web hizmetine istemci tarafı betiklerinden erişilmesine olanak tanır. Bir AJAX Web hizmeti sınıfı özniteliğinin ScriptServiceAttribute uygulanmış olması ve istemci tarafı betiklerinden çağrılacak tek tek yöntemlerin özniteliğinin WebMethodAttribute uygulanmış olması gerekir.

4. Web formunun WebFormName.aspx dosyasını açın ve asp:ScriptManager> etiketini aşağıdaki gibi değiştirin<:

   <asp:ScriptManager ID="ScriptManager1" runat="server">
       <Services>
           <asp:ServiceReference Path="~/WebServiceName.asmx" />
       </Services>
   </asp:ScriptManager>
   

   AJAX Web hizmetinin bir ASP.NET Web formundaki istemci tarafı betiklerinden çağrılmasını sağlamak için, önce Web sayfasına bir ScriptManager denetim eklemeniz gerekir. Ardından, etikete bir <asp:ServiceReference> alt öğe <asp:ScriptManager> ekleyerek Web hizmetine başvurun. etiketinde <asp:ScriptManager> özniteliğini Path Web hizmeti dosyasına işaret etmek için ayarlayın.

   ServiceReference nesnesi, ASP.NET 2.0 AJAX uzantılarına, Web sayfasındaki istemci tarafı betiklerinden belirtilen Web hizmetini çağırmak için bir JavaScript proxy sınıfı oluşturmasını bildirir. Proxy sınıfı, AJAX Web hizmetindeki her Web Hizmeti yöntemine karşılık gelen yöntemlere sahiptir. Web sayfası, giriş parametreleri olarak kullanılan veya Web Hizmeti yöntemleri için değer döndüren sunucu veri türlerine karşılık gelen JavaScript proxy sınıflarını da içerir. Bu proxy sınıfları, bu parametreleri başlatan istemci tarafı betikleri yazmanızı ve bunları Web Hizmeti yöntem çağrısına geçirmenizi sağlar.

5. EnableEventValidation Aşağıdaki örnekte gösterildiği gibi, WebFormName.aspx dosyasının kaynak kodunda Web sayfasının özelliğini false olarak ayarlayın.

   <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="KB_CascadingDDL_VB._Default"
    EnableEventValidation="false" %>
   

   Not

   Bu adım, Web Hizmeti yöntem çağrılarını kullanırken geçersiz geri göndermeyi önlemektir.

6. Gerekli ASP.NET denetimlerini oluşturmak için asp:ScriptManager> etiketinin altına <aşağıdaki kodu ekleyin.

   <table>
       <tr>
           <td>
               Make:
           </td>
           <td>
               <asp:DropDownList ID="ddlMake" Width="200" runat="server" AutoPostBack="false" onchange="ddl_changed(this)" />
           </td>
       </tr>
       <tr>
           <td>
               Model:
           </td>
           <td>
               <asp:DropDownList ID="ddlModel" Width="200" runat="server" AutoPostBack="false" onchange="ddl_changed(this)" />
           </td>
       </tr>
       <tr>
           <td>
               Color:
           </td>
           <td>
               <asp:DropDownList ID="ddlColor" Width="200" runat="server" AutoPostBack="false" onchange="DisplayResult()" />
           </td>
       </tr>
       <tr>
           <td>
               <asp:Button ID="btnReset" runat="server" Text="Reset" />
           </td>
       </tr>
   </table>
   <a id="aResult" />
   

7. AJAX Web hizmeti için Web Hizmeti yöntemleri oluşturun. Aşağıdaki kodu kopyalayıp WebServiceName.asmx dosyasına yapıştırın.

   Visual Basic

   Imports System.Web.Services
   Imports System.Web.Services.Protocols
   Imports System.ComponentModel
   
   ' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
   <System.Web.Script.Services.ScriptService()> _
   <System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _
   <System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
   <ToolboxItem(False)> _
   Public Class WebService
       Inherits System.Web.Services.WebService
   
       <WebMethod()> _
       Public Function GetMakeValue() As String()
           Return New String() {"Please select", "Ford", "Dodge"}
       End Function
   
       <WebMethod()> _
       Public Function GetChildValue(ByVal parentID As String, ByVal parentValue As String) As String()
           If parentValue = "Please select" Then
               Return Nothing
           End If
   
           Dim values As String()
           If parentID = "ddlMake" Then
               If parentValue = "Ford" Then
                   values = New String() {"Please select", "Explorer", "F150", "Mustang"}
               ElseIf parentValue = "Dodge" Then
                   values = New String() {"Please select", "Durango", "Dakota", "Viper"}
               Else
                   Return New String() {"Invalid Make value!"}
               End If
           ElseIf parentID = "ddlModel" Then
               Select Case parentValue
                   Case "Explorer", "Dakota", "Viper"
                       values = New String() {"Please select", "Black", "Green", "Yellow"}
                   Case "Durango", "F150", "Mustang"
                       values = New String() {"Please select", "White", "Red", "Blue"}
                   Case Else
                       values = New String() {"Invalid Model value!"}
               End Select
           Else
               Return New String() {"Invalid Category value!"}
           End If
           Return values
       End Function
   End Class
   

   Visual C#

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Web.Services;
   
   namespace KB_CascadingDDL_CS
   {
       /// <summary>
       /// Summary description for WebService
       /// </summary>
       [WebService(Namespace = "http://tempuri.org/")]
       [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
       [System.ComponentModel.ToolboxItem(false)]
       // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
       [System.Web.Script.Services.ScriptService]
       public class WebService : System.Web.Services.WebService
       {
           [WebMethod()]
           public string[] GetMakeValue()
           {
               return new string[] { "Please select", "Ford", "Dodge" };
           }
   
           [WebMethod()]
           public string[] GetChildValue(string parentID, string parentValue)
           {
               if (parentValue == "Please select")
               {
                   return null;
               }
   
               string[] values;
               if (parentID == "ddlMake")
               {
                   if (parentValue == "Ford")
                   {
                       values = new string[] { "Please select", "Explorer", "F150", "Mustang" };
                   }
                   else if (parentValue == "Dodge")
                   {
                       values = new string[] { "Please select", "Durango", "Dakota", "Viper" };
                   }
                   else
                   {
                       return new string[] { "Invalid Make value!" };
                   }
               }
               else if (parentID == "ddlModel")
               {
                   switch (parentValue)
                   {
                       case "Explorer":
                       case "Dakota":
                       case "Viper":
                           values = new string[] { "Please select", "Black", "Green", "Yellow" };
                           break;
                       case "Durango":
                       case "F150":
                       case "Mustang":
                           values = new string[] { "Please select", "White", "Red", "Blue" };
                           break;
                       default:
                           values = new string[] { "Invalid Model value!" };
                           break;
                   }
               }
               else
               {
                   return new string[] { "Invalid Category value!" };
               }
               return values;
           }
       }
   }
   

8. İstemci tarafı betiklerinden AJAX Web hizmeti için Web Hizmeti yöntemlerini çağırın. Aşağıdaki kodu kopyalayıp 6. adımda eklediğiniz kodun altına yapıştırın.

   <script type="text/javascript">
       function pageLoad()
       {
           // call a Web service method with no parameters and the user context.
           KB_CascadingDDL_VB.WebService.GetMakeValue(SucceededCallbackWithContext, FailedCallback, "fillMake");
       }
   
       // Event handler for ddlMake and ddlModel.
       // This function calls a Web service method
       // passing simple type parameters and the user context.
       function ddl_changed(sender)
       {
           // This initiates the call to the server-side method in your code-behind
           // The parameters are as follows:
           // 1st : Specify all the parameters expected by your code-behind method
           //      (in this case there are 2: parentControl's ID, parentControl's selected text)
           // 2nd : Specify a callback method when the call succeeds
           // 3rd : Specify a callback method when the call fails(optional)
           // 4th : Specify a user context object (option - not shown)
           //      (in this case we need to assign the parentControl's ID as the user context)
           KB_CascadingDDL_VB.WebService.GetChildValue(sender.id, sender[sender.selectedIndex].text,
           SucceededCallbackWithContext, FailedCallback, sender.id);
       }
   
       // This is the callback function called if the
       // Web service succeeded. It accepts the result
       // object, the user context, and the method name as
       // parameters.
       function SucceededCallbackWithContext(result, userContext) {
   
           if (userContext == "fillMake") {
               //fill the Make
               var ddl = $get('ddlMake');
           } else if (userContext == "ddlMake") {
               // fill the Model
               var ddl = $get('ddlModel');
               $get('ddlColor').options.length = 0;
           } else if (userContext == "ddlModel") {
               // fill the Color
               var ddl = $get('ddlColor');
           }
           // clear the options
           ddl.options.length = 0;
           if (result)
           {
               var i = 0;
               for (var item in result)
               {
                   // item is the key, result[item] is the value
                   ddl.options.add(new Option(result[item], item));
                   i++;
               }
           } else {
               alert("Invalid! Please reset the selection!");
               $get(userContext).focus();
           }
       }
   
       // This is the callback function called if the
       // Web service failed. It accepts the error object
       // as a parameter.
       function FailedCallback(error)
       {
           if (error)
           {
               alert(error.get_message());
           }
           else
               alert("An unexpeceted error occurred");
       }
   
       //This the function to show the three DropDownLists'selection
       function DisplayResult()
       {
           $get("aResult").innerHTML = "You have selected a " +
           $get("ddlMake")[$get("ddlMake").selectedIndex].text + "," +
           $get("ddlModel")[$get("ddlModel").selectedIndex].text + "," +
           $get("ddlColor")[$get("ddlColor").selectedIndex].text + " car!";
       }
   </script>
   

   Bir betikten Web hizmeti yöntemini çağırmak zaman uyumsuzdur. Dönüş değeri almak veya isteğin ne zaman döndürüleceğini belirlemek için başarılı bir geri çağırma işlevi sağlamanız gerekir. İstek başarıyla tamamlandığında geri çağırma işlevi çağrılır ve Web Hizmeti Yöntemi çağrısından döndürülen değeri içerir. Hataları işlemek için başarısız bir geri çağırma işlevi de sağlayabilirsiniz. Ayrıca, geri çağırma işlevlerinde kullanmak üzere kullanıcı bağlam bilgilerini geçirebilirsiniz.

   AJAX Web hizmetinde bir Web Hizmeti yöntemini aşağıdaki biçimde çağırabilirsiniz:

   theServiceNameSpace.WebServiceName.ServiceMethodName(parameters, SucceededCallbackFunctionName, FailedCallbackFunctionName, userContextString);
   

   Birden çok Web hizmeti yöntemi çağrısından çağrılan tek bir başarılı geri çağırma işlevi sağlayabilirsiniz. İşlevin farklı çağıranları ayırt edebilmesini sağlamak için kullanıcı bağlam bilgilerini parametresindeki işleve geçirebilirsiniz.

9. Projeyi oluşturun.

Başvurular

ASP.NET Ajax: Gelişmiş Etkileşim ve Yanıt Verme Hızı