单击按钮后停止页面刷新

Question

It is not a repeat post, I have already checked all the answers present on net and nothing is working for me so i'm posting this here.

Please find the code.

 <form runat="server">
        <div class="card">
            <ul class="nav nav-tabs Main-Menu" role="tablist">
                <li role="presentation" class="active"><a href="#Enabled" class="element" style="font-size: 20px;" aria-controls="home" role="tab" data-toggle="tab">Check Box - Enabled</a></li>
                <li role="presentation"><a href="#Disabled" class="element" style="font-size: 20px;" aria-controls="profile" role="tab" data-toggle="tab">Check Box - Disabled</a></li>
            </ul>

            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="Enabled">
                    <asp:CheckBoxList runat="server" ID="CheckBoxEnabled" RepeatDirection="Horizontal">
                        <asp:ListItem Text="Selenium IDE"></asp:ListItem>
                        <asp:ListItem Text="Selenium RC"></asp:ListItem>
                    </asp:CheckBoxList>
                    <asp:Button runat="server" Text="Submit" CssClass="btn btn-success Elements-Text" OnClick="btnEnabled_Click" />
                    <asp:Label runat="server" ID="lblEnabled" CssClass="label success"></asp:Label>
                </div>
                <div role="tabpanel" class="tab-pane" id="Disabled">
                    <asp:CheckBoxList runat="server" ID="CheckBoxDisbled" RepeatDirection="Horizontal" CellPadding="5" CellSpacing="5" CssClass="element form-control">
                        <asp:ListItem Text="Selenium IDE"></asp:ListItem>
                        <asp:ListItem Text="Selenium RC" Enabled="false"></asp:ListItem>
                        <asp:ListItem Text="Selenium WebDriver"></asp:ListItem>
                        <asp:ListItem Text="Selenium Grid" Enabled="false"></asp:ListItem>
                    </asp:CheckBoxList>
                    <asp:Button runat="server" ID="btnDisabled" Text="Submit" CssClass="element btn btn-success" OnClick="btnDisabled_Click" />
                    <asp:Label runat="server" ID="lblDisabled" CssClass="label success"></asp:Label>
                </div>
            </div>
        </div>
    </form>

I'm having 2 tabs in my page, when i'm on the second tab, select one checkbox and click on the button with #btnDisabled the page gets postback and navigates to the first tab. I want this to stop.

I have already tried, 1. AutoPostBack = false 2. onClick = "return false;" but not able to solve the issues.

Any help will be appreciated. :)

Answer 1

You want to do btnDisabled_Click, but not refresh the whole page. You need Ajax controls around the button or anything needs to be updated. Check the tool list to find it.

( Firstly download and install AjaxControlToolkit if you haven't.)

Answer 2

You can save the index of active panel in a hidden control and use it after post back.

<input type="hidden" runat="server" id="tabIndex" value="0" />

I do not know how you switch between your tabs, but on each tab change you must save it's index in hidden field(by javascript). For example if you select the second tab, value of hidden field must change to 1 .

Finally add this script after all of your tabs.

var tabIndex = $('#tabIndex').val();
$('.tab-pane').removeClass('active');
$('.tab-pane').eq(tabIndex).addClass('active');