二级菜单无刷新联动（XMLPOST + Jscript 方式）

根据Menu Type 的选择来，来获取Menu的数据

Menu_Type 存有两个选择主菜单和子菜单

主菜单不存有菜单项，用来在在其下面挂菜单的，也就是说主菜单都存有子项菜单

Menu选择子菜单，Menu列出所有的菜单内容

程序是放在ascx 中做的，下面我们来看代码部分

1. 前台代码（全部代码,其实我们主要看jscript 部分XmlPost(obj) 和背景色high light 部分）

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UC_Menu_Level_Init.ascx.cs" Inherits="Live.Admin.UserControls.UC_Menu_Level_Init" %>

<table border="1" bordercolor="lightblue" bordercolordark="#ffffff" cellpadding="0"

cellspacing="0" width="100%">

<tr>

<table border="0" bordercolor="#888888" bordercolordark="#ffffff" cellpadding="0"

cellspacing="0" width="100%">

<tr>

Menu Level Edit</td>

</tr>

</table>

<table border="0" bordercolor="#888888" bordercolordark="#ffffff" cellpadding="0"

cellspacing="0" width="100%">

<tr>

Menu Type</td>

<asp:DropDownList ID="DropDownList_MenuType" runat="server" Width="154px">

</asp:DropDownList></td>

</tr>

<tr>

Menu Level Code</td>

<asp:TextBox ID="TextBox_Level_Code" runat="server" Width="263px"></asp:TextBox></td>

</tr>

<tr>

Menu Parent Level Code</td>

<asp:TextBox ID="TextBox_Level_Parent_Code" runat="server" Width="263px"></asp:TextBox></td>

</tr>

<tr>

Menu Level Name(En)</td>

<asp:TextBox ID="TextBox_Level_Name_En" runat="server" Width="263px"></asp:TextBox></td>

</tr>

Menu Level Name(Cn)</td>

<asp:TextBox ID="TextBox_Level_Name_Cn" runat="server" Width="263px"></asp:TextBox></td>

</tr>

Menu</td>

</asp:DropDownList></td>

</tr>

<tr>

Sort Number</td>

<asp:TextBox ID="TextBox_SortNumber" runat="server" Width="41px"></asp:TextBox></td>

</tr>

<tr>

Status</td>

<asp:DropDownList ID="DropDownList_Status" runat="server" Width="154px">

</asp:DropDownList></td>

</tr>

</table>

<table border="0" bordercolor="#888888" bordercolordark="#ffffff" cellpadding="0"

cellspacing="0" width="100%">

<tr>

<asp:Button ID="Button_Menu_Add" runat="server" Text="Add"

Width="58px" /></td>

</tr>

</table>

<asp:DataGrid ID="DataGrid_MenuList" runat="server" AutoGenerateColumns="False" BackColor="#F7F7F7"

BorderColor="#F7F7F7" BorderStyle="Solid" BorderWidth="1px" CssClass="table"

DataKeyField="Menu_ID" Font-Bold="False" Font-Italic="False" Font-Overline="False"

Font-Size="10pt" Font-Strikeout="False" Font-Underline="False" Width="100%">

<ItemStyle BackColor="AliceBlue" CssClass="textcenter" Font-Bold="False" Font-Italic="False"

Font-Overline="False" Font-Strikeout="False" Font-Underline="False" />

<HeaderStyle BackColor="LightSteelBlue" CssClass="headcenter" Font-Bold="True" Font-Italic="False"

Font-Overline="False" Font-Strikeout="False" Font-Underline="False" />

<asp:BoundColumn DataField="Menu_ID" HeaderText="Menu ID"></asp:BoundColumn>

<asp:BoundColumn DataField="Menu_Name_En" HeaderText="Menu Name(En)"></asp:BoundColumn>

<asp:BoundColumn DataField="Menu_Name_Cn" HeaderText="Menu Name(Cn)"></asp:BoundColumn>

<asp:BoundColumn DataField="Url" HeaderText="Url"></asp:BoundColumn>

<asp:TemplateColumn HeaderText="Status">

<asp:Label ID="Level_Status_L1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Status.Status_Desc_Cn") %>'

Visible="true"></asp:Label>

</ItemTemplate>

<asp:DropDownList ID="DropDownList_Status_D" runat="server" Width="112px">

</asp:DropDownList>

<asp:Label ID="Level_Status_L2" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Status.Status_Code") %>'

Visible="False"></asp:Label>

</EditItemTemplate>

</asp:TemplateColumn>

<asp:TemplateColumn HeaderText="Update Menu">

<asp:LinkButton ID="Linkbutton_Edit" runat="server" CausesValidation="false" CommandName="Edit"

NAME="Linkbutton1" Text="<img border=0 src=Images/Files/Edit.gif alt=Edit this item>"></asp:LinkButton>

</ItemTemplate>

<asp:LinkButton ID="Linkbutton2" runat="server" CausesValidation="false" CommandName="Update"

NAME="Linkbutton2" Text="<img border=0 src=Images/Files/Save.gif alt=Save...>"></asp:LinkButton> 

<asp:LinkButton ID="Linkbutton3" runat="server" CausesValidation="false" CommandName="Cancel"

NAME="Linkbutton3" Text="<img border=0 src=Images/Files/Undo.gif alt=Cancel...>"></asp:LinkButton>

</EditItemTemplate>

</asp:TemplateColumn>

<asp:ButtonColumn CommandName="Delete" HeaderText="Delete Menu" Text="<img border=0 src=Images/Files/Delete.gif alt=Delete this item>">

</asp:ButtonColumn>

</Columns>

</asp:DataGrid></td>

</tr>

</table>

　　//以XML求取数据

function XmlPost(obj)

{

　　 var svalue = obj.value;

　　 //alert(svalue);

　　 if(svalue=="请选择")

　　 {

　　 document.getElementById('<%=DropDownList_Menu.ClientID %>').length=0;

　　 }

　　 else if(svalue==1) //Top 主菜单

　　 {

　　 document.getElementById('<%=DropDownList_Menu.ClientID %>').length=0;//清空原来存在的

　　 document.getElementById('<%=DropDownList_Menu.ClientID %>').options.add(new Option("--不设菜单--",0)); //不设菜单，Menu_ID 都设为

　　 }

　　 else

　　 {

　　 var webFileUrl = "?TypeID=" + svalue;

　　 var result = "";

　　 var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");

　　 xmlHttp.open("POST", webFileUrl, false);//使用XMLPOST方式

　　 xmlHttp.send("");//发送

　　 result = xmlHttp.responseText;//得到返回的结果

　　 if(result != "")

　　 {

　　　　 document.getElementById('<%=DropDownList_Menu.ClientID %>').length=0;//清空原来存在的

　　　　 var LArray = result.split(",");

　　　　 for(var i=0;i<LArray.length;i++)

　　　　 {

　　　　　　 var ary1 = LArray[i].toString().split("|");

　　　　　　 //alert(ary1[0].toString());

　　　　　　 //alert(ary1[1].toString());

　　　　　　 document.getElementById('<%=DropDownList_Menu.ClientID %>').options.add(new Option(ary1[0].toString(),ary1[1].toString()));

　　　　 }

　　 else

　　 {

　　　　 alert(result);

　　 }

　</script>

2. 后台代码部分：

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Collections.Generic;

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;

using Live.BLL;

using Live.Components.Model;

using Live.Components.Enumerations;

namespace Live.Admin.UserControls

{

public partial class UC_Menu_Level_Init : System.Web.UI.UserControl

{

private string GetCurrentUserName()

{

HttpContext context = HttpContext.Current;

string userName = context.Request.AnonymousID;

if (context.Request.IsAuthenticated)

userName = context.User.Identity.Name;

return userName;

}

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

//BindMenuType();

// BindMenu();

BindMenuType();

BindStatus();

string TypeID = Request.QueryString["TypeID"];//第一次请求结果为null

if (TypeID + "Flag" != "Flag")//如果加Flag不等于Flag，表示DropDownList_MenuType改变过，触发过onchange事件

{

BindMenu();

}

private void BindMenuType()

{

DropDownList_MenuType.DataSource = BLL.Type.GetTypeByTypeGroup(TypeGroup.Menu.ToString());

DropDownList_MenuType.DataTextField = TypeInfo.FIELD_TYPE_NAME_CN;

DropDownList_MenuType.DataValueField = TypeInfo.FIELD_TYPE_ID;

DropDownList_MenuType.DataBind();

DropDownList_MenuType.Items.Insert(0, "请选择");

DropDownList_MenuType.Items[0].Selected = true;

DropDownList_MenuType.Attributes.Add("onchange", "XmlPost(this);");

}

private void BindMenu()

{

string Mystr = "";

IList<MenuInfo> _list_menu=new List<MenuInfo>();

_list_menu=BLL.Menu.GetAllMenu();

for (int i = 0; i < _list_menu.Count; i++)//循环List里的记录

{

Mystr += "," + _list_menu[i].Menu_Name_Cn.ToString() + "|" + _list_menu[i].Menu_ID.ToString();

//每一行都有记录和编辑，使用，和|分隔，在XMLPOST中用到

}

Mystr = Mystr.Substring(1);

Response.Write(Mystr);//向HTTP输出内容流写入一个字符数组

Response.End();//停止该页的执行

}

private void BindStatus()

{

DropDownList_Status.DataSource = Status.GetAllStatus();

DropDownList_Status.DataTextField = StatusInfo.FIELD_STATUS_NAME_CN;

DropDownList_Status.DataValueField = StatusInfo.FIELD_STATUS_CODE;

DropDownList_Status.DataBind();

}

小结：做的过程中需要注意一点，在web usercontrol 中使用document.all(“控件ID”)和

document.getElementById(“控件ID”) 与在page 中使用 document.all(“控件ID”)和

document.getElementById(“控件ID”) 是不同的。

在page 中可以直接这么使用document.all(“控件ID”)

在web usercontrol 中最好使用document.getElementById('<%=控件ID.ClientID %>')

不会有可能会出jscript 找不到对象或对象为空的错误信息。

posted on 2010-03-26 15:10 封起De日子阅读(115) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

封起De日子

二级菜单无刷新联动（XMLPOST + Jscript 方式）

导航

公告