用DataList + Repeater实现二级下拉列表当前被点击的字体加粗.

本文链接：https://blog.youkuaiyun.com/computerlr/article/details/768354

用DataList + Repeater实现二级下拉列表当前被点击的字体加粗.
1.前台代码:

<asp:DataList runat="server" ID="rpt_class" RepeatDirection="Horizontal" RepeatColumns="1">
<ItemTemplate>
<a href='javascript:expandDiv('div<%# DataBinder.Eval(Container.DataItem, "ClassID") %>')'>
   <asp:HyperLink Runat=server Font-Bold='<%# GetBold( DataBinder.Eval(Container.DataItem, "ClassID") , Request.Params["id"] ) %>'
        NavigateUrl='<%# "../index.aspx?id=" + DataBinder.Eval(Container.DataItem, "ClassID") + "&pid=" + DataBinder.Eval(Container.DataItem, "ParentID") %>' ID="Hyperlink1" NAME="Hyperlink1" CssClass="menu_blue">
    <%# DataBinder.Eval(Container.DataItem, "ClassName") %>
   </asp:HyperLink>
</a>
<div style="display:'none'" ID='<%# "div" + DataBinder.Eval(Container.DataItem, "ClassID") %>'>
   <table width="220" border="0" cellspacing="0">
    <asp:Repeater id="MyRepeater" runat="server"
       DataSource='<%# GetResultsSource(int.Parse(DataBinder.Eval(Container.DataItem, "ClassID").ToString())) %>'>
     <ItemTemplate>
      <tr>
       <td>
        <table width="100%" border="0" cellspacing="0">
         <tr>
          <td width="10"></td>
          <td width="92%">
           <asp:HyperLink Runat=server Font-Bold='<%# GetBold( DataBinder.Eval(Container.DataItem, "ClassID") , Request.Params["pid"] ) %>'
        NavigateUrl='<%# "../index.aspx?pid=" + DataBinder.Eval(Container.DataItem, "ClassID") + "&id=" + DataBinder.Eval(Container.DataItem, "ParentID") %>' ID="Hyperlink2" CssClass="menu_blue">
            <%# DataBinder.Eval(Container.DataItem, "ClassName") %>
           </asp:HyperLink>
           </a>
          </td>
         </tr>
        </table>
        <table width="100%" height="1" border="0" cellspacing="0" bgcolor="CCCCCC">
         <tr>
          <td valign="bottom"></td>
         </tr>
        </table>
       </td>
       <td width="20"> </td>
      </tr>
     </ItemTemplate>
    </asp:Repeater>
   </table>
</div>
</ItemTemplate>
</asp:DataList>

2.后台代码: 注:( 此程序采用三层结构开发,开始using System.. 部分省略..)

namespace DZweb.WebUI
{
using ...
using DZweb.SQLDAL.News;

/// ShowLink 的摘要说明。

public class ShowLink : System.Web.UI.UserControl
{
protected System.Web.UI.WebControls.DataList rpt_class;

DZweb.SQLDAL.News.NewsClass_SQL class_sql = new NewsClass_SQL();

public string id;
private void Page_Load(object sender, System.EventArgs e)
{
   if(!Page.IsPostBack)
   {
    BindCtrl();
   }
   //
   try
   {    if(Request.Params["id"].ToString() != null)
    {
         id = Request.Params["id"].ToString();
         ext( Convert.ToInt16( id ) );
    }
    }
   catch
   {}
}
private void ext( int id )
{
   Page.RegisterStartupScript("OnClick" ,"<script language='javascript'>expandDiv(div" + id + ")</script>");
}

private void BindCtrl()
{
rpt_class.DataSource = class_sql.GetClassByParentID( 0 ).Tables[0].DefaultView;
rpt_class.DataBind();
}

public bool GetBold( object obj1 , object obj2 )
{

   if( Convert.ToInt16( obj1 ) == Convert.ToInt16( obj2 ) )
   {    return true;   }
   else
   {    return false;   }
}

public DataView GetResultsSource( int id )
{
return class_sql.GetClassByParentID( id ).Tables[0].DefaultView;
}

//窗体自动生成代码 ( 略 )

}
}

3. 被调用的数据访问层中的部分代码: (此处引用SQLHelper 提供的方法来执行对数据源的操作)

using Microsoft.ApplicationBlocks.Data;
using System.Web;
using System.Data;
namespace DZweb.SQLDAL.News
{
public class NewsClass_SQL:INewsClass
{
private const string CLASSID="@ClassID";//
private const string PARENTID="@ParentID";//
private const string CLASSNAME="@ClassName";//
private const string CLASSSORTID="@ClassSortID";//
public string conn=ConfigurationSettings.AppSettings["Connstr"];

public NewsClass_SQL()
{
}
//
public DataSet GetClassByParentID(int ID)
{
return SqlHelper.ExecuteDataset(conn,System.Data.CommandType.Text,"Select * from Class Where ParentID =" + ID );
}

//
public DataSet GetBigClassID()
{

   return SqlHelper.ExecuteDataset(conn,System.Data.CommandType.Text,"Select * from Class Where ParentID = 0");
}
   //
public DataTable GetArticleByClassID(int Cid)
{

   DataSet ds = new DataSet();
   ds = SqlHelper.ExecuteDataset(conn,System.Data.CommandType.Text,"Select Top 1 * from Article Where ArticleColumnID=" + Cid );
   DataTable dt = ds.Tables[0];
   return dt;
}
//
public DataSet GetSubClassID(int classID)
{
   SqlParameter[] param=new SqlParameter[1];
   param[0]=new SqlParameter("@ClassID",System.Data.SqlDbType.Int);

   param[0].Value = classID;
   return SqlHelper.ExecuteDataset(conn,System.Data.CommandType.StoredProcedure, "sp_GetSubClassID", param);
}
//窗体自动生成代码( 略 )
}

=================== 上面是一个 "用户自定义控件" 和数据操作层的代码
要实现如图的功能, 需要将控件放入页面,
如下是应用到页面的实例:

4. 我用了两个 label 和上面的控件 ,实现当点击连接时在同一页显示文章标题和内容

using ...
using DZweb.Class;
using DZweb.Model.News;
using DZweb.SQLDAL.News;

namespace DZweb
{

/// index 的摘要说明。

public class index : System.Web.UI.Page
{
NewsClass_SQL NCsql = new NewsClass_SQL();
protected System.Web.UI.WebControls.Repeater Repeater1;
protected System.Web.UI.WebControls.Label lb_content;

protected System.Web.UI.WebControls.Label lbl_title;

private void Page_Load(object sender, System.EventArgs e)
{
   if(!Page.IsPostBack)
   {
    if(Request.QueryString["pid"]!="0")
    {
     bind(Convert.ToInt16(Request.QueryString["pid"]));
    }
    else
    {
                   bind(Convert.ToInt16(Request.QueryString["id"]));
    }
   }
}
private void bind(int pid)
{
   try
   {
    DataTable dt = NCsql.GetArticleByClassID( Convert.ToInt16(pid) );
    if( dt.Rows.Count != 0 )
    {
     lb_content.Text = dt.Rows[0]["ArticleContent"].ToString();
     lbl_title.Text = dt.Rows[0]["ArticleTitle"].ToString();
    }
    else
    {        }
   }
   catch (Exception err)
   {
                Response.Write(err.Message);
   }
}
//窗体自动生成代码( 略 )
}
}