jQuery selected tab on postback -Asp.net C#

Its used to store the current tab after postback or reload the current page

in Style.css

.ui-tabs {
    zoom: 1;
}
.ui-tabs .ui-tabs-nav {
    list-style: none;
    position: relative;
    padding: 0;
    margin: 0;
}
.ui-tabs .ui-tabs-nav li {
    position: relative;
    float: left;
    margin: 0 3px -2px 0;
    padding: 0;
}
.ui-tabs .ui-tabs-nav li a {
    display: block;
    padding: 10px 20px;
    background: #f0f0f0;
    border: 2px #ccc solid;
    border-bottom-color: #ccc;
    outline: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
    padding: 10px 20px 12px 20px;
    background: #fff;
    border-bottom-style: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-state-processing a {
    cursor: default;
}
.ui-tabs .ui-tabs-nav li a,
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
    cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
    display: block;
    clear: both;
    border: 2px #ccc solid;
    padding: 10px;
}
.ui-tabs .ui-tabs-hide {
    display: none;
}
.lab{ float:left; width:20%; font-family:Verdana; font-size:12px;}
.labn{ font-family:Verdana; font-size:12px;}
.head{ font-family:Verdana; font-size:18px; color:red; padding-left:200px;}
.bor{ border:1px dashed #000; width:600px; padding-left:100px; padding-top:10px;}
#container{ width:700px; margin:0 auto 0 auto;}
.textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
/*padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;*/
border: 1px solid #DDDDDD; width:200px; height:35px;
}

.textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
/*padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;*/
border: 1px solid rgba(81, 203, 238, 1);
}
.button {
   border: 1px solid #DDD;
   border-radius: 3px;
   text-shadow: 0 1px 1px white;
   -webkit-box-shadow: 0 1px 1px #fff;
   -moz-box-shadow:    0 1px 1px #fff;
   box-shadow:         0 1px 1px #fff;
   font: bold 11px Sans-Serif;
   padding: 6px 10px;
   white-space: nowrap;
   vertical-align: middle;
   color: #666;
   background: transparent;
   cursor: pointer;
   width:150px; height:35px;
}
.button:hover, .button:focus {
   border-color: #999;
   background: -webkit-linear-gradient(top, white, #E0E0E0);
   background:    -moz-linear-gradient(top, white, #E0E0E0);
   background:     -ms-linear-gradient(top, white, #E0E0E0);
   background:      -o-linear-gradient(top, white, #E0E0E0);
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   box-shadow:         0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active {
   border: 1px solid #AAA;
   border-bottom-color: #CCC;
   border-top-color: #999;
   -webkit-box-shadow: inset 0 1px 2px #aaa;
   -moz-box-shadow:    inset 0 1px 2px #aaa;
   box-shadow:         inset 0 1px 2px #aaa;
   background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
   background:    -moz-linear-gradient(top, #E6E6E6, gainsboro);
   background:     -ms-linear-gradient(top, #E6E6E6, gainsboro);
   background:      -o-linear-gradient(top, #E6E6E6, gainsboro);
}
.but{ padding-left:130px;}

in ASPX page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".ui-tabs").tabs();
        $('.ui-tabs').bind('tabsselect', function (event, ui) {
            var selectedTab = ui.index;
            $("#<%= hidLastTab.ClientID %>").val(selectedTab);
        });
    });
</script>

<body>

        <div class="ui-tabs">
    <ul class="ui-tabs-nav">
        <li><a href="#tabs-1">Tab One</a></li>
        <li><a href="#tabs-2">Tab Two</a></li>
        <li><a href="#tabs-3">Tab Three</a></li>
    </ul>
    <div id="tabs-1" class="ui-tabs-panel">
        <form id="form1" runat="server">
        <asp:HiddenField ID="hidLastTab" runat="server" Value="0" />
    <div>
    <div class="head">Login Here!!!</div><br />
    <div>
        <label class="lab">email</label><asp:TextBox ID="TextBox1" runat="server" CssClass="textarea"></asp:TextBox>
        <br /><br />
        <label class="lab">password</label><asp:TextBox ID="TextBox2" runat="server" CssClass="textarea"></asp:TextBox>
        <br /><br />
        <div class="but"><asp:Button ID="Button1" runat="server" Text="Button"
                CssClass="button" onclick="Button1_Click" />
            <asp:Label ID="lbl" runat="server"></asp:Label>
        </div>
    </div>
    </div>

    </div>
    <div id="tabs-2" class="ui-tabs-panel">
    <div class="head">Registeration form</div><br />
    <div class="bor">
    <label class="lab">name</label><asp:TextBox ID="TextBox3" runat="server" CssClass="textarea"></asp:TextBox>
        <br /><br />
    <label class="lab">email</label><asp:TextBox ID="TextBox4" runat="server" CssClass="textarea"></asp:TextBox>
        <br /><br />
    <label class="lab">password</label><asp:TextBox ID="TextBox9" runat="server" CssClass="textarea"></asp:TextBox>
        <br /><br />
    <label class="lab">first name</label><asp:TextBox ID="TextBox5" runat="server" CssClass="textarea"></asp:TextBox>
        <br /><br />
    <label class="lab">last name</label><asp:TextBox ID="TextBox6" runat="server" CssClass="textarea"></asp:TextBox>
        <br /><br />
    <label class="lab">mobile number</label><asp:TextBox ID="TextBox7" runat="server" CssClass="textarea"></asp:TextBox>
        <br /><br />
    <label class="lab">state</label>
        <asp:TextBox ID="TextBox8" runat="server" CssClass="textarea"></asp:TextBox>
    <br /><br />
    <label class="lab">country</label><asp:TextBox ID="TextBox15" runat="server" CssClass="textarea"></asp:TextBox>
        <br /><br />
    <label class="lab">area</label><asp:TextBox ID="TextBox10" runat="server" CssClass="textarea"></asp:TextBox>
        <br /><br />
    <label class="lab">gender</label>
        <asp:RadioButtonList CssClass="labn"
            ID="RadioButtonList1" runat="server">
            <asp:ListItem>male</asp:ListItem>
            <asp:ListItem>female</asp:ListItem>
        </asp:RadioButtonList>

    <br />
    <div class="but"><asp:Button ID="Button2" runat="server" Text="Button" onclick="Button2_Click" CssClass="button"/></div>
    <asp:Label ID="lblr" runat="server"></asp:Label><br />
    </div>

    </div>
    <div id="tabs-3" class="ui-tabs-panel">
        <p>Content three.</p>
        <asp:Button ID="Button3" runat="server" Text="Button" onclick="Button3_Click" />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</div>

</body>

in ASPX.CS page:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;

public partial class Default6 : System.Web.UI.Page
{

    static string strconn = ConfigurationManager.ConnectionStrings["reg"].ConnectionString;
    SqlConnection con = new SqlConnection(strconn);
    protected void Page_Load(object sender, EventArgs e)
    {
        ClientScript.RegisterStartupScript(this.GetType(), "selecttab", "$('.ui-tabs').tabs({ selected: " + hidLastTab.Value + " });", true);
    }
    protected void Button1_Click(object sender, EventArgs e)
    {

        con.Open();
        SqlCommand cmdd = new SqlCommand("select * from tb_reg where email='" + TextBox1.Text + "' AND password='" + TextBox2.Text + "'", con);
        SqlDataAdapter da = new SqlDataAdapter(cmdd);
        DataTable dt = new DataTable();
        da.Fill(dt);
        if (dt.Rows.Count > 0)
        {
            Session["user"] = TextBox1.Text;
            Response.Redirect("drop.aspx");
        }
        else
        {
            lbl.Text = "login failure";
        }
        con.Close();
    }

    protected void Button2_Click(object sender, EventArgs e)
    {

        SqlConnection con = new SqlConnection(strconn);
        SqlCommand insrt = new SqlCommand("insert into tb_reg (username,email,password,firstname,lastname,mobilenumber,state,country,area,gender) values ('" + TextBox3.Text + "','" + TextBox4.Text + "','" + TextBox9.Text + "','" + TextBox5.Text + "','" + TextBox6.Text + "','" + TextBox7.Text + "','" + TextBox8.Text + "','" + TextBox15.Text + "','" + TextBox10.Text + "','" + RadioButtonList1.Text + "')", con);
        con.Open();
        insrt.ExecuteNonQuery();

        //int arun;

        //SqlCommand sel = new SqlCommand("select * from tb_reg");
        //SqlDataAdapter da = new SqlDataAdapter(sel);
        //DataTable dt = new DataTable();
        //da.Fill(dt);
        //if (dt.Rows.Count > 0)
        //{
        //    lblr.Text = "register sucess";
        //}
        //else
        //{
        //    lblr.Text = "register failed";
        //}

        lblr.Text = "register sucess!!!";
        con.Close();

        TextBox1.Text = "";
        TextBox2.Text = "";
        TextBox9.Text = "";
        TextBox3.Text = "";
        TextBox4.Text = "";
        TextBox5.Text = "";
        TextBox6.Text = "";
        TextBox7.Text = "";
        TextBox8.Text = "";
        TextBox9.Text = "";

    }
    protected void Button3_Click(object sender, EventArgs e)
    {
        Label1.Text = "test";
    }
}

Thursday 20 December 2012

jQuery selected tab on postback -Asp.net C#

No comments:

Post a Comment