<div id="formContainer">
<form id="login" runat="server">
Forgot?
<asp:TextBox ID="loginEmail" Text="Email" runat="server"></asp:TextBox>
<asp:TextBox ID="loginPass" TextMode="Password" runat="server" value="pass"></asp:TextBox>
<asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />
</form>
<form id="recover" method="post" action="./">
Forgot?
<input type="text" name="recoverEmail" id="recoverEmail" value="Email" />
<input type="submit" name="submit" value="Recover" />
<%-- <asp:Button ID="btnrecover" runat="server" Text="Recover" OnClick="btnrecover_Click" />--%>
</form>
</div>
This is my code and I need to write a code on recover button.
But error came that is only one form is used.
Can anyone help to solve this error?
I want to write code on both buttons to submit and recover.
Thanks.
You can use Panel control instead of form ,
<div id="formContainer">
<asp:Panel runat="server" ID="pTest" DefaultButton="btnLogin">
Forgot?
<asp:TextBox ID="loginEmail" Text="Email" runat="server"></asp:TextBox>
<asp:TextBox ID="loginPass" TextMode="Password" runat="server" value="pass"></asp:TextBox>
<asp:Button ID="btnLogin" runat="server" Text="Login" />
</asp:Panel>
<asp:Panel runat="server" ID="Panel1" DefaultButton="btnrecover">
Forgot?
<input type="text" name="recoverEmail" id="recoverEmail" value="Email" />
<input type="submit" name="submit" value="Recover" />
<asp:Button ID="btnrecover" runat="server" Text="Recover" />
</asp:Panel>
</div>
You can also reference this link !
There is another way, you can extend your first form to Control, then you can see it on your Toolbox. Then just drag it to your second Form.
Related
I am using ASP.NET and C#. I want to popup this little screen, then when the OK button is clicked, I want to update the main screen based on the input to the popup. Sounds like it should be a regular thing. Is it possible, and if so, how?
<cc1:modalpopupextender id="ModalPopupExtender1" runat="server"
cancelcontrolid="btnCancel" okcontrolid="btnOkay"
targetcontrolid="txtCosCodeExpCode" popupcontrolid="Panel1"
popupdraghandlecontrolid="PopupHeader" drag="true"
backgroundcssclass="ModalPopupBG">
</cc1:modalpopupextender>
<asp:panel id="Panel1" style="display: none" runat="server">
<div class="CostCentreExpenseCodePopup" style="background-color:White ; border-style :solid;">
<div class="PopupHeader" id="PopupHeader">Select Cost Centre / Expense Code</div>
<div class="PopupBody">
<p>Cost Centre<asp:DropDownList
ID="ddlCostCentres1"
runat="server"
CssClass="SVSComboBox1"
AppendDataBoundItems ="True"
AutoPostBack="True"
style = "width :152px;"
OnSelectedIndexChanged="ddlCostCentres1_SelectedIndexChanged">
<asp:ListItem Text="Please select" Value="0"></asp:ListItem>
</asp:DropDownList></p>
<p>Expense Code <asp:DropDownList ID="ddlExpCode1" runat="server" CssClass="SVSComboBox1" style = "width :152px;"
AppendDataBoundItems ="True" Enabled="False" Visible ="False">
<asp:ListItem Text="Please select" Value="0"></asp:ListItem>
</asp:DropDownList></p>
</div>
<div class="Controls">
<input id="btnOkay" type="button" value="Done" />
<input id="btnCancel" type="button" value="Cancel" />
</div>
</div>
Don't set OkControlID but use ModalPopupExtender1.Hide() on server-side. Then you're able to call your update-code first.
You should also use server-buttons instead of <input id="btnOkay" type="button" value="Done" /> and handle their click-event.
First of all add the asp:Button as an Ok button and add click event in your aspx.cs page as mentioned below:
ASPX:
<asp:Button runat="server" ID="btnOkay" Text="OK" OnClick="btnOkay_Click"/>
ASPX.cs
protected void btnOkay_Click(object sender, EventArgs e)
{
// Code to write on ok click event
}
And then remove okcontrolid="btnOkay" from your modal popup extender.
How do I delete an item from a asp:Repeater? At the moment I have the following code for the repeater:
<asp:Repeater ID="uxRolesList" runat="server">
<ItemTemplate>
<div id="<%# GetRolesDivId() %>">
<asp:TextBox ID="uxTxtBoxRole" runat="server" rows="5" columns="100" Text='<%# Container.DataItem %>' TextMode="multiline" MaxLength="2000"></asp:TextBox>
<asp:Button ID="uxRemoveRoleBtn" Style="vertical-align:top;" CssClass="remove-roles-btn" runat="server" Text="X" />
<br />
<asp:RequiredFieldValidator runat="server" ID="uxValTxtBoxRole" ControlToValidate="uxTxtBoxRole" ErrorMessage="Please complete this role requirement"></asp:RequiredFieldValidator>
<br /><br />
</div>
</ItemTemplate>
</asp:Repeater>
Which should output something like this:
<div id="roles-1">
<textarea name="ctl00$mainContent$uxRolesList$ctl01$uxTxtBoxRole" rows="5" cols="100" id="ctl00_mainContent_uxRolesList_ctl01_uxTxtBoxRole">Quick test</textarea> <input type="submit" name="ctl00$mainContent$uxRolesList$ctl01$uxRemoveRoleBtn" value="X" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$mainContent$uxRolesList$ctl01$uxRemoveRoleBtn", "", true, "", "", false, false))" id="ctl00_mainContent_uxRolesList_ctl01_uxRemoveRoleBtn" class="remove-roles-btn" style="vertical-align:top;" />
<br />
<span id="ctl00_mainContent_uxRolesList_ctl01_uxValTxtBoxRole" class="error" style="color:#891F11;display:none;">Please complete this role requirement</span>
<br /><br />
</div>
And I'm using the following jQuery to 'delete' the item when the delete button is clicked:
$("#roles-" + roleIdNumber).remove();
e.preventDefault();
rolesCounter--;
Where roleIdNumber is 1 in this case.
But when I submit the form, the item still appears - can anyone help me with what is happening?
i suggest replacing:
<div id="<%# GetRolesDivId() %>">
with:
<div id="<%# GetRolesDivId() %>" class="div_row">
and this line:
<asp:Button ID="uxRemoveRoleBtn" Style="vertical-align:top;" CssClass="remove-roles-btn" runat="server" Text="X" />
with:
<input type="button" style="vertical-align:top;" value="X" class="remove-roles-btn" onclick="$(this).parents('.div_row').remove();rolesCounter--;" />
and remove all the js code you shared here.
hope it helped.
Its probably not working because the repeater items are added to the DOM after the Document.Ready function call has finished executing.
If your repeater fetches data after the page load is complete, then consider using Jquery's on() method or the delegate method.
I have a asp.net web form Page which uses master page also.
This is a simple page which displays some text and has a form, this page also allows user to upload resume in .doc, .docx & pdf format.
Problem with this code is that i am not able to trigger
for some reason <asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btnUpload" onclick="btnUploadCV_Click"/>
<%# Page Title="" Language="C#" MasterPageFile="~/en/SiteMasterPage.master" AutoEventWireup="true" CodeFile="career.aspx.cs" Inherits="career" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<!-- Content Page-->
<!-- page content wrapper -->
<div id="page-content-area" class="page-content-area">
<div id="pg-left-bar" class="pg-left-bar">
<div class="page-title">
<h5><asp:Label ID="lblPageTitle" CssClass="page-title-lbl" runat="server" Text="Introduction"></asp:Label></h5>
</div>
<div class="page-text">
<asp:Label ID="lblPageContents" runat="server" Text=""></asp:Label>
</div>
<div class="career-form-wrapper">
<!-- UpdatePanel -->
<asp:UpdatePanel ID="updPnlArticles" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlCareerForm" runat="server">
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="lblFirstName" runat="server" CssClass="row-label" Text="First Name:"></asp:Label>
</div>
<asp:TextBox ID="txtFirstName" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfFN" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtFirstName"></asp:RequiredFieldValidator>
</div>
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="lblFamilyName" runat="server" CssClass="row-label" Text="Family Name:"></asp:Label>
</div>
<asp:TextBox ID="txtFamilyName" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfLN" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtFamilyName"></asp:RequiredFieldValidator>
</div>
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="lblEmail" runat="server" CssClass="row-label" Text="Email:"></asp:Label>
</div>
<asp:TextBox ID="txtEmail" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmail" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtEmail"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmail" runat="server" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="Careers"></asp:RegularExpressionValidator>
</div>
<div class="row-form">
<div class="row-lbl-wrapper">
<asp:Label ID="lblPhone" runat="server" CssClass="row-label" Text="Phone Number:"></asp:Label>
</div>
<asp:TextBox ID="txtPhone" runat="server" CssClass="row-phone" Text=""></asp:TextBox>
<asp:RegularExpressionValidator ID="revPhone" runat="server" ErrorMessage="*" ValidationGroup="Careers" ControlToValidate="txtPhone" ValidationExpression="^([\+]?[0-9]{1,3}[\s.-][0-9]{1,12})([\s.-]?[0-9]{1,4}?)$"></asp:RegularExpressionValidator>
<div class="tooltip tooltip-override" title="Accepts local format (eg. 04 1234567, 050 1234567 or 04-1234567, 050-1234657)<br />and international format (eg. +971 41234567, +971-41234567 ).<br />Also accepts an optional extention of up to four digits (eg. 04 1234567 289 or +974 41234567 289)">
<asp:Image ID="imgtooltip" CssClass="tooltip-img" runat="server" ImageUrl="~/images/tooltipgreen.png" />
</div>
</div>
<div class="row-form">
<div class="row-lbl-wrapper">
<asp:Label ID="lblFax" runat="server" CssClass="row-label" Text="Fax Number:"></asp:Label>
</div>
<asp:TextBox ID="txtFax" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RegularExpressionValidator ID="revFax" runat="server" ErrorMessage="*" ValidationGroup="Careers" ControlToValidate="txtFax" ValidationExpression="^([\+]?[0-9]{1,3}[\s.-][0-9]{1,12})$"></asp:RegularExpressionValidator>
<div class="tooltip tooltip-override" title="Accepts local format (eg. 04 1234567 or 040-1234567)<br />and international format (eg. +974 41234567 or +974-41234567)">
<asp:Image ID="Image1" CssClass="tooltip-img" runat="server" ImageUrl="~/images/tooltipgreen.png" />
</div>
</div>
<div class="row-form">
<div class="row-lbl-wrapper">
<asp:Label ID="lblAddress" runat="server" CssClass="row-label" Text="Address:"></asp:Label>
</div>
<asp:TextBox ID="txtAddress" runat="server" CssClass="row-input-multiline" TextMode="MultiLine"></asp:TextBox>
</div>
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="lblCountry" runat="server" CssClass="row-label" Text="Country:"></asp:Label>
</div>
<asp:DropDownList ID="ddCountry" runat="server" CssClass="row-dd"></asp:DropDownList>
<asp:CascadingDropDown ID="csdCountry" runat="server" Category="Country" TargetControlID="ddCountry" PromptText="-- Select --" LoadingText="[Loading Countries...]" ServiceMethod="FetchCountries" ServicePath="~/wsCountryCity.asmx" PromptValue="0"></asp:CascadingDropDown>
<asp:RequiredFieldValidator ID="rfCountry" ValidationGroup="Careers" ControlToValidate="ddCountry" CssClass="row-validate" InitialValue="0" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>
</div>
<div class="row-form">
<div class="row-lbl-wrapper">
<asp:Label ID="lblCity" runat="server" CssClass="row-label" Text="City:"></asp:Label>
</div>
<asp:DropDownList ID="ddCity" runat="server" CssClass="row-dd"></asp:DropDownList>
<asp:CascadingDropDown ID="csdCity" runat="server" Category="City" TargetControlID="ddCity" ParentControlID="ddCountry" PromptText="-- Select --" LoadingText="[Loading Cities...]" ServiceMethod="FetchCities" ServicePath="~/wsCountryCity.asmx" PromptValue="0"></asp:CascadingDropDown>
</div>
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="Label1" runat="server" CssClass="row-label" Text="CV:"></asp:Label>
</div>
<asp:FileUpload ID="FileUpload1" runat="server" CssClass="fileUpload" />
<div id="dFileUpload1" class="btnUploadHack">Browse</div>
<asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btnUpload" onclick="btnUploadCV_Click" />
<asp:RequiredFieldValidator ID="rfvF1" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="FileUpload1"></asp:RequiredFieldValidator>
<asp:Label ID="lblImageMSG" runat="server" Text=""></asp:Label>
</div>
<div class="contactus-row">
<asp:Button ID="btnSave" runat="server" CssClass="btnContactUsSave" Text="Send Message" onclick="btnSave_Click" ValidationGroup="Careers" />
</div>
</asp:Panel>
<asp:Panel ID="pnlCareerMSG" runat="server"></asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<!-- UpdatePanel -->
</div>
</div>
<div class="pg-right-bar">
<asp:Image ID="imgSideBanner" runat="server" />
</div>
</div>
<!-- page content wrapper -->
<!-- Content Page-->
</asp:Content>
Code Behind
protected void btnUploadCV_Click(object sender, EventArgs e)
{
// code is here
}
So far i am not able to figure out what i s blocking the any button inside from firing. Yes i did even put a simple button to test even that didn't fire.
I am not sure if it is Validation or Update Panel which is creating problem.
I tried using Trigger that didnt work
I tried setting
<asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btnUpload" onclick="btnUploadCV_Click" CausesValidation="false" />
protected void btnUploadCV_Click(object sender, EventArgs e)
{
Page.Validate();
if (Page.IsValid == true)
{
// your code here
}
}
My problem is it deosn't even enter code block of button for some reason.
Just to add further i am using cascading dropdown for country and cities i am not sure if that is causing any problem I am also using two panels one has the form control and after successful submission i hide this panel & show the other panel with success message all this code with UpdatePanel.
Only way out of this i see is to upload all files main form button Send Message rather than having individual button for all file upload control
UPDATE: I also tried this approach even this doesn't work
Please understand the concept
Update Panel is used for partial post back which is today we call AJAX
However AJAX cannot be used to upload file to the server
AJAX uses xmlHttpRequest which do not support file upload.
So, don't think that its a bug from Microsoft. Even today also, we don't have any javascript library which will support FileUpload using AJAX. All AJAX fileuploaders that you find on internet are using Flash :)
This is the limitation of protocol. Use any other jquery plugin to upload file. Update panel will not work for this.
FileUpload control doesn't work with asynchronous postbacks.To make this work in your application, follow below steps
1.) Place a <asp:ScriptManager /> on the page.
if you are using master page in your application and your web page uses the master page, place script manager in master page. If you don't want master page to have script manager,you can also place script manager on specific web pages anyways.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
2.) After this, Add <Triggers> for the button btnUploadCV in your Update panel.
<Triggers>
<asp:PostBackTrigger ControlID="btnUploadCV" />
</Triggers>
And rest of your upload button OnClick handler looks like:
protected void btnUploadCV_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
fileName = FileUpload1.FileName;
FileUpload1.SaveAs("~/UploadedData/" + fileName);
...
}
}
From the documentation here http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.login.layouttemplate.aspx i had customized the user interface of login control through layout template like below
<LayoutTemplate>
<h3 class="login-title page-header">
<asp:Literal runat="server" ID="loginHeading" Text="Sign-in"></asp:Literal>
</h3>
<div class="clearfix">
<asp:Label runat="server" ID="lblUserName" Text="Username" AssociatedControlID="UserName"></asp:Label>
<div class="input">
<asp:TextBox runat="server" ID="UserName"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="rfvTxtUserName" ErrorMessage="Username is required"
ControlToValidate="UserName" Text="Username is required"></asp:RequiredFieldValidator>
</div>
</div>
<div class="clearfix">
<asp:Label runat="server" Text="Password" AssociatedControlID="Password"></asp:Label>
<div class="input">
<asp:TextBox runat="server" ID="Password" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="rfvTxtPassword" ErrorMessage="Password is required"
ControlToValidate="Password" Text="Password is required"></asp:RequiredFieldValidator>
</div>
</div>
<div class="clearfix">
<asp:Label runat="server" Text="Remember Me" AssociatedControlID="RememberMe"></asp:Label>
<div class="input">
<input type="checkbox" runat="server" id="RememberMe" />
</div>
</div>
<div class="actions action-fix">
<asp:Button runat="server" ID="Login" Text="Login" CssClass="btn success small" />
<input type="reset" class="btn small" value="reset" />
</div>
</LayoutTemplate>
as you can see i did name the control ID as required by the control. Also i use CSS Friendly control adapter for rendering the Login control.
The Problem
It just happens after user types username and password and submits the details nothing happens the page just reloads causing a postback.
What am i doing wrong here
info:
more problem seems to be more prominent for users using LoginControlAdapter look here http://forums.asp.net/t/1043974.aspx/2/10
you must be missing CommandName paramter
<asp:button id="Login" CommandName="Login" runat="server" Text="Login"></asp:button>
Try adding command name to your login button;
<asp:Button runat="server" ID="Login" Text="Login" CssClass="btn success small" CommandName="Login" />
Here's my forms layout:
<body>
<p>Note that this form doesn't actually do anything
except illustrate the Required Field Validator.</p>
<form id="frmValidator" method="post" runat="server">
Usuario:
<asp:TextBox id="txtUserName" runat="server" />
<asp:RequiredFieldValidator id="userNameValidator" ControlToValidate="txtUserName" ErrorMessage='<img src="../Images/no.png">' runat="server" />
<br />
Contrasena:
<asp:TextBox id="txtPassword" runat="server" />
<asp:RequiredFieldValidator id="passwordValidator" ControlToValidate="txtPassword" ErrorMessage='<img src="../Images/no.png">' runat="server" />
<br />
<asp:button id="btnSubmit" text="Submit" runat="server" />
</form>
<p>Hint: Try submitting it before you enter something.</p>
</body>
This is a simple layout for just learning purposes, but they align themselves badly. They just smooch together.
Someone suggested I just prace the 'space' key to create the whitespace between them, but that doesn't align them at all. They can never be correctly aligned.
Someone said use tables, but I loathe the idea of using tables for layout.
How can I achieve a simple
organizational style between these two
fields?
To expand on Creasey's answer.
<div style="width=150">Usuario:</div>
<asp:TextBox id="txtUserName" runat="server" />
...
<div style="width=150">Contrasena:</div>
<asp:TextBox id="txtPassword" runat="server" />
wrap you labels in a div with a class. Then set the min-width the label class so that it is as wide as you need it, then all your fields/labels will line up.
How about padding them so they're not smooshed together? Of course, you may want to create a css class instead of the style attribute, but you get the point.
As far as a standard for ASP.NET, just use good standard CSS. There's nothing fundamentally different with ASP.NET than any other web programming language.
<form id="frmValidator" method="post" runat="server">
<div style="padding:5px;">
Usuario:
<asp:TextBox id="txtUserName" runat="server" />
<asp:RequiredFieldValidator id="userNameValidator" ControlToValidate="txtUserName" ErrorMessage='<img src="../Images/no.png">' runat="server" />
</div>
<div style="padding:5px;">
Contrasena:
<asp:TextBox id="txtPassword" runat="server" />
<asp:RequiredFieldValidator id="passwordValidator" ControlToValidate="txtPassword" ErrorMessage='<img src="../Images/no.png">' runat="server" />
</div>
<div style="padding:5px;">
<asp:button id="btnSubmit" text="Submit" runat="server" />
</div>
</form>
I would try to use a template or an form generator. A great starting point for solutions is:
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
:-)
No need for extra <div>'s - that's what CSS is for!
Here's a basic example using what ASP would render as HTML: http://jsfiddle.net/qWcpN/
And here's the code for it in case you don't want to look at the link.
HTML:
<asp:Label runat="server" AssociatedControlID="txtUserName" Text="Username" />
<asp:TextBox runat="server" id="txtUserName" />
<asp:RequiredFieldValidator runat="server" id="userNameValidator" CssClass="formError" ControlToValidate="txtUserName" ErrorMessage='Username is required!' />
<asp:Label runat="server" AssociatedControlID="txtPassword" Text="Password" />
<asp:TextBox runat="server" id="txtPassword" />
<asp:RequiredFieldValidator runat="server" id="passwordValidator" CssClass="formError" ControlToValidate="txtPassword" ErrorMessage='Password is required!' />
<asp:Button runat="server" id="btnSubmit" text="Submit" />
CSS:
label{
display:block;
font-weight:bold;
margin-bottom:2px;
}
input[type='text'],
input[type='password']{
display:block;
margin-bottom:10px;
padding:3px;
}
button,
input[type='button'],
input[type='submit']{
padding:5px;
}
.formError{
background:#F00;
color:#FFF;
display:block;
font-weight:bold;
margin-bottom:10px;
max-width:300px;
padding:3px;
}