二级菜单无刷新联动(XMLPOST + Jscript 方式)
二级菜单无刷新联动(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>
<td
style=”width: 100%; height: 13px”
valign=”top”>
<table
border=”0″
bordercolor=”#888888″
bordercolordark=”#ffffff”
cellpadding=”0″
cellspacing=”0″
width=”100%”>
<tr>
<td
style=”width: 100%; height: 19px”
valign=”top”>
Menu Level Edit</td>
</tr>
</table>
<table
border=”0″
bordercolor=”#888888″
bordercolordark=”#ffffff”
cellpadding=”0″
cellspacing=”0″
width=”100%”>
<tr>
<td
align=”left”
style=”width: 160px; height: 24px”
valign=”top”>
Menu Type</td>
<td
align=”left”
style=”width: 679px; height: 24px”
valign=”top”>
<asp:DropDownList
ID=”DropDownList_MenuType”
runat=”server”
Width=”154px”>
</asp:DropDownList></td>
</tr>
<tr>
<td
align=”left”
style=”width: 160px; height: 24px”
valign=”top”>
Menu Level Code</td>
<td
align=”left”
style=”width: 679px; height: 24px”
valign=”top”>
<asp:TextBox
ID=”TextBox_Level_Code”
runat=”server”
Width=”263px”></asp:TextBox></td>
</tr>
<tr>
<td
align=”left”
style=”width: 160px; height: 24px”
valign=”top”>
Menu Parent Level Code</td>
<td
align=”left”
style=”width: 679px; height: 24px”
valign=”top”>
<asp:TextBox
ID=”TextBox_Level_Parent_Code”
runat=”server”
Width=”263px”></asp:TextBox></td>
</tr>
<tr>
<td
align=”left”
style=”width: 160px; height: 24px”
valign=”top”>
Menu Level Name(En)</td>
<td
align=”left”
style=”width: 679px; height: 24px”
valign=”top”>
<asp:TextBox
ID=”TextBox_Level_Name_En”
runat=”server”
Width=”263px”></asp:TextBox></td>
</tr>
<tr
style=”color: #000000″>
<td
align=”left”
style=”width: 160px; height: 24px”
valign=”top”>
Menu Level Name(Cn)</td>
<td
align=”left”
style=”width: 679px; height: 24px”
valign=”top”>
<asp:TextBox
ID=”TextBox_Level_Name_Cn”
runat=”server”
Width=”263px”></asp:TextBox></td>
</tr>
<tr
style=”color: #000000″>
<td
align=”left”
style=”width: 160px; height: 22px”>
Menu</td>
<td
align=”left”
style=”width: 679px; height: 22px”><asp:DropDownList
ID=”DropDownList_Menu”
runat=”server”
Width=”154px”>
</asp:DropDownList></td>
</tr>
<tr>
<td
align=”left”
style=”width: 160px; height: 24px”>
Sort Number</td>
<td
align=”left”
style=”width: 679px; height: 24px”>
<asp:TextBox
ID=”TextBox_SortNumber”
runat=”server”
Width=”41px”></asp:TextBox></td>
</tr>
<tr>
<td
align=”left”
style=”width: 160px; height: 24px”>
Status</td>
<td
align=”left”
style=”width: 679px; height: 24px”>
<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>
<td
style=”width: 100%; height: 21px”
valign=”top”>
<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%”>
<FooterStyle
CssClass=”headcenter”
/>
<EditItemStyle
BackColor=”LightGray”
ForeColor=”Black”
Width=”100%”
/>
<SelectedItemStyle
BackColor=”Transparent”
/>
<AlternatingItemStyle
BackColor=”White”
BorderColor=”White”
/>
<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”
/>
<Columns>
<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”>
<ItemTemplate>
<asp:Label
ID=”Level_Status_L1″
runat=”server”
Text=’<%# DataBinder.Eval(Container, “DataItem.Status.Status_Desc_Cn”) %>‘
Visible=”true”></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<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”>
<ItemStyle
Width=”15%”
/>
<ItemTemplate>
<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>
<EditItemTemplate>
<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>
<script
type=”text/javascript”
defer=true>
//以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 找不到对象或对象为空 的错误信息。