哎,最近需要學習Ajax來架構網站,沒有辦法啊,只有到處找資料來學了哦。Ajax的功能確實很炫也很酷,但是控件哪麼多,要學好還真的有點難度啊,只要是他的結構和很多控件的使用難。一開始看了視頻,就開始自己動手了,可是在動手過程中出了N多問題啊。一邊解決一邊GO ON。哎,搞了很長時間,才把它終於搞定了。在此說說我的一些經驗吧。
還是以我做的這個實例來說明:
我按照視頻做的是一個對DropDownList的一種效果和功能的控制,實現效果圖如下:
在進行代碼編寫過程中遇到了很多的問題,首先,這個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" %>