locked
Tab Control in ASP.Net and Adding Dynamic Data into the Tab Control RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User671909081 posted

    Hi,

        I would like to share Tab Control.

        This Tab control done with Javascript. Refered Javascript from http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

         First Download following css and js files from the link ,

        http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.css

        http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js

        http://www.dynamicdrive.com/dynamicindex17/tabcontent/shade.gif

        http://www.dynamicdrive.com/dynamicindex17/tabcontent/shadeactive.gif

         http://www.dynamicdrive.com/dynamicindex17/tabcontent/indentbg.gif

        http://www.dynamicdrive.com/dynamicindex17/tabcontent/indentbg2.gif

       Once downloaded added into aspx page which is given below :

    --------------------------------------------------------------ViewProductDetails.aspx-----------------------------------------------------------------------------------------------  

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="ViewProductDetails.aspx.vb" Inherits="Product_Skill_ViewProductDetails" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">

    <link rel="stylesheet" type="text/css" href="../Includes/tabcontent.css" mce_href="../Includes/tabcontent.css" />
    <script type="text/javascript" src="../Includes/tabcontent.js" mce_src="../Includes/tabcontent.js"></script>
    <title>Rope</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
           <asp:Label ID="lblErr" runat="server"></asp:Label>
           <table id="tblProductDetails" runat="server" width="595px" align="center">
            <tr>
              <td colspan=5></td>
            </tr>
            <tr id="trItemID" runat="server">
              <td><asp:Image id="imgProduct" runat="server" Width="400px" Height="400px"/></td>
              <td>
               <table id="tbl">
                <tr>
                 <td>Contactus</td>
                </tr>
               </table>
              </td>
            </tr>
            <tr id="trProductImg" runat="server" >
              <td></td>
            </tr>
            <tr id="trProductDetail" runat="server">
              <td id="tdProductDetail">
                    <%  Response.Write(ViewMaterial(Request.QueryString("Productid")))%>
              </td>
            </tr>
           </table>
        </div>
        </form>
       
    </body>


    <script type="text/javascript">

    var countries=new ddtabcontent("countrytabs")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    countries.init()

    </script>

    </html>

    -------------------------------------------------------------------------------------------------------------------------------------------------------------  

    --------------------------------------------------------------ViewProductDetails.aspx.vb-----------------------------------------------------------------------------------------------  

    Imports System
    Imports System.Data
    Imports System.Data.Odbc
    Partial Class Product_Skill_ViewProductDetails
        Inherits System.Web.UI.Page
        Dim clsIncludes As New Includes

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Dim intProductID As Integer

            Try
                If Not IsPostBack Then
                    If Request.QueryString("Productid").ToString.Trim <> "" Then
                        intProductID = Convert.ToInt32(Request.QueryString("Productid").ToString.Trim)
                        ViewDetails(intProductID)
                        ' ViewMaterial(intProductID)
                    End If
                End If
            Catch ex As Exception

            End Try
        End Sub

        Sub ViewDetails(ByVal intProductid As Integer)
            Dim SQLProduct As String = ""
            Dim drProduct As OdbcDataReader
            Try
                SQLProduct = "select largephoto from product_photo where productid=" & intProductid & " and largephoto is not null and largephoto=1"
                drProduct = clsIncludes.ExecuteDataReader(clsIncludes.strConnection, CommandType.Text, SQLProduct)
                If drProduct.HasRows Then
                    drProduct.Read()
                    If Not IsDBNull(drProduct(0)) Then
                        imgProduct.ImageUrl = "../admin/photos/product/large/" & drProduct(0).ToString()
                    Else
                        imgProduct.ImageUrl = "../admin/photos/product/large/Noimage.jpg"
                    End If
                Else
                    imgProduct.ImageUrl = "../admin/photos/product/large/Noimage.jpg"
                End If
                drProduct.Close()
            Catch ex As Exception
                lblErr.Text = ex.Message
            Finally
                clsIncludes.CloseConnection()
            End Try
        End Sub

        Public Function ViewMaterial(ByVal intProductid As Integer) As String
            Dim SQLProduct As String = ""
            Dim drProduct As OdbcDataReader
            Dim drSkill As OdbcDataReader
            Dim drSkill_1 As OdbcDataReader
            Dim strHTML As String = ""
            Dim intSelected As Integer

            Dim index As Integer
            Try
                SQLProduct = ""
                SQLProduct = "Select Distinct product_material.materialid,materialmaster.materialname materialname,materialmaster.materialDesc materialDesc,CASE materialmaster.Dyed WHEN 1 THEN 'Yes' ELSE 'No' END Dyed,"
                SQLProduct = SQLProduct + " CASE materialmaster.Status WHEN 1 THEN 'Active' ELSE 'Inactive' END Status from materialmaster left join product_material on"
                SQLProduct = SQLProduct + " materialmaster.materialid=product_material.materialid where product_material.productid=" & intProductid & " and materialmaster.Status=1"
                drProduct = clsIncludes.ExecuteDataReader(clsIncludes.strConnection, CommandType.Text, SQLProduct)
          
                intSelected = 0
                If drProduct.HasRows Then
                    drProduct.Read()
                    index = 0
                    strHTML = strHTML & "<ul id=""countrytabs"" class=""shadetabs"">"
                    While drProduct.Read()
                        If intSelected = 0 Then

                            If Not IsDBNull(drProduct("materialdesc")) Then
                                strHTML = strHTML & " <li><a href="" mce_href=""#"" id=""Material" & index & """ rel=""country" & index & """ class=""selected"" runat=server>" & drProduct("materialdesc") & "</a></li>"
                            End If
                            intSelected = 1
                        Else
                            If Not IsDBNull(drProduct("materialdesc")) Then
                                strHTML = strHTML & " <li><a href="" mce_href=""#"" id=""Material" & index & """ rel=""country" & index & """ runat=server>" & drProduct("materialdesc") & "</a></li>"
                            End If

                        End If

                        index = index + 1
                    End While
                    drProduct.Close()
                    drProduct = Nothing

                    '-----------------------Start Adding SKILL TAB HEADER here--------------------------------

                    SQLProduct = ""
                    SQLProduct = "Select Distinct product_Skill.Skillid,Skillmaster.Skillname,Skillmaster.SkillDesc,"
                    SQLProduct = SQLProduct + " CASE Skillmaster.Status WHEN 1 THEN 'Active' ELSE 'Inactive' END Status from Skillmaster left join product_Skill on"
                    SQLProduct = SQLProduct + " Skillmaster.Skillid=product_Skill.Skillid where product_Skill.productid=" & intProductid & " and Skillmaster.Status=1"
                    drSkill = clsIncludes.ExecuteDataReader(clsIncludes.strConnection, CommandType.Text, SQLProduct)

                    If drSkill.HasRows Then
                        drSkill.Read()
                        intSelected = 0

                        While drSkill.Read()
                            If intSelected = 0 Then
                                If Not IsDBNull(drSkill("skilldesc")) Then
                                    strHTML = strHTML & " <li><a href="" mce_href=""#"" id=""SKill" & index & """ rel=""country" & index & """ class=""selected"" runat=server>" & drSkill("SKilldesc") & "</a></li>"
                                End If
                                intSelected = 1
                            Else
                                If Not IsDBNull(drSkill("skilldesc")) Then
                                    strHTML = strHTML & " <li><a href="" mce_href=""#"" id=""SKill" & index & """ rel=""country" & index & """ runat=server>" & drSkill("SKilldesc") & "</a></li>"
                                End If
                            End If
                            index = index + 1
                        End While
                        drSkill.Close()
                        drSkill = Nothing
                    End If
                    '-----------------------------------

                End If
                strHTML = strHTML & " </ul>"
                ' drProduct.Close()

     

                SQLProduct = ""
                SQLProduct = "Select Distinct product_material.materialid,materialmaster.materialname materialname,materialmaster.materialDesc materialDesc,CASE materialmaster.Dyed WHEN 1 THEN 'Yes' ELSE 'No' END Dyed,"
                SQLProduct = SQLProduct + " CASE materialmaster.Status WHEN 1 THEN 'Active' ELSE 'Inactive' END Status from materialmaster left join product_material on"
                SQLProduct = SQLProduct + " materialmaster.materialid=product_material.materialid where product_material.productid=" & intProductid & " and materialmaster.Status=1"
                drProduct = clsIncludes.ExecuteDataReader(clsIncludes.strConnection, CommandType.Text, SQLProduct)


                If drProduct.HasRows Then
                    drProduct.Read()
                    index = 0
                    strHTML = strHTML & " <div style=""border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px"">"
                    While drProduct.Read()
                        If Not IsDBNull(drProduct("materialdesc")) Then
                            strHTML = strHTML & " <div id=""country" & index & """ class=""tabcontent"">"
                            strHTML = strHTML & " <table width=""20%"" border=1>"
                            strHTML = strHTML & " <tr>"
                            strHTML = strHTML & " <td>Description</td>"
                            strHTML = strHTML & " <td>" & drProduct("materialdesc") & "</td>"
                            strHTML = strHTML & " </tr>"
                            strHTML = strHTML & " <tr>"
                            strHTML = strHTML & " <td>dyed</td>"
                            strHTML = strHTML & " <td>" & drProduct("dyed") & "</td>"
                            strHTML = strHTML & " </tr>"
                            strHTML = strHTML & " </table>"
                            strHTML = strHTML & " </div>"

                        End If
                        index = index + 1
                    End While
                    drProduct.Close()
                    '-----------------------Start Adding SKILL DESCRIPTION here--------------------------------
                    SQLProduct = ""
                    SQLProduct = "Select Distinct product_Skill.Skillid,Skillmaster.Skillname Skillname,Skillmaster.SkillDesc skilldesc,"
                    SQLProduct = SQLProduct + " CASE Skillmaster.Status WHEN 1 THEN 'Active' ELSE 'Inactive' END Status from Skillmaster left join product_Skill on"
                    SQLProduct = SQLProduct + " Skillmaster.Skillid=product_Skill.Skillid where product_Skill.productid=" & intProductid & " and Skillmaster.Status=1"
                    drSkill_1 = clsIncludes.ExecuteDataReader(clsIncludes.strConnection, CommandType.Text, SQLProduct)

                    If drSkill_1.HasRows Then
                        drSkill_1.Read()
                        While drSkill_1.Read()
                            If Not IsDBNull(drSkill_1("skilldesc")) Then
                                strHTML = strHTML & " <div id=""country" & index & """ class=""tabcontent"">"
                                strHTML = strHTML & " <table width=""20%"" border=1>"
                                strHTML = strHTML & " <tr>"
                                strHTML = strHTML & " <td>Description</td>"
                                strHTML = strHTML & " <td>" & drSkill_1("skilldesc") & "</td>"
                                strHTML = strHTML & " </tr>"
                                strHTML = strHTML & " </table>"
                                strHTML = strHTML & " </div>"
                            End If
                            index = index + 1
                        End While
                        drSkill_1.Close()
                        drSkill_1 = Nothing
                    End If

                    '------------------------------------------------------------------------------------------
                    strHTML = strHTML & " </div>"

                End If

     

     

            Catch ex As Exception
                lblErr.Text = ex.Message
            Finally
                clsIncludes.CloseConnection()
            End Try
            Return strHTML
        End Function

        Sub ViewSkill(ByVal intProductid As Integer)
            Dim SQLProduct As String = ""
            Dim drProduct As OdbcDataReader
            Try
                ' SQLProduct = "select largephoto from product_photo where productid=" & intProductid & " and largephoto is not null and largephoto=1"
                SQLProduct = "Select Distinct product_Skill.Skillid,Skillmaster.Skillname,Skillmaster.SkillDesc,"
                SQLProduct = SQLProduct + " CASE Skillmaster.Status WHEN 1 THEN 'Active' ELSE 'Inactive' END Status from Skillmaster left join product_Skill on"
                SQLProduct = SQLProduct + " Skillmaster.Skillid=product_Skill.Skillid where product_Skill.productid=" & intProductid & " and Skillmaster.Status=1"
                drProduct = clsIncludes.ExecuteDataReader(clsIncludes.strConnection, CommandType.Text, SQLProduct)
                If drProduct.HasRows Then
                    drProduct.Read()
                    While drProduct.Read()
                        If Not IsDBNull(drProduct(0)) Then
                            imgProduct.ImageUrl = "../admin/photos/product/large/" & drProduct(0).ToString()
                        End If
                    End While
                End If
                drProduct.Close()
            Catch ex As Exception
                lblErr.Text = ex.Message
            Finally
                clsIncludes.CloseConnection()
            End Try
        End Sub
    End Class

    -------------------------------------------------------------------------------------------------------------------------------------------------------------     

     Pls feel free to ask queries on Above code.

     

       

    Thursday, June 26, 2008 1:29 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User487807879 posted

    Are there any advantages in using this approach instead of AJAX Tab control (http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Tabs/Tabs.aspx)?

    Thursday, June 26, 2008 2:37 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User671909081 posted

    This is simple one. This is dynamically creating tabstrip name and content where it is from database.

    Thursday, June 26, 2008 2:45 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-2071681944 posted
    I have added download button in gridview and gridview on tab control, for example:<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p>Tab1 includes gridview1, tab2 includes gridview2, if I click download button an error occurs . The error is below . Please look and help me how can I grid tabcontrol and download button … <o:p></o:p>ERROR:<o:p></o:p>Sys.WebForms.PageRequestManager.ParserErrorException: <o:p></o:p>The Nessage received from the server could not be parsed. Command caueses for this error are when the detail : Error Parsing near ' %PDF-1.4% 60 obj<o:p></o:p>    void Dosyaislemleri(string kaynak)<o:p></o:p>    {<o:p></o:p>        string[] dosyalar = Directory.GetFiles(Server.MapPath(kaynak));<o:p></o:p>            List<FileInfo> dosyabilgileri = new List<FileInfo>();<o:p></o:p><o:p> </o:p>            foreach (string dosya in dosyalar)<o:p></o:p>            {<o:p></o:p>                dosyabilgileri.Add(new FileInfo(dosya));<o:p></o:p>                GridView1.DataSource = dosyabilgileri;<o:p></o:p>                GridView1.DataBind();<o:p></o:p>                yuvarla();<o:p></o:p>            }<o:p></o:p>     }<o:p></o:p>    void DosyaYüklemeİslemleri(string dosyaismi)<o:p></o:p>    {<o:p></o:p>        string dosya = GridView1.SelectedRow.Cells[1].Text;<o:p></o:p>        Response.Clear();<o:p></o:p>        Response.ContentType = "application/X-unknown";<o:p></o:p>        Response.AddHeader("Content-Disposition", "attachment;filename=" + dosya);<o:p></o:p>        Response.WriteFile(Server.MapPath(dosyaismi) + @"\" + dosya);<o:p></o:p>        Response.End();<o:p></o:p>        Response.Write("dosya yüklendi");<o:p></o:p>    }<o:p></o:p>SOURCE:<o:p></o:p><div align="center"><o:p></o:p><p align="center"><o:p></o:p>    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" <o:p></o:p>    BackColor="White" BorderColor="silver" BorderStyle="Inset"  BorderWidth="1px" CellPadding="3" Width="499px" <o:p></o:p>    AlternatingRowStyle-BackColor="silver" OnSelectedIndexChanged="GridView1_SelectedIndexChanged"><o:p></o:p>    <Columns><o:p></o:p>    <asp:CommandField ButtonType="Button" SelectText="indir" ShowSelectButton="True"   /><o:p></o:p>    <asp:BoundField DataField="Name" HeaderText="Dosya Adı" /><o:p></o:p>    <asp:BoundField DataField="Length" HeaderText="Dosya Uzunlugu" /><o:p></o:p>    <asp:BoundField DataField="Extension" HeaderText="Dosya Uzantısı" /><o:p></o:p>    </Columns><o:p></o:p>        <FooterStyle BackColor="White" ForeColor="#000066" /><o:p></o:p>        <RowStyle ForeColor="#000066" /><o:p></o:p>        <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" /><o:p></o:p>        <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" /><o:p></o:p>        <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" /><o:p></o:p>    </asp:GridView><o:p></o:p></p><o:p></o:p></div><o:p></o:p>

     

    Friday, July 4, 2008 3:50 AM