(in vs 2015/asp.net/web forms template)there is several web pages like Register page and login page.all the elements on this pages is created with bootstrap , but I wondered there isn't any bootstrap link command in html source of this pages :
<%# Page Title="Log in" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Login.aspx.vb" Inherits="Account_Login" Async="true" %>
<%: Title %>.
<div class="row">
<div class="col-md-8">
<section id="loginForm">
<div class="form-horizontal">
<h4>Use a local account to log in.</h4>
<hr />
<asp:PlaceHolder runat="server" ID="ErrorMessage" Visible="false">
<p class="text-danger">
<asp:Literal runat="server" ID="FailureText" />
</p>
</asp:PlaceHolder>
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="UserName" CssClass="col-md-2 control-label">User name</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="UserName" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName"
CssClass="text-danger" ErrorMessage="The user name field is required." />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="Password" CssClass="col-md-2 control-label">Password</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Password" CssClass="text-danger" ErrorMessage="The password field is required." />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<asp:CheckBox runat="server" ID="RememberMe" />
<asp:Label runat="server" AssociatedControlID="RememberMe">Remember me?</asp:Label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<asp:Button runat="server" OnClick="LogIn" Text="Log in" CssClass="btn btn-default" />
</div>
</div>
</div>
<p>
<asp:HyperLink runat="server" ID="RegisterHyperLink" ViewStateMode="Disabled">Register</asp:HyperLink>
if you don't have a local account.
</p>
</section>
</div>
<div class="col-md-4">
<section id="socialLoginForm">
<uc:openauthproviders runat="server" id="OpenAuthLogin" />
</section>
</div>
</div>
where can I find the bootstrap link command?
HI Pooya as you can see this page is child page and all the links are define in master like bootstrap and js file
Child page - login.aspx
Master Page - site.master
so you can find all the link in site.master page
Related
I have created .ASCX control for registration and login and has given reference in site.master. When clicked on login then login pop up should appear and the same for registration.If i put <uc:Login ID="ucLogin" runat="server" /> code first then Login works and registration does not and the vice-versa. I think the problem is here:
<uc:Login ID="ucLogin" runat="server" />
<uc1:Registration ID="Registration" runat="server" />
I do not know whether it is good to put <uc1:Registration ID="Registration" runat="server"/> under <asp:LoginView runat="server" ViewStateMode="Disabled"> The whole site.Master page looks like this:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<%# Register Src = "~/Controls/Login.ascx" TagName = "Login" TagPrefix = "uc" %>
<%# Register Src="~/Controls/Registration.ascx" TagPrefix="uc1" TagName="Registration" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<asp:PlaceHolder runat="server">
</asp:PlaceHolder>
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul class="nav navbar-nav navbar-right">
<li> <uc:Login ID="ucLogin" runat="server" /> </li>
<li> <uc1:Registration ID="Registration" runat="server" /></li>
</ul>
</AnonymousTemplate>
</asp:LoginView>
</div>
</div>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
</div>
</form>
</body>
</html>
And the Login.ascx is:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="Login.ascx.cs" Inherits="Login" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:LinkButton ID="lnkLogin" runat="server" Text="Login"></asp:LinkButton>
<asp:Panel ID="pnlLogin" runat="server" CssClass="modalPopup" Style="display: none">
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="Email" CssClass="col-md-3 control-label">User name</asp:Label>
<div class="col-md-9">
<asp:TextBox runat="server" ID="Email" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Email"
CssClass="text-danger" ErrorMessage="The user name field is required." />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="Password" CssClass="col-md-3 control-label">Password</asp:Label>
<div class="col-md-9">
<asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Password" />
</div>
</div>
<div class="form-group">
<asp:Button runat="server" OnClick="LogIn" Text="Log in" CssClass="btn btn-default" />
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="popup" runat="server" DropShadow="false"
TargetControlID="lnkLogin" PopupControlID="pnlLogin"
BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
The registration.ascx page looks like this:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="Registration.ascx.cs" Inherits="Registration" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc11" %>
<asp:LinkButton ID="lnkRegistration" runat="server" Text="Registration"></asp:LinkButton>
<asp:Panel ID="pnlRegistration" runat="server">
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="EmailId" CssClass="col-md-2 control-label">Email Address</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="EmailId" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="EmailId" />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="Password" CssClass="col-md-2 control-label">Password</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Password" />
</div>
</div>
<div class="form-group">
<asp:Button runat="server" OnClick="CreateUser_Click" Text="Register" CssClass="btn btn-default" />
</div>
</asp:Panel>
<cc11:ModalPopupExtender ID="popup1" runat="server" DropShadow="false"
TargetControlID="lnkRegistration" PopupControlID="pnlRegistration"
BackgroundCssClass="modalBackground" CancelControlID="lnkCancel">
</cc11:ModalPopupExtender>
Any help is highly appreciated.
Really, the problem is you were asked to "create .ASCX control", where everything in that quote is singular. Instead, you created two controls (plural). Better to do one control, like this:
In master:
<%# Register Src = "~/Controls/LoginRegister.ascx" TagName = "LoginRegister" TagPrefix = "uc" %>
...
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<uc:LoginRegister ID="ucLogin" runat="server" />
</AnonymousTemplate>
</asp:LoginView>
And then in the new combined loginregister.ascx
<%# Control Language="C#" AutoEventWireup="true" CodeFile="Login.ascx.cs" Inherits="Login" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc" %>
<ul>
<li><asp:LinkButton ID="lnkLogin" runat="server" Text="Login"></asp:LinkButton></li>
<li><asp:LinkButton ID="lnkRegistration" runat="server" Text="Registration"></asp:LinkButton></li>
<ul>
<asp:Panel ID="pnlLogin" runat="server" CssClass="modalPopup" Style="display: none">
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="Email" CssClass="col-md-3 control-label">User name</asp:Label>
<div class="col-md-9">
<asp:TextBox runat="server" ID="Email" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Email"
CssClass="text-danger" ErrorMessage="The user name field is required." />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="Password" CssClass="col-md-3 control-label">Password</asp:Label>
<div class="col-md-9">
<asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Password" />
</div>
</div>
<div class="form-group">
<asp:Button runat="server" OnClick="LogIn" Text="Log in" CssClass="btn btn-default" />
</div>
</asp:Panel>
<asp:Panel ID="pnlRegistration" runat="server">
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="EmailId" CssClass="col-md-2 control-label">Email Address</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="EmailId" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="EmailId" />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="Password" CssClass="col-md-2 control-label">Password</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Password" />
</div>
</div>
<div class="form-group">
<asp:Button runat="server" OnClick="CreateUser_Click" Text="Register" CssClass="btn btn-default" />
</div>
</asp:Panel>
<cc:ModalPopupExtender ID="popup" runat="server" DropShadow="false"
BackgroundCssClass="modalBackground">
</cc:ModalPopupExtender>
Where you also update the *.cs file so the new control so the postback from the links sets the right fields for PopUpExtender. Or, even better, you re-write that part to use javascript (and only javascript) to show the correct panel, such that no server event is needed until the user pushes the login or register buttons.
I am a new ASP.NET Web Forms developer and I am currently using .NET Framework 4.5.2.I have a simple form that includes two textbox controls and two buttons. I am struggling right now with the button click event. When I click on the button, I got the following error and I don't know why.
I searched on the web and I couldn't find any solution to this. Could you please help me in this regard?
For your information, here's my ASP.NET Code:
<asp:UpdatePanel ID="upAdd" runat="server">
<ContentTemplate>
<div id="post-wrapper" class="row">
<div id="content" class="col-md-12 col-sm-12 col-xs-12">
<div id="login">
<div class="form-wrap">
<div role="form">
<div class="form-group">
<label for="email" class="control-label">Name</label>
<asp:TextBox ID="txtNameNew" runat="server" CssClass="form-control" placeholder="e.g. fire extinguisher"></asp:TextBox>
</div>
<div class="form-group">
<label for="key" class="control-label">Description</label>
<asp:TextBox ID="txtDescNew" runat="server" CssClass="form-control" placeholder="e.g. ........."></asp:TextBox>
</div>
<%--<div class="form-group">
<label for="key" class="control-label">ImagePath</label>
<asp:TextBox ID="TextBox2" runat="server" CssClass="form-control"></asp:TextBox>
</div>--%>
<asp:LinkButton ID="lbtnAdd" runat="server" CssClass="btn btn-primary"
OnClick="lbtnAdd_Click">
<span class="fa fa-plus"></span> Add</asp:LinkButton>
<asp:LinkButton ID="lbtnCancel" runat="server" CssClass="btn btn-default"
OnClick="lbtnCancel_Click">
<span class="fa fa-remove"></span> Cancel</asp:LinkButton>
</div>
<hr>
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lbtnAdd" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="lbtnCancel" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<div class="step-content">
<div class="step-pane active" id="step1">
<div class="control-group ">
<label class="control-label" for="inputWarning">Please select the Event Name</label>
<div class="controls">
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True" DataSourceID="SqlDataSource1" DataTextField="EventName" DataValueField="EventId"></asp:DropDownList>
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:WBENCConnectionString %>' SelectCommand="SELECT [EventId], [EventName] FROM [Event]"></asp:SqlDataSource>
</div>
</div>
</div>
<div class="step-pane" id="step2">
<div class="control-group " >
<asp:Label ID="DateLabel" runat="server"></asp:Label>
<div class="controls">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Text="Yes" Value="Yes"></asp:ListItem>
<asp:ListItem Text="No" Value="No"></asp:ListItem>
</asp:RadioButtonList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RadioButtonList1" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
<div class="step-pane" id="step3">
<div class="control-group ">
<label class="control-label" for="inputWarning">
<span class="muted">You can learn more about the program here</span></label>
<div class="controls">
<label class="radio">
<asp:RadioButton ID="Radio1" runat="server" Text="Yes" value="option1" /></label>
<label class="radio">
<asp:RadioButton ID="Radio2" runat="server" Text="No" value="option2" /></label>
<label class="radio">
<asp:RadioButton ID="Radio3" runat="server" Text="Uncertain" value="option2" /></label>
</div>
</div>
</div>
<div class="step-pane" id="step4">
<div class="control-group">
<label class="control-label" for="selectError30">Which days will you be available to participate in the Matchmaker Sessions?</label>
<div class="controls">
<asp:DropDownList ID="selectError30" runat="server" OnDataBound="selectError30_DataBound">
</asp:DropDownList>
</div>
</div>
<div class="control-group">
<label class="control-label">Upload your capability statement. <a style="color: #67c2ef;" href="#">What's this?</a></label>
<div class="controls">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
</div>
</div>
here the DropDownlist1_onselectedIndexChanged event got full page load..
and RadioButtonList1 event also get page load...
here how can I use the Update Panel to overcome the full page load....
In my code all events perform Page_Load....
I want to prevent that loading....
If there is a full page load then since panel is inside the page, it will also get refreshed. You can put the drop down inside another update panel. This will prevent the refreshing of radio button update panel.
Using Bootstrap 3.0 and the code below is a snip of a which contains 3 items, each in a which looks and works well, except the first element in this row (plus others) is shifted slightly above the other elements within the "ROW." I've attached a screenshot of the issue. I haven't modified the Bootstrap CSS to cause any issues.
Note: the other rows don't contain ASP controls which I thought was the issue but it's not.
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<h2><%: Title %>.</h2>
<hr />
<section id="CreateUserForm">
<h4>Create User <i class="fa fa-user"></i></h4>
<!--1st ROW-->
<div class="row">
<div class="form-group">
<div class="col-md-4">
<asp:DropDownList ToolTip="User Role" runat="server" ID="UserRole" CssClass="form-control" ![enter image description here][2]AppendDataBoundItems="true" DataSourceID="AspNetRoles" DataTextField="Name" DataValueField="Name" Width="280px">
<asp:ListItem Text="-- Select User Role --" Value="" />
</asp:DropDownList>
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserRole"
CssClass="text-danger" ErrorMessage="User Type is required." Display="Dynamic" />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="text" runat="server" title="User Name" id="UserName" class="form-control" placeholder="User Name..." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName"
CssClass="text-danger" ErrorMessage="User Name is required." Display="Dynamic" />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="text" runat="server" title="First Name" id="FirstName" class="form-control" placeholder="First Name..." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="FirstName"
CssClass="text-danger" ErrorMessage="First Name is required." Display="Dynamic" />
</div>
</div>
</div>
<!--END 1st ROW-->
<!--2nd Row-->
You need to wrap everything in a .container.
The fix was removing "form-group" around the controls and inserting a break after each "ROW"
<!--1st ROW-->
<div class="row">
<div class="col-md-4">
<asp:DropDownList ToolTip="User Role" runat="server" ID="UserRole" CssClass="form-control" AppendDataBoundItems="true" DataSourceID="AspNetRoles" DataTextField="Name" DataValueField="Name" Width="280px">
<asp:ListItem Text="-- Select User Role --" Value="" />
</asp:DropDownList>
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserRole"
CssClass="text-danger" ErrorMessage="User Type is required." Display="Dynamic" />
</div>
<div class="col-md-4">
<input type="text" runat="server" title="User Name" id="UserName" class="form-control" placeholder="User Name..." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName"
CssClass="text-danger" ErrorMessage="User Name is required." Display="Dynamic" />
</div>
<div class="col-md-4">
<input type="text" runat="server" title="First Name" id="FirstName" class="form-control" placeholder="First Name..." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="FirstName"
CssClass="text-danger" ErrorMessage="First Name is required." Display="Dynamic" />
</div>
</div>
<br />
<!--END 1st ROW-->
I had the same problem with a form I was creating, I found the answer was to add the column class before the form-group. This fixed the alignment issue and there was no need to add a break between rows (form-group takes care of spacing for you).
<!--1st ROW-->
<div class="row">
<div class="col-md-4">
<div class="form-group">
<asp:DropDownList ToolTip="User Role" runat="server" ID="UserRole" CssClass="form-control" ![enter image description here][2]AppendDataBoundItems="true" DataSourceID="AspNetRoles" DataTextField="Name" DataValueField="Name" Width="280px">
<asp:ListItem Text="-- Select User Role --" Value="" />
</asp:DropDownList>
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserRole"
CssClass="text-danger" ErrorMessage="User Type is required." Display="Dynamic" />
</div>
</div>
Hope this helps.
Because we will have a bigish team of people working on various parts of pages etc I decided to break down as many of the sections of the pages into reusable Usercontrols.
I am however having an issue with one control.
Firstly, let me give you an idea of what is happening. You can also see this at http://www.elycity.co.uk/Business/BusinessNew2.aspx?businessid=24
We Firstly have the layout page: BusinessNew2.aspx
Each section has a webcontrol but the last section. The CompanyInformation Section has several other UserControls within.
All are working fine except the Contact (businesscontact.ascx)
On clicking the button, the Tabs.ascx is reset and it returns to the Information.ascx Tab.
BusinessContact.ascx
<%# Control Language="VB" AutoEventWireup="false" CodeFile="BusinessContact.ascx.vb" Inherits="BusinessListing.BusinessContact" %>
<asp:UpdatePanel ID="updMain" runat="server" >
<ContentTemplate>
<asp:Panel ID="pnlContactMain" runat="server" >
<h3>Send <asp:literal ID="litCompanyName" runat="server" /> a message</h3>
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputName">Name</label>
<div class="controls">
<asp:textbox type="text" id="txtName" placeholder="Name" runat="server" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<asp:textbox id="txtEmail" placeholder="Email" runat="server" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPhone">Telephone No</label>
<div class="controls">
<asp:textbox id="txtPhone" placeholder="Telephone" runat="server" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputMessage">Message</label>
<div class="controls">
<asp:TextBox Height="40" TextMode="MultiLine" id="txtMessage" placeholder="Message" runat="server" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputMessage"></label>
<div class="controls">
<asp:Button ID="btnSendMessage" runat="server" Text="Send Message" />
</div>
</div>
</div>
</asp:Panel>
<asp:Panel ID="pnlContactSent" runat="server" Visible="false">
<div class="hero-unit">
<h2>Email has been sent</h2>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Just while testing, the codebehind:
Namespace BusinessListing
Partial Class BusinessContact
Inherits System.Web.UI.UserControl
Protected Sub btnSendMessage_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSendMessage.Click
pnlContactMain.Visible = False
pnlContactSent.Visible = True
End Sub
End Class
End Namespace
So what am i missing. Why is this doing full postback to parent controller and how can i prevent this?
Regards
Mark
You've not provided the code for tabs.ascx, but I would guess you've not defined which controls should trigger postbacks in the update panel.
That means all postbacks from controls within the UpdatePanel in tabs.ascx are causing the panel to update, including postbacks from child UserControls.
If you use:
<asp:UpdatePanel id="upanelInfo" runat="server" ... >
<ContentTemplate>
...
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="buttonXXX" EventName="Click" />
....
</Triggers>
</asp:UpdatePanel>