ASP.net Ajax TabContainer Tab động với dữ liệu SQL

Nếu bạn đã từng sử dụng Ajax TabContainer của Ajax bạn đã biết tạo các Tab cũng không khó khăn chỉ việc kéo Control TabContainer vào và tạo thêm các Tabcontent cho nó. Nhưng nếu số lượng các TabContent của bạn không có định, thì việc sử dụng code aspx với TabContainer không đáp ứng được. Bài này tôi hướng dẫn bạn tạo TabContainer động trong code.

Trong code aspx của bạn: Để sự dụng TabContainer bạn cần khai báo sử dụng AjaxControlToolkit phía dưới của thẻ <%@ Page trong trang của bạn

 Nếu bạn muốn xem demo bạn có thể vào trang http://yenthai.vn/ytjsc-product.html, ở phần Sản phầm theo danh mục tôi đã áp dụng thủ thuật này

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Tiếp theo bạn dùng một control PlaceHolder như sau:

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<asp:PlaceHolder ID="phContent" runat="server"></asp:PlaceHolder> 

Giả sử cơ sở dữ liệu của bạn có 2 bảng như sau:

Số Category của bạn là động và bạn muốn mỗi Category là 1 Tab, Trong mỗi tab này bạn sẽ hiển thị danh sách các bài viết mới nhất của Tab. Ở ví dụ minh họa này tôi sẽ hiển thị 5 bài viết mới nhất của mỗi Tab và để làm minh họa tôi viết truy vấn và thực thi luôn vì vậy ta cần hàm thực thi một câu truy vấn và trả về một DataTable:

private DataTable QueryToDataTable(string strSQL)
{
    DataTable dtbTmp = new DataTable();
    string connString = @"
Server =.\SQL2005;Initial Catalog=DB_New;User ID=sa;Password=***";
    SqlConnection conn = new SqlConnection(connString);
    try
    {
        conn.Open();
        SqlDataAdapter da = new SqlDataAdapter(strSQL, conn);
        DataSet ds = new DataSet();
        da.Fill(ds, "GetData");
        dtbTmp = ds.Tables[0];
    }
    catch (Exception e)
    {
        Console.WriteLine(e.Message);
    }
    finally
    {
        conn.Close();
    }
    return dtbTmp;
}

Tiếp theo ta viết hàm liệt kê danh sách 5 bài viết mới nhất của một chuyên mục như sau:

private string GetListNew(int cateID)
{
    string strHTML = "";
    string strNew = @"SELECT tn.CateID,tn.Title, tn.Description FROM TB_News tn  
        WHERE tn.CateID=" + cateID.ToString() + " ORDER BY tn.idNews DESC ";
    DataTable dtb = QueryToDataTable(strNew);
    if (dtb.Rows.Count > 0)
    {
        foreach(DataRow dr in dtb.Rows){
        strHTML += "<ul>";
        strHTML += "<li><a href=\"#\">" + dr["VOVTitle"] + "</a>";
        strHTML += "</ul>";
        }
    }
    return strHTML;
}

Bạn chú ý thay đổi liên kết cho phù hợp với website của bạn

Để hiển thị dữ liệu và add control vào một TabContainer bạn khai báo một AjaxControlToolkit.TabContainer tbcDynamic; ngay phía trên hàm Page_Load và ta viết hàm để Tạo ra các control bên trong TabContent (Literal ltl1) và add vào tbcDynamic như sau:

private void CreateTabTrip(int iCateID, PlaceHolder pholder)
{
    tbcDynamic = new AjaxControlToolkit.TabContainer();
    string sqlCate = "SELECT tc.CateID, tc.CateName FROM TB_Category tc";
    DataTable dtb = QueryToDataTable(sqlCate);
    if (dtb.Rows.Count > 0)
    {
        for (int i = 0; i < dtb.Rows.Count; i++)
        {
            TabPanel tbCategory = new TabPanel();
            tbCategory.HeaderText = dtb.Rows[i]["CateName"].ToString();
            tbCategory.ID = "Tab" + i.ToString();
            tbcDynamic.Tabs.Add(tbCategory);
            Literal ltl1 = new Literal();
            ltl1.Text = GetListNew(int.Parse("0"+dtb.Rows[i]["idCate"]));
            tbcDynamic.Tabs[i].Controls.Add(ltl1);
        }
        pholder.Controls.Add(tbcDynamic);
         

    }
}