Repeater 嵌套 Repeater
作为一个刚入行的IT小鸟，每天学习，是必须的！
光自学肯定是不够的！由于本人IQ比较低，经常一个小问题都会想不明白。
还好有媳妇儿的帮助，才把这个功能给实现了。
现在就在这里总结下，以示敬意。o(∩_∩)o 哈哈
分析：
前台页面，放置两个Repeater，然后在Repeater1 里面放置一个 HiddenField控件，用来获取标题。
然后在Repeater1 的ItemDataBound 事件种根据获取的标题来加载 二级标题。
数据库访问代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.OleDb;
using System.Data;
/// <summary>
/// Summary description for MyDBHelper
/// </summary>
public class MyDBHelper
{
public MyDBHelper()
{
//
// TODO: Add constructor logic here
//
}
//连接字符串
public static string strConStr=@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\NoDB.mdb;"
+"Persist Security Info=True";
//连接数据库
static OleDbConnection con;
public static OleDbConnection Con
{
get
{
if(con==null)
{
con = new OleDbConnection(strConStr);
}
else if(con.State== ConnectionState.Broken)
{
con.Close();
con.Open();
}
else if( con.State== ConnectionState.Closed)
{
con.Open();
}
return con;
}
}
//执行查询 返回Datatable
#region
public static DataTable GetBySQL(string sql)
{
DataTable dt = new DataTable();
OleDbCommand cmd = new OleDbCommand(sql, Con);
OleDbDataAdapter da = new OleDbDataAdapter(cmd);
da.Fill(dt);
return dt;
}
#endregion
//执行删除 增加 修改
#region
public static int ExcuteBySQL(string sql)
{
OleDbCommand cmd = new OleDbCommand(sql, Con);
int rs = cmd.ExecuteNonQuery();
return rs;
}
#endregion
}
页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<script src="../Script/jquery-1.3.2.min.js" language="javascript" type="text/javascript">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//$("#divNavigation>dl>dt>dd").css("display","none");
$("#divNavigation>dl>dt>dd").hide();
$.each($("#divNavigation>dl>dt"), function () {
$(this).click(function () {
$("#divNavigation>dl>dt>dd").not($(this).next()).slideUp();
$(this).next().slideToggle(500);
});
});
$("ul li").mousemove(function () {
$(this).css("background-color", "#ccc");
}).mouseout(function () {
$(this).css("background-color", "#eee");
})
;
/* 鼠标经过 */
$("#divNavigation dl").each(function () {
$(this).children("dt").mouseover(function () {
$(this).next().css("display", "block");
//$(this).next().animate({ opacity: 'show' }, 700);
}).mouseout(function () {
$(this).next().css("display", "none");
//$(this).next().animate({ opacity: 'hide' }, 700);
});
/* 鼠标移动到dd上 */
$(this).children("dd").mouseover(function () {
$(this).css("display", "block");
}).mouseout(function () {
$(this).css("display", "none");
});
});
});
</script>
<style type="text/css">
dl,dd,dt,ul,li
{
margin:0;
padding:0;
height :25px;
line-height:25px;
font-family:微软雅黑;
font-size:12px;
}
#divNavigation
{
width:240px;
text-align:center;
}
#divNavigation dl dt
{
border-top:1px solid #ccc;
background-color:#ccc;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
height:40px;
line-height:40px;
font-size:18px;
cursor:pointer
}
#divNavigation ul li
{
list-style:none;
}
#divNavigation li
{
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
line-height:25px;
background-color:#eee;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="width:1024px;height:50px;margin:0 auto; text-align:center; vertical-align:middle">
<asp:Repeater ID="rptNavigation" runat="server"
onitemdatabound="rptNavigation_ItemDataBound" >
<ItemTemplate>
<div id="divNavigation" style="margin-left:1px;margin-top:10px;height:30px; float:left;">
<asp:HiddenField id="hf" runat="server" Value='<%#Eval("n_name") %>'/>
<dl>
<dt><%#Eval("n_name") %></dt>
<dd>
<ul style="">
<asp:Repeater ID="rptS" runat="server">
<ItemTemplate>
<li><%#Eval("n_name") %></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</dd>
</dl>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<!-- 备份
<div id="divNavigation" style="margin-top:10px;height:30px; float:left;">
<dl>
<dt>基本信息管理</dt>
<dd>
<ul style="">
<li>Jquery</li>
<li>WPF</li>
<li>Asp.net</li>
<li>Winform</li>
</ul>
</dd>
</dl>
</div>
-->
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
CS 代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class web_web : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
BindNavigation();
}
//绑定主导航
public void BindNavigation()
{
string sql = "select * from vip_navigation where n_bid=0";
rptNavigation.DataSource = MyDBHelper.GetBySQL(sql);
rptNavigation.DataBind();
}
//项绑定事件
protected void rptNavigation_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
//查找隐藏域
HiddenField hfValue = (HiddenField)e.Item.FindControl("hf");
//得到隐藏域的值
string strName = hfValue.Value;
//查找第二个Repeater
Repeater repts = (Repeater)e.Item.FindControl("rptS");
//根据查找到的名称，来获取ID
string sql1 = "select n_id from vip_navigation where n_name='" + strName + "'";
DataTable dt = MyDBHelper.GetBySQL(sql1);
int id = 0;
foreach (DataRow dr in dt.Rows)
{
id = (int)dr["n_id"];
}
//根据ＩＤ获取二级导航
repts.DataSource = MyDBHelper.GetBySQL("select n_name from vip_navigation where n_bid=" + id);
repts.DataBind();
}
}
效果：
