Issue on onclick event of Logout button in Master page

Question

I'm using twitter bootstrap in my application. I have a Logout button in Master page and I have validations in .aspx page(Content Page).

When i click on Logout button it is validating the textbox fields in the Content page (which should not happen here).

Here is my code;

Master.aspx:

<div class="navbar">
    <div class="navbar-inner">
        <div class="container-fluid">               
            <ul class="nav ace-nav pull-right">                   
                <li class="blue" style="background-color: #5090C1"><a data-toggle="dropdown" href="#" class="user-menu dropdown-toggle">                       
                    <span><small>Welcome,</small>
                        User Name  </span> <i class="icon-caret-down"></i></a>
                    <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-closer" id="user_menu">                                                     
                        <li><a href="javascript:void(0);" onclick="Logout();"><i class="icon-off"></i>Logout</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="main-container" class="main-container container-fluid">
    <div class="main-content">
        <div class="page-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
        </div>
    </div>
</div>

<asp:Button ID="btnLogout" OnClick="btnLogout_Click" runat="server" class="hidden" />
<script type="text/javascript">
    function Logout() {
        $("#btnLogout").click();
    }
</script>

Master.aspx.cs:

 protected void btnLogout_Click(object sender, EventArgs e)
    {
        Session.Clear();
        Session.Abandon();
        Session.RemoveAll();
        Response.Redirect("~/SampleWindowCloser.htm");              
    }

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" MasterPageFile="~/Master.master"
    Inherits="Default" ClientIDMode="Static" %>
<asp:Content ID="TestContentBody" runat="server" ContentPlaceHolderID="MainContent">
    <div class="row-fluid">
        <div class="span6">
            <div class="control-group">
                <label class="control-label" for="txtName">Name</label>
                <div class="controls">
                    <input type="text" data-val="true" data-val-required="Name is required." title="Name" id="txtName">
                    <span data-valmsg-replace="true" data-valmsg-for="txtName" class="field-validation-valid text-warning red"></span>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="txtAge">Age</label>
                <div class="controls">
                    <input type="text" validation="name" description="Age" title="Age" id="txtAge">
                    <span data-valmsg-replace="true" data-valmsg-for="txtAge" class="field-validation-valid text-warning red"></span>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

How can I stop validating the content page when I click on the Logout button?

Please help me out.

Answer 1

use CauseValidation=false on your button.

More discussion on the same are

1. i must add CausesValidation="False" to every ASP Button to work, why?
2. RequiredFieldValidator and preventing CausesValidation

Edit 1

Here is a similar question in stack overflow where on cancel button it does not validate

Form Validation With Bootstrap (jQuery)

Edit 2

I have edited the fiddle replacing the button with anchor for cancel then it work. So I think you can use link button for the same in your code.

Link for JSFiddle

Answer 2

Just set the CausesValidation property of your logout button to false.

 <asp:Button ID="btnLogout" OnClick="btnLogout_Click" runat="server" class="hidden" CausesValidation="false" />

Edit

If you do intend to use the anchor tag, you can create a separate logout page where you would just clear the session variables on pageLoad event. Redirect to this logout page using your anchor tag.