حفظ سربرگ های انتخاب شده هنگام Postback در ASP.Net

در این مقاله نشان خواهیم داد چگونه می توان از سربرگها یا tab واکنش گرای Bootstrap در پروژه های ASP.Net برای ایجاد یک پنل استفاده کرد و سربرگ فعال را حتی هنگام Postback نگهداری کرد.

همچنین خواهیم آموخت چگونه می توان هر سربرگی را روی هر رویدادی از Code behind انتخاب کرد.

به صورت پیش در ASP.Net انتخاب سربرگ ها زمانی که postback رخ می دهد از بین می رود. می توانیم از کنترل Hiddenfield برای ذخیره کردن tab انتخاب شده استفاده کنیم و پس از Postback ، مقدار آخرین tab انتخاب شده را از آن کنترل گرفته و آن را دوباره انتخاب کرد.

برای نشان دادن پیاده سازی سربرگ Bootstrap و نگهداری انتخاب آن هنگام Postback از یک مثال استفاده میکنیم.

یک Web form ایجاد کرده و کتابخانه های مورد نیاز Bootstrap را در آن اضافه میکنیم. از jQuery برای نوشتن تابعی که tab انتخاب شده را نگه داری کند استفاده میکنیم.

صفحه web form به صورت زیر پر می شود.

 <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var selectedTab = $("#<%=hfTab.ClientID%>");
            var tabId = selectedTab.val() != "" ? selectedTab.val() : "tab1";
            $('#dvTab a[href="#' + tabId + '"]').tab('show');
            $("#dvTab a").click(function () {
                selectedTab.val($(this).attr("href").substring(1));
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <!-- Panel starts -->
            <div class="panel panel-default" style="width: 400px; padding: 5px; margin: 5px">
                <div id="dvTab">
                    <!-- Navigation Tabs starts -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab1
                        </a></li>
                        <li><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab2</a></li>
                        <li><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Tab3</a></li>
                    </ul>
                    <!-- Navigation Tabs ends -->
                    <!-- Tab Panes starts -->
                    <div class="tab-content" style="padding-top: 10px">
                        <div role="tabpanel" class="tab-pane active" id="tab1">
                            You are in Tab1
                        </div>
                        <div role="tabpanel" class="tab-pane" id="tab2">
                            You are in Tab2
                        </div>
                        <div role="tabpanel" class="tab-pane" id="tab3">
                            You are in Tab3
                        </div>
                    </div>
                    <!-- Tab Panes ends -->
                </div>
                <br />
                <asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="btnSubmit_Click"  CssClass="btn btn-primary" />
                <asp:Button ID="btnSelectTab2" Text="Select Tab2" runat="server" OnClick="btnSelectTab2_Click" CssClass="btn btn-primary" />
                <asp:Button ID="btnSelectTab3" Text="Select Tab3" runat="server" OnClick="btnSelectTab3_Click" CssClass="btn btn-primary" />
                <asp:HiddenField ID="hfTab" runat="server" />
            </div>
            <!-- Panel ends -->
        </div>
    </form>
</body>
</html>

در صفحه Webform.aspx.cs کدها به صورت زیر می باشد.

 protected void btnSubmit_Click(object sender, EventArgs e)
    {
     //write your code here
    }

    protected void btnSelectTab2_Click(object sender, EventArgs e)
    {
        hfTab.Value = "tab2";
    }

protected void btnSelectTab3_Click(object sender, EventArgs e)
    {
        hfTab.Value = "tab3";
    }

هرکدام از این سربرگ ها را انتخاب و روی کلید ارسال کلیک کنید باعث Postback می شود اما بعد از آن سربرگ انتخاب شده حفظ خواهد شد. همچنین می توانیم هر tab دیگری را از طریق کد با تنظیم کردن id سربرگ دلخواه در hiddenfield انتخاب کنیم. (همانطور که در دومین و سومین button نشان داده شده است. )

فایل های ضمیمه

3996_BootstrapSelectedTabOnPostback.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

حفظ سربرگ های انتخاب شده هنگام Postback در ASP.Net

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید