» » » Thêm Icons cho bootstrap Pill Tabs trong Asp.net

(Adding Icons to Bootstrap Pill Tabs) – Trong bài viết trước chúng tôi đã hướng dẫn cách tạo bootstrap Pill Tabs, hôm nay chúng tôi hướng dẫn các bạn cách thêm các Icons vào Tab để cho  chúng thêm đẹp và chuyên nghiệp hơn.


Nghe những bài hát đỉnh nhất về Thấy cô giáo - Nghe trên Youtube



Code Example C#, Code Example VB.NET
Code Example C#, Code Example VB.NET



- B1: Tạo CSDL SQL DynamicTabs

- B2: Tạo Bảng DynamicTabs có cấu trúc phía dưới trong CSDL SQL Server.

- B3: Nhập dữ liệu cho bảng DynamicTabs


- B4: Tạo stored procedure trong SQL Server

CREATE      procedure [dbo].[Pro_DynamicTabs_List]
      @IsVisible bit
as

declare @strSQL   nvarchar(1000)
declare @strWhere nvarchar(500)
declare @strOrder nvarchar (50)

set @strSQL= 'Select * from DynamicTabs'
set @strWhere =' where 1=1'


if @IsVisible=1
      set @strWhere= @strWhere  +' and (IsVisible=1)'

if @IsVisible=0
      set @strWhere= @strWhere  +' and (IsVisible=0 Or IsVisible Is Null)'

set @strOrder =' Order by SortOrder, TabName'

set @strSQL=@strSQL+@strWhere+@strOrder
print @strSQL

exec sp_executesql @strSQL

Bạn có thể tải về bảng cơ sở dữ liệu SQL bằng cách nhấn vào liên kết tải về dưới đây
- B5: Tạo Project trong Microsoft Visual Studio 2010

Trong Visual Studio tạo 1 Class có tên: Utility và nhập đoạn Code phía dưới cho Class này.

C# Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

namespace AddingIconsBootstrapPillTabs
{
    public class SqlDataProvider
    {
        #region "Membres Prives"

        private string _connectionString;

        #endregion

        #region "Constructeurs"

        public SqlDataProvider()
        {
            try
            {
                _connectionString = ConfigurationManager.ConnectionStrings["SiteSqlServer"].ConnectionString;
            }
            catch
            {
            }
        }

        #endregion

        #region "Proprietes"

        public string ConnectionString
        {
            get { return _connectionString; }
        }

        #endregion

        #region "Functions"

        public DataTable FillTable(string ProcName, params ObjectPara[] Para)
        {
            try
            {
                DataTable tb = new DataTable();
                SqlDataAdapter adap = new SqlDataAdapter(ProcName, _connectionString);
                adap.SelectCommand.CommandType = CommandType.StoredProcedure;
                if (Para != null)
                {
                    foreach (ObjectPara p in Para)
                    {
                        adap.SelectCommand.Parameters.Add(new SqlParameter(p.Name, p.Value));
                    }
                }
                adap.Fill(tb);
                return tb;
            }
            catch
            {
                return null;
            }
        }
        #endregion
    }

    public class ObjectPara
    {
        string _name;

        object _Value;
        public ObjectPara(string Pname, object PValue)
        {
            _name = Pname;
            _Value = PValue;
        }

        public string Name
        {
            get { return _name; }
            set { _name = value; }
        }

        public object Value
        {
            get { return _Value; }
            set { _Value = value; }
        }
    }
}

VB.NET Code
Imports System.Data.SqlClient
Imports System.Data

Namespace AddingIconsBootstrapPillTabs

    Public Class SqlDataProvider

#Region "Membres Prives"

        Shared _IsError As Boolean = False
        Private _connectionString As String

#End Region

#Region "Constructeurs"

        Public Sub New()
            Try
                _connectionString = ConfigurationManager.ConnectionStrings("SiteSqlServer").ConnectionString
                _IsError = False
            Catch ex As Exception
                _IsError = True
            End Try
        End Sub

#End Region

#Region "Proprietes"

        Public ReadOnly Property ConnectionString() As String
            Get
                Return _connectionString
            End Get
        End Property

#End Region

#Region "Functions"

        Public Function FillTable(ByVal ProcName As String, ByVal ParamArray Para() As ObjectPara) As DataTable
            Try
                Dim tb As New DataTable
                Dim adap As New SqlDataAdapter(ProcName, _connectionString)
                adap.SelectCommand.CommandType = CommandType.StoredProcedure
                If Not Para Is Nothing Then
                    For Each p As ObjectPara In Para
                        adap.SelectCommand.Parameters.Add(New SqlParameter(p.Name, p.Value))
                    Next
                End If
                adap.Fill(tb)
                Return tb
            Catch ex As Exception
                Return Nothing
            End Try
        End Function

#End Region

    End Class

    Public Class ObjectPara
        Dim _name As String
        Dim _Value As Object

        Sub New(ByVal Pname As String, ByVal PValue As Object)
            _name = Pname
            _Value = PValue
        End Sub

        Public Property Name() As String
            Get
                Return _name
            End Get
            Set(ByVal value As String)
                _name = value
            End Set
        End Property

        Public Property Value() As Object
            Get
                Return _Value
            End Get
            Set(ByVal value As Object)
                _Value = value
            End Set
        End Property

    End Class

End Namespace

Chú ý: Thuộc tính SiteSqlServer chính là chuỗi Connect với SQL Server trong file Web.Config

- B6: Tạo thư mục Images nằm trong thư mục Styles của Project, Download thư viện ảnh tại đây và Copy chúng vào thư mục Images vừa tạo.

- B7: Tạo file Icons.css và lưu trong thư mục Styles của Project, nhập đoạn mã phía dưới cho file css
.icon-pages {
    background-image: url(Images/icon_pages.gif);
    background-position: centercenter;
    height: 16px;
    width: 16px;
    height: 16px;
    width: 16px;
    position: relative;
    display: inline-block;
}

.icon-extensions {
    background-image: url(Images/icon_extensions.gif);
    background-position: centercenter;
    height: 16px;
    width: 16px;
    height: 16px;
    width: 16px;
    position: relative;
    display: inline-block;
}

.icon-languages {
    background-image: url(Images/icon_language.gif);
    background-position: centercenter;
    height: 16px;
    width: 16px;
    position: relative;
    display: inline-block;
}

.icon-skins {
    background-image: url(Images/icon_skins.gif);
    background-position: centercenter;
    height: 16px;
    width: 16px;
    position: relative;
    display: inline-block;
}

.icon-vendors {
    background-image: url(Images/icon_vendors.gif);
    background-position: centercenter;
    height: 16px;
    width: 16px;
    position: relative;
    display: inline-block;
}

- B8: Mở file Site.Master dạng HTML và bổ xung đoạn mã phía dưới trong thẻ Head
<head id="Head1" runat="server">
    <title>Adding Icons to Bootstrap Pill Tabs in ASP.Net</title>
    <link href="~/Styles/Site.css"rel="stylesheet"type="text/css"/>
    <link href="Styles/Icons.css"rel="stylesheet"type="text/css"/>
    <link rel="stylesheet"href="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"/>
    <script type="text/javascript"src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript"src="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <asp:ContentPlaceHolderID="HeadContent"runat="server">
    </asp:ContentPlaceHolder>
</head>

- B9: Tạo thư mục Controls, lần lượt tạo các file Tab_Extensions.ascx, Tab_Languages.ascx, Tab_Pages.ascx, Tab_Skins.ascx, Tab_Vendors.ascx trong thư mục này. Mỗi file sẽ nhập nội dung để phân biệt giữa các Control với nhau.

- B10: Mở file Default.aspx dưới dạng HTML và nhập mã HTML
C#
<%@ PageTitle="Adding Icons to Bootstrap Pill Tabs in ASP.Net" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AddingIconsBootstrapPillTabs._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1"runat="server">
    </asp:ScriptManager>
    <h3>
        Adding Icons to Bootstrap Pill Tabs in ASP.Net
    </h3>
    <asp:Panel ID="pnlTabs"runat="server">
    </asp:Panel>
</asp:Content>

VB.Net Code
<%@ PageTitle="Adding Icons to Bootstrap Pill Tabs in ASP.Net" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="AddingIconsBootstrapPillTabs._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1"runat="server">
    </asp:ScriptManager>
    <h3>
      Adding Icons to Bootstrap Pill Tabs in ASP.Net
    </h3>
    <asp:Panel ID="pnlTabs"runat="server">
    </asp:Panel>
</asp:Content>

- B11: Viết Code cho file Default.aspx

C#
//Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials
using Microsoft.VisualBasic;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.IO;
using System.Diagnostics;
using System.Web.UI;

namespace AddingIconsBootstrapPillTabs
{
    public partial class _Default : System.Web.UI.Page
    {

        #region"Create Tabs"

        private voidCreateTabs()
              {
                     DataTable objBind = newDataTable();
                     Control myCtrl = newControl();
                     int i = 1;
                     string TabName = "";
            string sClass = "";
                     string ControlURL = "";

                     objBind = BindData();

                     pnlTabs.Controls.Clear();
                     if (objBind != null) {
                           if (objBind.Rows.Count > 0) {
                    pnlTabs.Controls.Add(new LiteralControl("<ul class=\"nav nav-pills\">"));
                                  foreach (DataRowrow in objBind.Rows) {
                                         if (row != null) {
                                                TabName = row["TabName"].ToString();
                            sClass = row["Class"].ToString();
                                                if (i == 1) {
                                pnlTabs.Controls.Add(new LiteralControl("<li class=\"active\"><a href=\"#tab" + i + "\" data-toggle=\"tab\"><span class=\"" + sClass + "\"></span> " + TabName + "</a></li>"));
                                                } else {
                                pnlTabs.Controls.Add(new LiteralControl("<li><a href=\"#tab" + i + "\" data-toggle=\"tab\"><span class=\"" + sClass + "\"></span> " + TabName + "</a></li>"));
                                                }
                                         }
                                         i = i + 1;
                                  }
                                  pnlTabs.Controls.Add(new LiteralControl("</ul>"));

                                  i = 1;
                    pnlTabs.Controls.Add(new LiteralControl("<div class=\"tab-content\">"));
                                  pnlTabs.Controls.Add(new LiteralControl("<!-- Tab panes -->"));
                                  foreach (DataRowrow in objBind.Rows) {
                                         if (row != null) {
                                                ControlURL = row["ControlURL"].ToString();
                                                if (File.Exists(Server.MapPath("~/" + ControlURL))) {
                                                       myCtrl = Page.LoadControl(ControlURL);
                                                }
                                                if (i == 1) {
                                pnlTabs.Controls.Add(new LiteralControl("<div class=\"tab-pane fade in active\" id=\"tab" + i + "\">"));
                                                } else {
                                pnlTabs.Controls.Add(new LiteralControl("<div class=\"tab-pane fade\" id=\"tab" + i + "\">"));
                                                }
                                                pnlTabs.Controls.Add(myCtrl);
                                                pnlTabs.Controls.Add(new LiteralControl("</div>"));
                                         }
                                         i = i + 1;
                                  }
                    pnlTabs.Controls.Add(new LiteralControl("</div>"));
                           }
                     }
              }

        private DataTableBindData()
              {
                     SqlDataProvider objSQL = newSqlDataProvider();
                     DataTable objBind = null;
                     //Caching
            if (Cache["Cache_PillTabs"] == null)
            {
                           objBind = objSQL.FillTable("Pro_DynamicTabs_List", new ObjectPara("@IsVisible", 1));
                Cache["Cache_PillTabs"] = objBind;
                     } else {
                objBind = (DataTable)Cache["Cache_PillTabs"];
                     }
                     return objBind;
              }

              #endregion

        #region"Event Handles"

        protected voidPage_Load(object sender, System.EventArgs e)
        {
            try
            {
                if (!IsPostBack)
                {
                    CreateTabs();
                }
            }
            catch
            {
            }
        }

        #endregion
    }
}

VB.NET Code

'Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials
Imports System.IO

Namespace AddingIconsBootstrapPillTabs

    Public Class _Default
        Inherits System.Web.UI.Page

#Region "Tabs"

        Private SubCreateTabs()
            Dim objBind As New DataTable
            Dim myCtrl As New Control
            Dim i As Integer = 1
            Dim TabName As String = ""
            Dim sClass As String = ""
            Dim ControlURL As String = ""

            objBind = BindData()

            pnlTabs.Controls.Clear()
            If Not objBind Is Nothing Then
                If objBind.Rows.Count > 0 Then
                    pnlTabs.Controls.Add(New LiteralControl("<ul class=""nav nav-pills"">"))
                    For Eachrow As DataRowIn objBind.Rows
                        If Not row Is Nothing Then
                            TabName = row("TabName").ToString()
                            sClass = row("Class").ToString()
                            Ifi = 1 Then
                                pnlTabs.Controls.Add(New LiteralControl("<li class=""active""><a href=""#tab"& i & """ data-toggle=""tab""><span class="""& sClass & """></span>&nbsp;"& TabName & "</a></li>"))
                            Else
                                pnlTabs.Controls.Add(New LiteralControl("<li><a href=""#tab" & i & """ data-toggle=""tab""><span class="""& sClass & """></span>&nbsp;"& TabName & "</a></li>"))
                            End If
                        EndIf
                        i = i + 1
                    Next
                    pnlTabs.Controls.Add(New LiteralControl("</ul>"))

                    i = 1
                    pnlTabs.Controls.Add(New LiteralControl("<div class=""tab-content"">"))
                    pnlTabs.Controls.Add(New LiteralControl("<!-- Tab panes -->"))
                    For Eachrow As DataRowIn objBind.Rows
                        If Not row Is Nothing Then
                            ControlURL = row("ControlURL").ToString()
                            If File.Exists(Server.MapPath("~/" & ControlURL)) Then
                                myCtrl = Page.LoadControl(ControlURL)
                            End If
                            If i = 1 Then
                                pnlTabs.Controls.Add(New LiteralControl("<div class=""tab-pane fade in active"" id=""tab"& i & """>"))
                            Else
                                pnlTabs.Controls.Add(New LiteralControl("<div class=""tab-pane fade"" id=""tab"& i & """>"))
                            End If
                            pnlTabs.Controls.Add(myCtrl)
                            pnlTabs.Controls.Add(New LiteralControl("</div>"))
                        End If
                        i = i + 1
                    Next
                    pnlTabs.Controls.Add(New LiteralControl("</div>"))
                End If
            End If
        End Sub

#End Region

#Region "Bind Data"

        Private FunctionBindData() As DataTable
            Dim objSQL As New SqlDataProvider
            Dim objBind As DataTable
            'Caching
            If Cache("Cache_PillTabs") Is Nothing Then
                objBind = objSQL.FillTable("Pro_DynamicTabs_List", New ObjectPara("@IsVisible", 1))
                Cache("Cache_PillTabs") = objBind
            Else
                objBind = CType(Cache("Cache_PillTabs"), DataTable)
            End If
            Return objBind
        End Function

#End Region

#Region "Event Handles"

        Protected SubPage_Load(ByVal sender AsObject, ByVal e As System.EventArgs) Handles Me.Load
            Try
                If Page.IsPostBack = False Then
                    CreateTabs()
                End If
            Catch ex As Exception

            End Try
        End Sub

#End Region

    End Class

End Namespace

Bây giờ chạy Project bạn sẽ có kết quả như ảnh phía dưới.

Code Example C#, Code Example VB.NET
Code Example C#, Code Example VB.NET




Chúc các bạn thành công!

Quang Bình
3:05:00 AM
Gia Khang
,

0 comments Blogger 0 Facebook

Post a Comment

Subscribe to: Post Comments ( Atom )
 
lập trình đốt nét © 2013. All Rights Reserved. Powered by Blogger
Top