AJAX控件之CascadingDropDown

      哎,最近需要學習Ajax來架構網站,沒有辦法啊,只有到處找資料來學了哦。Ajax的功能確實很炫也很酷,但是控件哪麼多,要學好還真的有點難度啊,只要是他的結構和很多控件的使用難。一開始看了視頻,就開始自己動手了,可是在動手過程中出了N多問題啊。一邊解決一邊GO ON。哎,搞了很長時間,才把它終於搞定了。在此說說我的一些經驗吧。

還是以我做的這個實例來說明:

我按照視頻做的是一個對DropDownList的一種效果和功能的控制,實現效果圖如下:

123

在進行代碼編寫過程中遇到了很多的問題,首先,這個CascadingDropDown控件就不是很穩定,所以在進行調試的時候可能有些代碼就會丟失,還有一個就是Webservice.cs的編寫,如果不寫在.cs中,寫在Webservice.asmx中,就不能實現效果,可能是有錯吧。

下面我就給出這個控件的代碼實例(希望對大家都點幫助):

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableEventValidation="false" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>AJAX控件之CascadingDropDown</title>
</head>
<body style="text-align: center">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <table border="1">
                <tr>
                    <td style="width: 100px; height: 26px;">
                        省</td>
                    <td style="width: 100px; height: 26px;">
                        <asp:DropDownList ID="DropDownList1" runat="server" Width="100px">
                        </asp:DropDownList></td>
                </tr>
                <tr>
                    <td style="width: 100px; height: 26px;">
                        市</td>
                    <td style="width: 100px; height: 26px;">
                        <asp:DropDownList ID="DropDownList2" runat="server" Width="100px">
                        </asp:DropDownList></td>
                </tr>
                <tr>
                    <td style="width: 100px">
                        縣</td>
                    <td style="width: 100px">
                        <asp:DropDownList ID="DropDownList3" runat="server" Width="100px" OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged" AutoPostBack="True">
                        </asp:DropDownList></td>
                </tr>
            </table>
        </div>
        <cc1:CascadingDropDown ID="CascadingDropDown1" runat="server" Category="province"
            LoadingText="正在加載..." PromptText="請選擇省" ServiceMethod="GetDropDownContents" TargetControlID="DropDownList1" ServicePath="WebService.asmx">
        </cc1:CascadingDropDown>
        <cc1:CascadingDropDown ID="CascadingDropDown2" runat="server" Category="city" LoadingText="正在加載..."
            PromptText="請選擇市" ServiceMethod="GetDropDownContents"
            ServicePath="WebService.asmx" TargetControlID="DropDownList2" ParentControlID="DropDownList1">
        </cc1:CascadingDropDown>
        <cc1:CascadingDropDown ID="CascadingDropDown3" runat="server" Category="county"
            LoadingText="正在加載..." PromptText="請選擇縣" ServiceMethod="GetDropDownContents"
            TargetControlID="DropDownList3" ServicePath="WebService.asmx" ParentControlID="DropDownList2">
        </cc1:CascadingDropDown>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="還未選擇"></asp:Label>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="DropDownList3" EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Default.aspx.cs:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (this.DropDownList3.SelectedItem.Text == "")
        {
            this.Label1.Text = "您還有一項未選擇哦!";
        }
        else
        {
            Label1.Text = "您的籍貫是" + DropDownList1.SelectedItem.Text + DropDownList2.SelectedItem.Text + DropDownList3.SelectedItem.Text;
        }
    }
}

XML.xml:

<?xml version="1.0" encoding="utf-8"?>
<WebService>
  <province name="江蘇省">
    <city name="鹽城市">
      <county name="建湖縣">
      </county>
      <county name="鹽城縣">
      </county>
    </city>
    <city name="南通市">
      <county name="海安縣">
      </county>
      <county name="如東縣">
      </county>
    </city>
    <city name="揚州市">
      <county name="寶應縣">
      </county>
    </city>
  </province>
  <province name="廣東省">
    <city name="潮州市">
      <county name="潮安縣">
      </county>
    </city>
    <city name="河源市">
      <county name="東源縣">
      </county>
      <county name="和平縣">
      </county>
    </city>
  </province>
</WebService>

WebService.cs:

using System;
using System.Web;
using System.Collections.Specialized;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml;

/// <summary>
/// WebService 的摘要說明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

    public WebService () //類的構造函數。
    {
    }

    private static XmlDocument xmlDoc;//申明一個XmlDocument的對象xmlDoc;
    private static object objectLock = new object();//創建一個對象。

    public static XmlDocument Document
    {
        get  //使用get方法。
        {
            lock (objectLock) //只能單線程使用,相當於在操作鎖定。
            {
                if (xmlDoc == null)
                {
                    xmlDoc = new XmlDocument();//對對象初始化、
                    xmlDoc.Load(HttpContext.Current.Server.MapPath("~/App_Data/XML.xml"));
                }
            }
            return xmlDoc;
        }
    }

    public static string[] Hierarchy
    {
        get { return new string[] { "province", "city" }; }
    }

    [WebMethod]
    public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)
    {
        StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
        return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Document, Hierarchy, knownCategoryValuesDictionary, category);
    }

}

Webservice.asmx:

<%@ WebService Language="C#" CodeBehind="~/App_Code/WebService.cs" Class="WebService" %>

發佈了33 篇原創文章 · 獲贊 0 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章