二级菜单无刷新联动(XMLPOST + Jscript 方式)

二级菜单无刷新联动(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=”&lt;img border=0 src=Images/Files/Edit.gif alt=Edit this item&gt;”></asp:LinkButton>


</ItemTemplate>


<EditItemTemplate>


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


NAME=”Linkbutton2″
Text=”&lt;img border=0 src=Images/Files/Save.gif alt=Save…&gt;”></asp:LinkButton>&nbsp;


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


NAME=”Linkbutton3″
Text=”&lt;img border=0 src=Images/Files/Undo.gif alt=Cancel…&gt;”></asp:LinkButton>


</EditItemTemplate>


</asp:TemplateColumn>


<asp:ButtonColumn
CommandName=”Delete”
HeaderText=”Delete Menu”
Text=”&lt;img border=0 src=Images/Files/Delete.gif alt=Delete this item&gt;”>


</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 找不到对象或对象为空 的错误信息。

Leave a Comment