I noticed a problem with my buttons within an ASP page within the Twitter Bootstrap. It seems the only class that appears correctly is the "btn" class. If I would like to use "btn btn-primary" a grey gradient appears over my blue button. When I hover over the button it half of it turns blue. I've tried it with the other button styles and I get the same result.
I'm hoping the code below is correct:
<asp:button type="button" id="btnSearch" runat="server" CssClass="btn btn-primary" Text="Search"></asp:button>
Full HTML
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="header.aspx.vb" Inherits="Backend.header" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/custom.css" />
</head>
<body>
<form id="masterSearch" runat="server">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Company Name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="cart.aspx">
<asp:Label ID="Label1" runat="server" Text="Cart"> </asp:Label></a></li>
<li class="dropdown">
History <b class="caret"></b>
<ul class="dropdown-menu">
<li>New Order</li>
<li>Order History</li>
</ul>
</li>
<li>Invoices</li>
<li class="dropdown">
Returns <b class="caret"></b>
<ul class="dropdown-menu">
<li>Return Previous Order</li>
<li>Return Policy</li>
</ul>
</li>
<li>Rewards Balance</li>
<li>Help</li>
<li>Log Out</li>
</ul>
</div>
</div>
</div>
</div>
<div id="wrap">
<div class="row-fluid">
<div class="container">
<div class="span12">
<asp:Label ID="Label1" class="pull-right" runat="server" Text="Label"></asp:Label>
</div>
</div> <!--/container-->
</div> <!--/row-->
<hr />
<div class="container">
<div class="row-fluid">
<div class="span2">Left Column</div><!--/left sidebar-->
<div class="span8">
<h5 class="pagination-centered">Search By...</h5>
<div class="span12">
<input type="text" id="txtSearch1" placeholder="NDC#, Item#, Item Name..." runat="server" />
<asp:button type="button" id="btnSearch" runat="server" CssClass="btn btn-primary" Text="Search"></asp:button>
</div> <!--/search-->
<div class="searchResults">
<table ID="tblSearchResults" class="table table-bordered">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField HeaderText="Generic" DataField="ItemDesc" />
<asp:BoundField HeaderText="Brand" DataField="BrandName" />
<asp:BoundField HeaderText="Item Number" DataField="ItemNumber" />
<asp:BoundField HeaderText="NDC" DataField="NDC" />
<asp:BoundField HeaderText="Class" DataField="ControlLevel" />
<asp:BoundField HeaderText="Price" DataField="Price" />
<asp:TemplateField HeaderText="Qty">
<ItemTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</table>
</div>
</div><!--/main content -->
<div class="span2">Right Column</div><!--/right sidebar-->
</div><!--/row-->
</div> <!--/container -->
<asp:button type="button" id="btnAdd" class=" btn btn-danger" runat="server" Text="Add to Cart"></asp:button>
<asp:Button ID="btnCheckOut" runat="server" Text="Check Out" />
</form>
</body>
</html>
I don't necessarily remember 100% but after thinking about this a bit more, I think I ran into the same exact thing as you. In looking at some of my old code, I worked around this by using the Link Button instead of the Button control.
<asp:LinkButton CssClass="btn btn-small" runat="server" ID="m_ReportButton" OnClick="OnReportClick" Text="Report" />
<asp:LinkButton CssClass="btn btn-small" runat="server" ID="m_DeleteButton" OnClick="OnDeleteClick" Text="Delete" />
<asp:LinkButton CssClass="btn btn-small" runat="server" ID="m_EditButton" OnClick="OnEditClick" Text="Edit" />
<asp:LinkButton CssClass="btn btn-small" runat="server" ID="m_QuoteButton" OnClick="OnQuoteClick" Text="Quote" />
<asp:LinkButton CssClass="btn btn-small" runat="server" ID="m_ReplyButton" OnClick="OnReplyClick" Text="Reply" />
Thinking back I am almost certain I made this change simply to apply more than just the btn bootstrap class.
Related
I am having a strange problem and have spent the majority of the last 4 working hours trying to figure this out. I have read most of the similar questions on here but they are either not working due to a div mismatch or are wanting to open one modal from another.
I have a gridview containing data records with 3 link buttons in a template field. 2 of these buttons need to call up a modal where the user can either view more details or cancel the record.
The problem I am facing is that whichever modals code I put first in the aspx page, that modal displays correctly. Any modals after that only displays the black overlay.
I have read somewhere that this may be due to the z-index but I have not been able to get this working. Any guidance will be appreciated.
Gridview Markup:
<asp:GridView ID="gvEnquiries" runat="server" CssClass="table table-hover table-striped" GridLines="None" AutoGenerateColumns="False" DataKeyNames="EnquiryID">
<Columns>
<asp:BoundField HeaderText="EnquiryID" DataField="EnquiryID" Visible="false" />
<asp:BoundField HeaderText="Enquiry No" DataField="EnquiryNo" />
<asp:BoundField DataField="EType" />
<asp:BoundField HeaderText="Company" DataField="Company" />
<asp:BoundField HeaderText="Description" DataField="Description" />
<asp:BoundField HeaderText="Assigned To" DataField="AssignedTo" />
<asp:BoundField HeaderText="Address By" DataField="AddressBy" DataFormatString="{0:dd MMM yyyy}" />
<asp:BoundField HeaderText="Enquiry Date" DataField="EnquiryDate" DataFormatString="{0:dd MMM yyyy}" />
<asp:TemplateField>
<ItemTemplate>
<div class="btn-group pull-right">
<asp:LinkButton CssClass="btn btn-info" ID="btnView" runat="server" data-toggle="tooltip" data-placement="bottom" ToolTip="View Details" OnClick="btnView_Click"><span class="glyphicon glyphicon-eye-open"></span></asp:LinkButton>
<asp:LinkButton CssClass="btn btn-info" ID="LinkButton1" runat="server" data-toggle="tooltip" data-placement="bottom" ToolTip="Create Quote"><span class="glyphicon glyphicon-credit-card"></span></asp:LinkButton>
<asp:LinkButton CssClass="btn btn-info" ID="btnCloseEnq" runat="server" data-toggle="tooltip" data-placement="bottom" ToolTip="Close Enquiry" OnClick="btnCloseEnq_Click"><span class="glyphicon glyphicon-ban-circle"></span></asp:LinkButton>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
The modals are being called from code side using the following line of code, obviously changing the ID for the seperate calls:
ScriptManager.RegisterStartupScript(this, this.GetType(), "none", "<script>$('#CloseEnq').modal('show');</script>", false);
The actual markup for the 2 modals are:
<div class="modal fade" id="ViewEnqDetail" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-mid modal-dialog">
<div class="modal-content">
<asp:UpdatePanel ID="updViewEnqModal" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
<asp:Label runat="server" ID="lblViewEnqTitle"></asp:Label></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
****Body Content In Here*******
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
and
<div class="modal fade" id="CloseEnq" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-mid modal-dialog">
<div class="modal-content">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
<asp:Label runat="server" ID="Label1"></asp:Label></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
After another 7 hours I have finally found the culprit.
The order in which the tags were closed were incorrect. The body div was only being closed after the update panel and its content div was.
I'm using master page for my web application there is a content page we can call it Banks data has a GridView displays all banks and has an Edit,Add,Delete buttons
I wand display a bootstrap modal with input data to edit or add new bank and to validate using asp RequiredFieldValidator
this is the ASPX Code
<Columns>
<asp:BoundField DataField="bankCode" HeaderText="Bank Code" />
<asp:BoundField DataField="bankName" HeaderText="Bank Name" />
<asp:TemplateField >
<ItemTemplate >
<asp:LinkButton ID="lb_Edit" runat="server" CssClass="btn btn-sm btn-default" data-toggle="modal" data-target="#AddBankModal" CommandName="BankEdit" CommandArgument='<%#Eval("bankCode") %>' OnClick="lb_Edit_Click"><strong>Edit</strong></asp:LinkButton>
<asp:LinkButton ID="LB_Delete" runat="server" CssClass="btn btn-sm btn-danger" CommandName="BankDelete" CommandArgument='<%#Eval("bankCode") %>'><strong>Delete</strong></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle Height="15px" HorizontalAlign="Right" VerticalAlign="Middle" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnStringDb1 %>" SelectCommand="SELECT [bankCode], [bankNameAr], [bankNameEng] FROM [Bank]"></asp:SqlDataSource>
<!-- Modal -->
<div id="AddBankModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="text-align:right">Bank Data </h4>
</div>
<div class="modal-body">
<asp:Label ID="lblBankCode" runat="server" Text="Bank Code" CssClass="label" style="text-align:right;font-weight:bold"></asp:Label>
<asp:TextBox ID="txtBankCode" runat="server" CssClass="form-control"></asp:TextBox>
<asp:Label ID="lblBankNameAr" runat="server" Text="Bank Name" CssClass="label" style="text-align:right;font-weight:bold"></asp:Label>
<asp:TextBox ID="txtBankNameAr" runat="server" CssClass="form-control"></asp:TextBox>
<div class="row" >
<div class="col-lg-12">
<asp:Button ID="btnUpdateBank" runat="server" Text="Save Data" CssClass="btn btn-outline btn-primary" style="width:100px" OnClick="btnUpdateBank_Click" />
<button type="button" class="btn btn-outline btn-primary" data-dismiss="modal" style="width:100px">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
Does any one have any Ideas to do this using ASP code behind without using Jquery
May be you need some thing like this.Remember two things
1.Dont forget to add ClientIDMode="Static" to asp.net control
2.Postback is prevented by e.preventDefault() to add jQuery functionality in click event
<asp:GridView ID="GridView1" runat="server" ClientIDMode="Static">
<Columns>
<asp:TemplateField >
<ItemTemplate >
<asp:LinkButton ID="lb_Edit" runat="server" CssClass="btn btn-sm btn-default" data-toggle="modal" data-target="#AddBankModal" ClientIDMode="Static"><strong>Edit</strong>
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="AddBankModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title" style="text-align: right">
Bank Data
</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblBankCode" runat="server" Text="Bank Code" CssClass="label" Style="text-align: right;
font-weight: bold"></asp:Label>
<asp:TextBox ID="txtBankCode" runat="server" CssClass="form-control"></asp:TextBox>
<asp:Label ID="lblBankNameAr" runat="server" Text="Bank Name" CssClass="label" Style="text-align: right;
font-weight: bold"></asp:Label>
<asp:TextBox ID="txtBankNameAr" runat="server" CssClass="form-control"></asp:TextBox>
<div class="row">
<div class="col-lg-12">
<asp:Button ID="btnUpdateBank" runat="server" Text="Save Data" ClientIDMode="Static" CssClass="btn btn-outline btn-primary"
Style="width: 100px" />
<button type="button" class="btn btn-outline btn-primary" data-dismiss="modal" style="width: 100px">
Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('.btn').on('click', function (e) {
e.preventDefault();
var buttonid = $(this).attr('id');
console.log(buttonid);
if (buttonid == "lb_Edit") {
$('#AddBankModal').modal({
show: true,
backdrop: 'static'
});
}
if (buttonid == "btnUpdateBank") {
//
alert('Do some ajax to send data to Backend');
}
//currentRow.remove();
});
})
</script>
I am trying to show pop-up on clicking Button named "Lunch Break", it works fine when am using normal Bootstrap button button control.
But i want use asp:Button control to show same pop-up but pop-up does appears on clicking on that button, it just refresh the page.
aspx code :
<asp:Button ID="btnLunchBreak" runat="server" Text="Lunch Break" CssClass="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" />
<div class="modal fade panel panel-primary" id="myModal" tabindex="-1" runat="server" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
<div class="modal-dialog panel panel-primary ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h2 class="modal-title" id="gridSystemModalLabel" style="color: red">Lunch Break</h2>
</div>
<div class="modal-body">
<div class="container-fluid">
<br />
<br />
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<asp:Button ID="btnLunchStart" runat="server" CssClass="btn btn-success" Text="Start" OnClick="btnLunchStart_Click" />
<asp:Button ID="btnLunchStop" runat="server" CssClass="btn btn-success" Text="Stop" OnClick="btnLunchStop_Click" />
</div>
<div class="col-md-4"></div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4">
<asp:Label ID="lbl_LTimer" runat="server" CssClass="h3" ForeColor="Blue"></asp:Label><br />
<asp:Label ID="lbl_Lhour" runat="server" Visible="false" CssClass="h4" ForeColor="Black" Text="Hr :"></asp:Label>
<asp:Label ID="lbl_LMin" runat="server" Visible="false" CssClass="h4" ForeColor="Black" Text="Min :"></asp:Label>
<asp:Label ID="lbl_LSec" runat="server" Visible="false" CssClass="h4" ForeColor="Black" Text="sec"></asp:Label>
<br />
<asp:Label ID="lbl_LHr" runat="server" CssClass="h3" Font-Bold="true" Font-Size="20" ForeColor="red"></asp:Label>
<br />
<br /> <br /><br /><br /><br /><br />
<asp:Label ID="lbl_Lbrkresp" runat="server" Visible="false"></asp:Label>
<asp:Timer ID="Timer3" runat="server" Interval="1000000" OnTick="Timer3_Tick">
</asp:Timer>
</div>
<div class="col-md-4"></div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
am not familiar with bootstrap may be am doing it in wrong way. Suggest any solution
You can try to set the attribute UseSubmitBehavior to false.
Thus, ASP will not render a submit, but a simple button instead.
Hope that helps! =)
There is Bootstrap menu in MasterPage , which it works perfectly in pages are in root directory, while pages in a directory does not populate the dropdown menu.
http://localhost:3739/ServicePortal/Default.aspx (menu dropdown works
> perfectly)
while
http://localhost:3739/ServicePortal/RegisteredUserPage/DataForm.aspx (menu drop down does not render/work)
Master Page Bootstrap menu code is given below:
<div class="container">
<nav class="navbar navbar-default navbar-orange" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
<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="#">O.S.L</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="myNav">
<ul class="nav navbar-nav">
<li><asp:HyperLink runat="server" ID="HomeHyperLink" NavigateUrl="~/Default.aspx" Text="Home"/></li>
<li class="dropdown">
<%--<asp:HyperLink runat="server" ID="HyperLink10" NavigateUrl="" Text="Services" class="dropdown-toggle" data-toggle="dropdown"></asp:HyperLink>--%>
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li><asp:HyperLink runat="server" ID="HyperLink1" NavigateUrl="#" Text="Education Services"/></li>
<li><asp:HyperLink runat="server" ID="HyperLink2" NavigateUrl="#" Text="Health Services"/></li>
<li><asp:HyperLink runat="server" ID="HyperLink3" NavigateUrl="#" Text="Bank Services"/></li>
<li><asp:HyperLink runat="server" ID="HyperLink4" NavigateUrl="#" Text="Hotels/Restaurents"/></li>
<li><asp:HyperLink runat="server" ID="HyperLink5" NavigateUrl="#" Text="Wedding Halls"/></li>
<li><asp:HyperLink runat="server" ID="HyperLink6" NavigateUrl="#" Text="Shops"/></li>
</ul>
</li>
<li><asp:HyperLink runat="server" ID="HyperLink7" NavigateUrl="#" Text="Add Services"/></li>
<li><asp:HyperLink runat="server" ID="HyperLink8" NavigateUrl="#" Text="Contact us"/></li>
<li><asp:HyperLink runat="server" ID="HyperLink9" NavigateUrl="#" Text="About us"/></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><asp:HyperLink runat="server" ID="hylink" NavigateUrl="~\Registration.aspx" Text="Register"/></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"> <asp:Label ID="lab_loginStatus" runat="server" Text="Sign In"></asp:Label><strong class="caret"></strong></a>
<div class="dropdown-menu" style="width:250px">
<div class="loginfrm">
<!-- Login form here -->
<asp:TextBox ID="tbx_SignInName" runat="server" CssClass="form-control txtfocus-orange" placeholder="Sign In Name or Email"></asp:TextBox>
<asp:TextBox ID="tbx_SignInPassword" runat="server" TextMode="Password" CssClass="form-control txtfocus-orange" placeholder="Password"></asp:TextBox>
<div class="checkbox">
<asp:CheckBox ID="chkbox_SignInRememberMe" Text="Remember me" runat="server" />
<asp:Button ID="btn_SignIn" runat="server" CssClass="btn btn-orange pull-right" Text="Sign In" OnClick="btn_SignIn_Click" CausesValidation="false"/>
</div>
<%-- <div class="horizentalDivider"></div>
<h6><asp:Label ID="lab_NotRegYet" runat="server" Text="Not Registered yet?"></asp:Label></h6>
<asp:LinkButton ID="link_SignUp" runat="server" Text="Register Now"></asp:LinkButton>--%>
<asp:Button ID="btn_Signout" runat="server" CssClass="btn btn-orange pull-right" Text="Sign Out" onClick="btn_Signout_Click" Visible="false" CausesValidation="false"/>
</div>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
please help me in such regards
try using ResolveUrl() in src
<script type="text/javascript" language="javascript" src="<%= ResolveUrl("~/Common/jquery-1.7.1.min.js") %>"></script>
<script type="text/javascript" language="javascript" src="<%= ResolveUrl("~/Common/jquery-ui-1.8.18.custom.min.js") %>"></script>
Based on the links you provided in the comment I believe you need to add tildes and slashes to the beginning of your links in order to indicate that those folders are in the root of the site. Otherwise the browser is looking for them in the subfolders where your pages are. Here's what it should look like:
<link href="~/CSS/bootstrap.css" rel="stylesheet" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="~/JavaScript/jquery-2.1.0.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="~/JavaScript/bootstrap.min.js"></script>
<script src="~/JavaScript/jquery.min.js"></script>
<script src="~/JavaScript/jquery.mobile.customized.min.js">
</script>
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>
Forgot password?<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-->
Forgot username?
<!-- 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>
Services
</li>
<li>
Tool
</li>
<li>
Work
</li>
<li>
Matter
</li>
<li>
About
</li>
<li>
Contact
</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=" Term 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 !
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.