در این مقاله قصد داریم نحوه ایجاد Tab های مخصوص به BootSrtap با امکان PostBack با ذکر مثال توضیح دهیم .

Tab های مخصوص BootStrap مخصوص تگهای HTML طراحی شده و سمت کاربر میباشد و مخصوص Asp.Net نمی باشند و هنگامی که صفحه PostBack می شود پنجره انتخاب شده از حالت انتخاب خارج میشود و به حالت اولیه باز می گردد.

از آنجا که وضعیت BootStrap به صورت خودکار به حالت اولیه باز می گردد , ما احتیاج داریم که این وضعیت در حالت اجرای برنامه تغییر نکند .Tab انتخاب شده در یک فیلد مخفی قبل از اینکه صفحه postback شود ذخیره میشود .در کنار رویداد Ready متن های مربوط به JQuery در ابتدا Value مربوط به فیلد مخفی فراخوانی میشود , اگر مقداری در فیلد مخفی نبود سپس حالت اولیه Tab ها فراخوانی میشود .

هر HTML Anchor element در داخل Tab Header متصل شده به رویداد کلیک و زمانی که هر Tab کلیک می شود مقدار خاصیت  href در فیلد مخفی ذخیره می شود .

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
<div id="Tabs" role="tabpanel">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal
        </a></li>
        <li><a href="#employment" aria-controls="employment" role="tab" data-toggle="tab">Employment</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content" style="padding-top: 20px">
        <div role="tabpanel" class="tab-pane active" id="personal">
            This is Personal Information Tab
        </div>
        <div role="tabpanel" class="tab-pane" id="employment">
            This is Employment Information Tab
        </div>
    </div>
</div>
<asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
<asp:HiddenField ID="TabName" runat="server" />
</div>
<script type="text/javascript">
$(function () {
    var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";
    $('#Tabs a[href="#' + tabName + '"]').tab('show');
    $("#Tabs a").click(function () {
        $("[id*=TabName]").val($(this).attr("href").replace("#", ""));
    });
});
</script>

و حالا در سمت سرور مقدار داخل فیلد مخفی شده به Request.Form collection متصل میشود و مقدار متصل شده در سمت کاربر یا همان Client Side داخل فیلد مخفی قرار داده میشود .

نکته : شما می توانید همچنین از خاصیت HiddenField استفاده کنید اما بعضی اوقات مقدار ذخیره شده منعکس نمی شود و از این رو بهتر است که از Request.Form collection استفاده شود .

کد #C :

protected void Page_Load(object sender, EventArgs e)
{
    if (this.IsPostBack)
    {
        TabName.Value = Request.Form[TabName.UniqueID];
    }
}

کد VB.NET :

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

    If Me.IsPostBack Then

        TabName.Value = Request.Form(TabName.UniqueID)

    End If

End Sub