在现代Web开发中，AJAX（AsynchronousJavaScriptand XML）和ClientScriptCallBack技术被广泛用于创建动态和交互式的Web应用程序。本文将介绍如何使用这些技术来实现一个导航面板，该面板能够从SQL Server数据库中读取主类别和子类别信息，并在用户选择主类别时动态显示相关的子类别信息。
为了实现导航面板，首先需要设计两个SQL Server数据库表：Nav_Master和Nav_Details。Nav_Master表用于存储主类别信息，而Nav_Details表则存储与主类别相关的子类别信息。以下是创建这两个表的SQL命令：
CREATE TABLE [dbo].[Nav_Master] (
[ID] INT IDENTITY(1,1) NOT NULL,
[CatName] NVARCHAR(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
) ON [PRIMARY]
CREATE TABLE [dbo].[Nav_Details] (
[ID] INT IDENTITY(1,1) NOT NULL,
[ID_Father] INT NULL,
[Name] NVARCHAR(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
[URL] NVARCHAR(255) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
) ON [PRIMARY]
在用户点击主类别时，JavaScript函数GetData(Item, ID_Cat)会被调用，该函数负责发送选中的类别ID到服务器，并处理显示逻辑。以下是GetData函数的实现：
function GetData(Item, ID_Cat) {
ColapseAll(Item);
if (document.getElementById("Nav_Dav_" + Item).style.display == "none") {
SetDefaultImage_Src();
document.getElementById('Nav_IMG' + Item).src = "Images/UP.png";
document.getElementById("Nav_Dav_" + Item).style.display = "block";
if (document.getElementById("Nav_Dav_" + Item).innerHTML == "") {
UseCallBack(ID_Cat, Item);
ShowLoading(Item, "Show");
}
} else {
document.getElementById("Nav_Dav_" + Item).style.display = "none";
SetDefaultImage_Src();
}
}
在服务器端处理完成后，RaiseCallbackEvent方法会被调用，该方法从Nav_Details表中检索与选中的主类别相关的子类别信息，并将其存储在字符串_MasterCat中。以下是RaiseCallbackEvent方法的C#实现：
public void RaiseCallbackEvent(string eventArgument) {
string DBConString = System.Configuration.ConfigurationManager.AppSettings["DBConString"].ToString();
SqlConnection Con = new SqlConnection(DBConString);
SqlCommand Comm = new SqlCommand("Select Name,URL From Nav_Details Where ID_Father=@ID", Con);
Comm.Parameters.AddWithValue("@ID", eventArgument);
Con.Open();
SqlDataReader Reader = Comm.ExecuteReader();
while (Reader.Read()) {
_SearchResult += Reader[0] + "#" + Reader[1] + "@";
}
Con.Close();
}
GetCallbackResult方法负责返回_MasterCat变量，以下是其C#实现：
public string GetCallbackResult() {
System.Threading.Thread.Sleep(500);
return _SearchResult;
}
在客户端，GetFromServer方法负责显示子类别信息，它通过解析服务器发送的字符串，并添加相应的HTML元素来实现。以下是GetFromServer方法的JavaScript实现：
function GetFromServer(Server_Str, context) {
var Array = Server_Str.split("@");
var Count = Array.length;
var _String;
_String = "" + Detal_Top_Botton;
for (var i = 0; i < Array.length - 1; i++) {
var SmallArray = Array[i].split("#");
_String += "";
}
_String += Detal_Top_Botton + "
";
document.getElementById("Nav_Dav_" + context).innerHTML = _String;
ShowLoading(context, "Hide");
}
function SetDefaultImage_Src() {
for (var i = 1; i <= CountRow; i++) {
document.getElementById('Nav_IMG' + i).src = "Images/down.jpg";
}
}
function ShowLoading(ThisRow, State) {
var This = 'none', All = 'none';
if (State == "Show") { This = "block" }
for (var i = 1; i <= CountRow; i++) {
if (i != ThisRow) document.getElementById("LoadingIMG_" + i).style.display = All;
else {
document.getElementById("LoadingIMG_" + i).style.display = This;
}
}
}
function ColapseAll(ThisRow) {
for (var i = 1; i <= CountRow; i++) {
if (i != ThisRow) document.getElementById("Nav_Dav_" + i).style.display = "none";
}
}