Tabbed content autochange với asp.net Csharp và SQL server

Đây là câu hỏi của một bạn trong diễn đàn hmweb hỏi (phiên bản cũ cũng đã có bạn hỏi), Thấy rằng đây cũng là vấn đề khá hay và có thể áp dụng khi xây dựng website nên tôi viết bài hướng dẫn hy vọng giúp ích cho các bạn.

Tabbed này được áp dụng từ trang kollermedia.at bạn có thể vào trang đó download mã nguồn mẫu về xem code html và js họ trình bày. Vấn đề ở đây là ta cần hiểu và áp dụng nó bằng việc lấy dữ liệu từ cơ sở dữ liệu đúng như yêu cầu câu hỏi của diễn đàn đặt ra.

Để cho ngắn gọn khi trình bày tôi sẽ không trình bày các style sheet nữa, bạn có thể download nó ở cuối bài viết, Trong style khi bạn download về có đoạn bạn cần chú ý đó là các tabcontenti.(i ở đây là các chỉ số tương ứng với số Tabbed của ta) Code javascript bạn cần chú ý các điểm sau:

<script type="text/javascript">
    var tablink_idname = new Array("tablink")
    var tabcontent_idname = new Array("tabcontent") 
    var tabcount = new Array('<%=hd1.Value %>')
    var loadtabs = new Array("1")  
    var autochangemenu = 1;
    var changespeed = 3;
    var stoponhover = 0;
    function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0))  {counter=0;}menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}
    window.onload=function(){
    var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]);  a++; b++;}while (b<=menucount);
    if (autochangemenu!=0){start_autochange();}
    }
</script>

Trong đó:
- new Array("value"): value là số Tabbed (Số động theo số bản ghi Category của csdl) ở đây tôi gán bằng giá trị thẻ HiddenField sẽ được truyền Value trong code C#
- loadtabs: Tabbed mặc định khi trang được Load
- changespeed: Thời gian tự chuyển giữa các Tab (3~ 3 giây)

Trong trang aspx bạn cần các control sau đẻ hiển thị:

<asp:HiddenField ID="hd1" runat="server" />
<asp:Literal ID="ltlContent" runat="server" />

Giả xử CSDL của ta có 2 bảng là TB_Category và TB_News quan hệ 1-n qua trường CateID. Ta cần viết các hàm như sau:

+ Hàm thực thi câu truy vấn trả về DataTable

/// <summary>
/// Hàm truy vấn dữ liệu trả về bảng
/// </summary>
private DataTable GetData(string sConn, string sQuery)
{
    SqlDataAdapter da = new SqlDataAdapter(sQuery, sConn);
    DataTable dtSelect = new DataTable();
    da.Fill(dtSelect);
    return dtSelect;
}

+ Hàm trả về danh sách 10 bài viết mới nhất theo chuyên mục (CateID)

- Hàm này trả về là 1 string sử dụng cho các Tabcontent, mỗi tabcontent tương ứng của 1 chuyên mục và ở đây tôi list ra 10 bản ghi mới nhất của chuyện mục đó,

private string GetContentOfTab(int cateID, string sConn)
{
    string strHTML = "";
    string sSQL = @"SELECT TOP 10 nw.NewsID, nw.Title 
        FROM TB_News nw
        WHERE nw.CateID=" + cateID.ToString() + " AND nw.Status=1 ORDER BY nw.NewsID DESC";
    DataTable dtb = GetData(sConn, sSQL);
    if (dtb.Rows.Count > 0)
    {
        foreach (DataRow dr in dtb.Rows)
        {
            strHTML += "<li><a href='?NewsID=" + dr["NewsID"] + "'> &#9642; " + dr["Title"] + "</a></li>";
        }
    }
    else
    {
        strHTML = "Thông tin đang cập nhật";
    }
    return strHTML;
}

+ Hàm hiển thị dữ liệu Tabbed lên trình duyệt:

Đây là hàm bạn cần chú ý nhất, tôi sẽ giải thích kỹ để bạn dễ áp dụng.

Trước tiên là phần Stylesheet bạn thấy rằng số các tabcontent là động (Theo số Category của csdl) và nó cũng được đánh chỉ số từ 1 đến n, ta cần có style chung cho các tabcontent này dạng vì vậy tôi khai báo biết sStyle để tạo các style này và số các style phải theo số Category nên cần được đặt trong vòng lặp và với dòng lệnh sStyle += "#tabcontent" + i.ToString() + ",";

Tiếp theo các Tabbed được tạo theo CateName và các sự kiện javascript onmouseover và onfocus, onclick (khi ta di chuột qua và click chuột thì sẽ chọn Tabbed đó active) cũng được đánh theo các chí số (Bạn xem code html khi download ở kollermedia.at về sẽ thấy điều này) do vậy ta cũng cần tạo các chỉ số cho các sự kiện này.

Các Tabcontent được đưa vào các thẻ div với id là tabcontenti theo các chỉ số tương ứng, bên trong các thẻ div này là nội dung của các tabbed và được gán bằng hàm GetContentOfTab ở trên

private string sGetContent(string sConn)
{
    string strHTML = "";
    string sSQL = "SELECT TOP 5 * FROM TB_CateGory ORDER BY idCate";
    DataTable dtb = GetData(sConn, sSQL);
    int i = 1;
    string sStyle = "<style>";
    if (dtb.Rows.Count > 0)
    {
        hd1.Value = dtb.Rows.Count.ToString();
        strHTML += @"<div class='menu'>
        <ul>";
        foreach (DataRow dr in dtb.Rows)
        {
            sStyle += "#tabcontent" + i.ToString() + ",";
            strHTML += "<li><a href='#' onmouseover=\"easytabs('1', '" + i.ToString() + "');\" onfocus=\"easytabs('1', '" + i.ToString() + "');\" onclick='return false;' title='' id=\"tablink" + i.ToString() + "\">" + dr["CateName"] + "</a></li>";
            i++;
        }
        sStyle = sStyle.Substring(0, sStyle.LastIndexOf(','));
        sStyle += "{border:1px solid #DEDEDE; width:698px; padding:10px 0px 10px 0px; font-size:12px; margin: -1px 0px 1px 0px; }</style>";
        strHTML += @"</ul></div>";
        i = 1;
        foreach (DataRow dr2 in dtb.Rows)
        {
            strHTML += "<div id=\"tabcontent" + i.ToString() + "\">" + GetContentOfTab(int.Parse("0" + dr2["CateID"].ToString()), sConn) + "</div>";
            i++;
        }
    }
    return sStyle+strHTML;
}

+ Hàm Page_Load:

protected void Page_Load(object sender, EventArgs e)
{
    string connectString = @"Server =.\SQL2005;Initial Catalog=DB_News;User ID=abc;Password=***";
    ltlContent.Text = sGetContent(connectString);
}

 Download code bài viết tại đây: http://hmweb.com.vn/demo/Tabbed-content-autochange.rar

Các vấn đề thảo luận về bài này bạn nêu tại diễn đàn: http://diendan.hmweb.com.vn/yaf_postsm613_Huong-dan-su-dung-chuc-nang-Tab-Control-trong-asp-net-C.aspx