<ASP:LOGIN> Control conflicts with other buttons on the page

https://stackoverflow.com/questions/21940787

14-10-2022
|

Question

I am not sure how to formulate the title of this issue. My problem is that I have a .ascx control which has control. When I make a page where I have buttons in the content, pressing the button causes Submit button to be fired.... I have absolutely no idea why this happens. Please give me any suggestions or idea how to fix this.

My Control code is :

    <%@ Control Language="VB" AutoEventWireup="false" CodeFile="TopRightMenuAnonn.ascx.vb" Inherits="Ctrls_TopRightMenuAnonn" %>


<ul class="nav pull-right" id="top-right_menu">
    <li style="padding: 5px" class="dropdown">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown" style="padding:10px 15px;color: #73767D">Login<strong class="caret"></strong></a>
        <div id="loginForm" class="dropdown-menu pull-right" style="padding: 15px;">
            <asp:Login  runat="server" ID="login1" DestinationPageUrl="~/Home.aspx">
                <LayoutTemplate>
                    <asp:TextBox runat="server" ID="Username" style="margin-bottom:15px;" PlaceHolder="Username" Height="30px"></asp:TextBox>
                    <asp:TextBox runat="server" ID="Password" style="margin-bottom: 15px;" PlaceHolder="Password" Height="30px" TextMode="Password" />
                    <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="Username" style="color: red" Text="Please enter an username."></asp:RequiredFieldValidator>
                    <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" style="color: red" Text="Please enter a password."></asp:RequiredFieldValidator>
                    <asp:Label ID="lblError" runat="server" Visible="false" Text=""></asp:Label>
                    <asp:Button ID="Login" runat="server" CommandName="Login" CssClass="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" Text="Sign In"></asp:Button>
                    <a href="#getpass" class="fancybox" id="forgotpass">Forgot password?</a><br />
                    <!--Fancybox for pass-->
                        <div style="display:none">
                            <div id="getpass" style="width: 100%;height:100%">
                                <span>Please enter your username to retrieve your password.</span>
                                <br />
                                <asp:TextBox runat="server" ID="txtForgotPass" PlaceHolder="Username" Height="30px" Width="100%" style="margin-top: 20px;margin-bottom:20px;"></asp:TextBox>
                                <asp:Button runat="server" ID="btnForgotPass" CssClass="btn btn-primary" style="clear:left;float: right;padding:10px" Text="Send My Password" />
                            </div>
                        </div>
                    <!--End of fancybox for pass-->
                    <a href="#getuser" class="fancybox" id="forgotuser">Forgot username?</a>
                    <!-- Fancybox for user -->
                        <div style="display:none">
                            <div id="getuser" style="width: 100%;height: 100%">
                                <span>Please enter your e-mail to retrieve your username.</span>
                                <br />
                                <asp:TextBox runat="server" ID="txtForgotUser" PlaceHolder="example@materialconnexion.com" Height="30px" Width="100%" style="margin-top: 20px; margin-bottom: 20px;"></asp:TextBox>
                                <asp:Button runat="server" ID="btnForgotUser" CssClass="btn btn-primary" style="clear:left;float: right;padding: 10px" Text="Send My Username" />
                            </div>
                        </div>
                    <asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="login1" />
                    <!-- End of fancybox for user-->
                </LayoutTemplate>
            </asp:Login>

        </div>
    </li>
    <li style="padding: 15px;border-left: 1px solid #999"><a style="padding: 0px !important;color: #73767D" href="../regtest.aspx">Register</a></li>
    <li style="padding: 15px;border-left: 1px solid #999"><a style="padding: 0px !important;color: #73767D" href="../Pricing.aspx">Buy Credits</a></li>
</ul>

My control back-end code is(this is where shit happens and I cant figure out a way to make it work properly) :

    Option Strict On
Partial Class Ctrls_TopRightMenuAnonn
    Inherits System.Web.UI.UserControl
    Protected Sub login1_LoggingIn(sender As Object, e As LoginCancelEventArgs) Handles login1.LoggingIn
        Dim m As New MemberData(New MatconnDB(), login1.UserName)
        If m.IsNew() Then
            e.Cancel = True 'not in database
            Return
        End If
        If m.ExpirationDate < Now() Then
            e.Cancel = True
            Return
        End If
        If m.Active = False Then
            Return
        End If
        If m.unameEmail = False Then
            Return
        End If
        If (MemberData.GetPassword(login1.UserName.ToString()) = MemberData.Encrypt(login1.Password.ToString())) Then
            Session("User") = login1.UserName.ToString()
            Response.Redirect("~/Home.aspx")
        ElseIf MemberData.GetPassword(login1.UserName.ToString()) = login1.Password.ToString() Then
            Session("User") = login1.UserName.ToString()
            Response.Redirect("~/Home.aspx")
            ' Else
            'I should put proper error messages here !!!!!!
        End If

    End Sub

End Class

My Master page file is :

<%@ Master Language="VB" CodeFile="TopMenu.master.vb" Inherits="MasterPageLogged" AutoEventWireup="false" %>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>ssds</title>

</head>
<body>
    <form id="form1" runat="server">
    <div id="wrap">
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container" id="cont_left-menu">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#left-menu">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="HomePage.aspx">
                        <img style="margin-top: -5px;" src="../images/mc-logo.jpg" />
                    </a>
                </div>
                <div class="collapse navbar-collapse" id="left-menu">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#">Services</a>
                        </li>
                        <li>
                            <a href="#">Tool</a>
                        </li>
                        <li>
                            <a href="#">Work</a>
                        </li>
                        <li>
                            <a href="#">Matter</a>
                        </li>
                        <li>
                            <a href="#">About</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                    <asp:ContentPlaceHolder runat="server" ID="ContentTopMenuRight">

                    </asp:ContentPlaceHolder>
                </div>
            </div>
        </nav>
        <asp:ContentPlaceHolder runat="server" ID="ContentPlaceHolder1">

        </asp:ContentPlaceHolder>
    </div>
    </form>
    <link type="text/css" rel="stylesheet" href="../css/bootstrap.css"/>
    <link type="text/css" rel="stylesheet" href="../css/bootstrap-theme.css"/>
    <link type="text/css" rel="stylesheet" href="../css/Styles.css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="../js/jquery.fancybox.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="../css/jquery.fancybox.css" type="text/css" media="screen" />
</body>
</html>

And my Simple test page is :

<%@ Page Language="VB" AutoEventWireup="false" MasterPageFile="~/Masters/TopMenu.master" CodeFile="regtest.aspx.vb" Inherits="regtest" %>

<%@ Register Src="~/Ctrls/TopRightMenuAnonn.ascx" TagName="TopRightMenuLogged" TagPrefix="tma" %>

<%@ MasterType VirtualPath="~/Masters/TopMenu.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentTopMenuRight" runat="server">
    <tma:TopRightMenuLogged ID="TopRightMenuLogged1" runat="server" />
</asp:Content>

<asp:Content ID="Content2" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
    <div class="container">
        <div class="col-md-6">
            <asp:TextBox runat="server" ID="txtName" PlaceHolder="Name" class="txtedit"></asp:TextBox>
            <asp:TextBox runat="server" ID="txtSurname" PlaceHolder="Surname" class="txtedit"></asp:TextBox>
            <asp:TextBox runat="server" ID="txtMail" PlaceHolder="Email" class="txtedit"></asp:TextBox>
            <asp:TextBox runat="server" ID="txtCompany" PlaceHolder="Company" class="txtedit"></asp:TextBox>
            <asp:TextBox runat="server" ID="txtPass" PlaceHolder="Password" class="txtedit"></asp:TextBox>
            <asp:TextBox runat="server" ID="txtPassV" PlaceHolder="Confirm Password" class="txtedit" AutoPostBack="True"></asp:TextBox>
            <br />
            <br />
            <asp:CheckBox runat="server" ID="chkbox" Text="&nbspTerm and Conditions" style="margin-top: 10px" />
            <br />
            <br />
            <br />
            <br />
            <asp:Button runat="server" ID="btnReg" Text="blqblq" />
            <asp:Label runat="server" ID="lblText" Text=""></asp:Label>
            <asp:Label runat="server" ID="lblCaption" Text=""></asp:Label>
        </div>
    </div>
</asp:Content>

Please advise.. Thanks in advance !

No correct solution

OTHER TIPS

The MSDN docs page for the Button class states in a few places:

By default, all button controls submit the page when clicked.

It is unclear from your question which <asp:Button> control is causing the unwanted PostBack:

the one in your sample page (btnReg), or
one of the ones in your UserControl (Login, btnForgotPass, btnForgotUser)

However, if you don't want them to submit the page / cause a PostBack, then you need to

prevent that using client-side validation / etc, or
use a different control than <asp:Button> that does what you want it to.

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow