Dynamic Responsive Tabs Plugin For jQuery in Asp.net

By Unknown - Sunday, September 20, 2015 - No Comments

(Dynamic Responsive Tabs Plugin For jQuery) - Hôm nay thủ thuật lập trình sẽ giới thiệu với các bạn thêm 1 cách nữa để có thể tạo Tabs động, đó là sử dụng thư viện Tabs Plugin For jQuery. Nội dung các Tabs được hiển thị từ các Control ngoài và đường dẫn cũng như tên các Control này được lấy từ CSDL SQL Server.

- B1: Tạo Project trong Microsoft Visual Studio 2010

- B2: Download Tabs Plugin tại đây, giải nén và Copy file SimpleTabs.js vào thư mục Js

- B3: Copy file style.css vào thư mục Styles

- B4: Tạo thư mục Controls, trong thư mục này lần lượt tạo các Controls Tab1.ascx, Tab2.ascx, Tab3.ascx, Tab4.ascx, Tab5.ascx

- B5: Mở file Site.Master dạng HTML và bổ xung đoạn mã phía dưới trong thẻ Head

<title>Dynamic Responsive Tabs Plugin For jQuery in Asp.net</title>

<asp:ContentPlaceHolder ID="HeadContent" runat="server">

</asp:ContentPlaceHolder>

</head>

- B6: Mở file Default.aspx dưới dạng HTML và nhập mã HTML

<%@ Page Title="Dynamic Responsive Tabs Plugin For jQuery in Asp.net" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DynamicTabsUsingjQuery._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>

<h4>Dynamic Responsive Tabs Plugin For jQuery in Asp.net</h4>

</div>

<asp:Panel ID="pnlTabs" runat="server">

</asp:Panel>

</div>

</asp:Content>

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

C# Code

//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.Diagnostics;

using System.Web.UI;

using System.IO;

namespace DynamicTabsUsingjQuery

{

public partial class _Default : System.Web.UI.Page

{

#region "Tabs"

private void CreateTabs()

{

DataTable objBind = new DataTable();

Control myCtrl = new Control();

int i = 1;

string TabName = "";

string ControlURL = "";

objBind = BindData();

pnlTabs.Controls.Clear();

if (objBind != null)

{

if (objBind.Rows.Count > 0)

{

pnlTabs.Controls.Add(new LiteralControl("<div class=\"tabBlock\">"));

pnlTabs.Controls.Add(new LiteralControl("<ul class=\"tabBlock-tabs\">"));

foreach (DataRow row in objBind.Rows)

{

if (row != null)

{

TabName = row["TabName"].ToString();

if (i == 1)

{

pnlTabs.Controls.Add(new LiteralControl("<li class=\"tabBlock-tab is-active\">" + TabName + "</li>"));

}

else

{

pnlTabs.Controls.Add(new LiteralControl("<li class=\"tabBlock-tab\">" + TabName + "</li>"));

}

i = i + 1;

}

pnlTabs.Controls.Add(new LiteralControl("</ul>"));

pnlTabs.Controls.Add(new LiteralControl("<div class=\"tabBlock-content\">"));

foreach (DataRow row in objBind.Rows)

{

if (row != null)

{

ControlURL = row["ControlURL"].ToString();

if (File.Exists(Server.MapPath("~/" + ControlURL)))

{

myCtrl = Page.LoadControl(ControlURL);

}

pnlTabs.Controls.Add(new LiteralControl("<div class=\"tabBlock-pane\">"));

pnlTabs.Controls.Add(myCtrl);

pnlTabs.Controls.Add(new LiteralControl("</div>"));

}

pnlTabs.Controls.Add(new LiteralControl("</div>"));

}

#endregion

#region "Bind Data"

private DataTable BindData()

{

DataTable objBind = new DataTable();

objBind.Columns.Add("TabName", typeof(string));

objBind.Columns.Add("ControlURL", typeof(string));

objBind.Rows.Add("Tab1", "Controls/Tab1.ascx");

objBind.Rows.Add("Tab2", "Controls/Tab2.ascx");

objBind.Rows.Add("Tab3", "Controls/Tab3.ascx");

objBind.Rows.Add("Tab4", "Controls/Tab4.ascx");

objBind.Rows.Add("Tab5", "Controls/Tab5.ascx");

return objBind;

}

#endregion

#region "Event Handles"

protected void Page_Load(object sender, System.EventArgs e)

{

try

{

if (Page.IsPostBack == false)

{

CreateTabs();

}

catch

{

}

#endregion

}

VB.NET Code

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

Imports System.IO

Namespace DynamicTabsUsingjQuery

Public Class _Default

Inherits System.Web.UI.Page

#Region "Tabs"

Private Sub CreateTabs()

Dim objBind As New DataTable

Dim myCtrl As New Control

Dim i As Integer = 1

Dim TabName 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("<div class=""tabBlock"">"))

pnlTabs.Controls.Add(New LiteralControl("<ul class=""tabBlock-tabs"">"))

For Each row As DataRow In objBind.Rows

If Not row Is Nothing Then

TabName = row("TabName").ToString()

If i = 1 Then

pnlTabs.Controls.Add(New LiteralControl("<li class=""tabBlock-tab is-active"">" & TabName & "</li>"))

Else

pnlTabs.Controls.Add(New LiteralControl("<li class=""tabBlock-tab"">" & TabName & "</li>"))

End If

i = i + 1

pnlTabs.Controls.Add(New LiteralControl("</ul>"))

pnlTabs.Controls.Add(New LiteralControl("<div class=""tabBlock-content"">"))

For Each row As DataRow In 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

pnlTabs.Controls.Add(New LiteralControl("<div class=""tabBlock-pane"">"))

pnlTabs.Controls.Add(myCtrl)

pnlTabs.Controls.Add(New LiteralControl("</div>"))

End If

pnlTabs.Controls.Add(New LiteralControl("</div>"))

End If

End Sub

#End Region

#Region "Bind Data"

Private Function BindData() As DataTable

Dim objBind As New DataTable

With objBind.Columns

.Add("TabName", GetType(String))

.Add("ControlURL", GetType(String))

End With

objBind.Rows.Add("Tab1", "Controls/Tab1.ascx")

objBind.Rows.Add("Tab2", "Controls/Tab2.ascx")

objBind.Rows.Add("Tab3", "Controls/Tab3.ascx")

objBind.Rows.Add("Tab4", "Controls/Tab4.ascx")

objBind.Rows.Add("Tab5", "Controls/Tab5.ascx")

Return objBind

End Function

#End Region

#Region "Event Handles"

Protected Sub Page_Load(ByVal sender As Object, 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

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

Quang Bình

News Ticker