I'm getting the error "Uncaught SyntaxError: Unexpected token < " when simply trying to include jQuery 1.9.1 in my .Net page. The code for the page is below. I have checked my jQuery 1.9.1 file and it is fine, I have other pages using that same file with no error. I have even tried using jQuery 1.10.2 and got the same error. Without the jQuery script tag I have no errors, and I am lost as to what the issue is.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="NewLogin.aspx.cs" Inherits="Platform.Account.NewLogin" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Merchants TotalView</title>
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="status">
<asp:Literal ID="litStatus" runat="server"></asp:Literal>
</div>
<div id="login" runat="server">
<asp:Label ID="lblUsername" runat="server" AssociatedControlID="txtUsername">Username:</asp:Label>
<asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
<br />
<asp:Label ID="lblPassword" runat="server" AssociatedControlID="txtPassword">Password:</asp:Label>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
<br />
<a id="lnkForgotPass" href="NewLogin.aspx?mode=forgot">forgot password</a>
<a id="lnkForgotUser" href="NewLogin.aspx?mode=forgot">forgot username</a>
<br />
<asp:Button ID="btnLogin" runat="server" Text="Submit"></asp:Button>
</div>
<div id="forgot" runat="server">
<input id="hdnForgot" runat="server" type="hidden" />
<asp:Literal ID="litStatusMessage" runat="server"></asp:Literal><br />
<asp:Label ID="lblEmail" runat="server" AssociatedControlID="txtEmail">Email Address:</asp:Label>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<br />
<asp:Button ID="btnForgot" runat="server" Text="Submit" OnClick="btnForgot_Click"></asp:Button>
</div>
<div id="change" runat="server">
change pass
</div>
</div>
</form>
</body>
</html>
Try removing the runat="server" from the head tag
<head>
<title>Merchants TotalView</title>
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
Related
I have requiredFieldValidator for a dropdownlist inside a panel. If there is no data selected in the dropdown btnSubmitReport works fine to validate and display *. Once data is selected and btnSubmitReport is clicked to display data it still works fine. Now if you unselect the dropdown and hit btnSubmitReport it does not do validation anymore. This is because first time btnSubmitReport_Click is clicked, it checks to see if Page.IsValid and calls JavaScript code, but subsequent calls are just calling JavaScript code and btnSubmitReport_Click is not being called to see if the page is Valid. Please suggest. Here is the sample code on the aspx page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="testValidator.aspx.cs"
MasterPageFile="~/Site.master" Inherits="textXslt.testValidator" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script src="Styles/Reports.js" type="text/javascript"></script>
<h3>
<asp:Label ID="lblHeader" runat="server" Text="Reporting Filter"></asp:Label>
</h3>
<div style="text-align: right">
<input id="lnkShowFilter" type="button" value="Show Filter" onclick="ShowF()" class="btn" />
<input id="lnkHideFilter" type="button" value="Hide Filter" onclick="HideF()" class="btn" />
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="divFilter">
<asp:UpdatePanel ID="uplMain" runat="server">
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<table>
<tr>
<td valign="top">
<table>
<tr>
<td>
<asp:CheckBox ID="chkBusiness" runat="server" Text="Business Division" CssClass="chkbox" />
</td>
<td>
<asp:DropDownList ID="ddlBusiness" runat="server" AppendDataBoundItems="true" AutoPostBack="true"
CausesValidation="True" OnSelectedIndexChanged="ddlBusiness_SelectedIndexChanged"
ValidationGroup="grpSubmit" Width="350px">
<asp:ListItem Selected="True" Value="-1">--- SELECT ---</asp:ListItem>
<asp:ListItem>Orange</asp:ListItem>
<asp:ListItem>Apple</asp:ListItem>
<asp:ListItem>Mango</asp:ListItem>
</asp:DropDownList>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvBusiness" runat="server" ControlToValidate="ddlBusiness"
Enabled="true" ToolTip="Please select a Business." ErrorMessage="*" InitialValue="-1"
ForeColor="Red" CssClass="required" Display="Dynamic" ValidationGroup="grpSubmit">
</asp:RequiredFieldValidator>
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:PlaceHolder>
<hr size="1" />
<div style="text-align: center">
<table style="width: 10%">
<tr>
<td>
<asp:Button ID="btnHome" runat="server" Text="Home" OnClick="btnHome_Click" CssClass="btn" />
</td>
<td>
<asp:Button ID="btnSubmitReport" runat="server" Text="Submit" OnClick="btnSubmitReport_Click"
ValidationGroup="grpSubmit" CssClass="btn" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="divResult">
<asp:UpdatePanel ID="uplGrid" runat="server">
<ContentTemplate>
Here go Results of grid
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
Here is the code behind:
protected void btnSubmitReport_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
btnSubmitReport.Attributes["onclick"] = "javascript:SubmitF();";
}
//then do rest of the processing to display grid results
}
and here is Reports.js file:
function ShowF() {
$('#lnkShowFilter').hide();
$('#divFilter').show();
$('#lnkHideFilter').show();
$('#divResult').hide();
$('#MainContent_lblHeader').text("Reporting Filter");
}
function HideF() {
$('#lnkShowFilter').show();
$('#divFilter').hide();
$('#lnkHideFilter').hide();
$('#divResult').show();
$('#').show();
$('#MainContent_lblHeader').text("Report Result");
}
function SubmitF() {
// alert("SubmitF");
$('#lnkShowFilter').show();
$('#divFilter').hide();
$('#lnkHideFilter').hide();
$('#divResult').show();
$('#MainContent_lblHeader').text("Report Result");
}
well, I was able to solve the issue by using client-side validation. So I created a function
<script type="text/javascript">
function ValidateAndShowPopup() {
if (Page_ClientValidate('grpSubmit')) {
SubmitF();
}
}
And added both OnclientClick and OnClick to the submit button
<asp:Button ID="btnSubmitReport" runat="server" Text="Submit" OnClick="btnSubmitReport_Click" ValidationGroup="grpSubmit" OnClientClick="ValidateAndShowPopup()" CssClass="btn" />
I have a form with some data inside my .aspx webform
I also have a button. When i click that button, i need to load another, exactly the same form, but without refreshing the site, so i wouldn't loose any data in the previous form.
How can i do this?
<form id="form1" runat="server">
<asp:Label ID="labelOpis" runat="server" Text="Opis izdelka"></asp:Label><br />
<asp:TextBox ID="inputTextArea" class="form-control" runat="server"></asp:TextBox><br />
<span style="color:red"><asp:Label ID="errorOpis" runat="server"></asp:Label></span><br />
<asp:Label ID="labelKolicina" runat="server" Text="Količina"></asp:Label><br />
<asp:TextBox ID="inputKolicina" type="number" class="form-control" runat="server"></asp:TextBox><br />
<button id="btnAddNewProduct" class="form-control">Add new product</button>
UPDATE
.aspx
<script src="Content/jquery-1.12.2.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Content/bootstrap.min.js"></script>
<script src="Content/hideForm.js"></script>
<script src="Content/live-preview.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.ticket').click(function () {
$(".skrijPrvo").slideToggle();
});
});
</script>
<body>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form id="form1" runat="server">
<div class="form-group">
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder><br />
</div>
<asp:Button ID="Button2" runat="server" class="form-control" Text="Zaključi nakup"/><br />
<asp:Button ID="Button3" runat="server" class="form-control" Text="Nazaj"/><br />
<asp:Button ID="Button4" runat="server" Text="Dodaj nov artikel" class="ticket" OnClick="AddControl_Click" /><br />
</form>
</div>
</div>
</div>
</div>
ascx
<body>
<div id="accordion">
<h3>Dodaj nov izdelek</h3>
<div class="skrijPrvo">
<asp:Label ID="labelOpis" runat="server" Text="Opis izdelka"></asp:Label><br />
<asp:TextBox ID="inputTextArea" class="form-control" runat="server"></asp:TextBox><br />
<span style="color:red"><asp:Label ID="errorOpis" runat="server"></asp:Label></span><br />
<asp:Label ID="labelKolicina" runat="server" Text="Količina"></asp:Label><br />
<asp:TextBox ID="inputKolicina" type="number" class="form-control" runat="server"></asp:TextBox><br />
<span style="color:red"><asp:Label ID="errorKolicina" runat="server"></asp:Label></span><br />
<asp:DropDownList ID="inputDropdownList" class="form-control" runat="server">
<asp:ListItem Text="" Value=""></asp:ListItem>
<asp:ListItem Text="Material1" Value="Material1"></asp:ListItem>
<asp:ListItem Text="Material2" Value="Material2"></asp:ListItem>
<asp:ListItem Text="Material3" Value="Material3"></asp:ListItem>
</asp:DropDownList><br />
<span style="color:red"><asp:Label ID="errorDropDown" runat="server"></asp:Label></span><br />
<asp:FileUpload ID="fileUpload" runat="server" class="form-control" onchange="readURL(this)" /><br />
<span style="color:red"><asp:Label ID="errorFileUpload" runat="server"></asp:Label></span><br />
<asp:Image ID="fileUploadImg" class="form-control" runat="server" Height="300px"/><br />
</div>
</div>
I think you are looking for dynamically added User Controls.
Add a new User Control to your project and put your form in it.
<asp:Label ID="labelOpis" runat="server" Text="Opis izdelka"></asp:Label>
<br />
<asp:TextBox ID="inputTextArea" class="form-control" runat="server"></asp:TextBox>
<br />
<span style="color: red"><asp:Label ID="errorOpis" runat="server"></asp:Label></span>
<br />
<asp:Label ID="labelKolicina" runat="server" Text="Količina"></asp:Label>
<br />
<asp:TextBox ID="inputKolicina" type="number" class="form-control" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
On the page that will contain the Controls you need to add a PlaceHolder
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
<br />
<asp:Button ID="AddControl" runat="server" Text="Button" OnClick="AddControl_Click" />
Then you need to (re)create the User Controls on every Page Load and the Add Control button click.
protected void Page_Load(object sender, EventArgs e)
{
//check if the viewstate exists and if so, build the controls
if (ViewState["controlCount"] != null)
{
addControls(Convert.ToInt32(ViewState["controlCount"]));
}
else
{
//if not add just 1 control
addControls(1);
}
}
private void addControls(int n)
{
//loop the amount of controls and add them to the placeholder
for (int i = 0; i < n; i++)
{
UserControl1 control = (UserControl1)LoadControl("~/UserControl1.ascx");
PlaceHolder1.Controls.Add(control);
}
//save the control count into a viewstate
ViewState["controlCount"] = PlaceHolder1.Controls.Count;
}
protected void AddControl_Click(object sender, EventArgs e)
{
//add an extra control
addControls(1);
}
UPDATE
You can access the values of the TextBoxes by setting a property in the User Control with a getter and a setter.
public string textBox1
{
get
{
return TextBox1.Text;
}
set
{
TextBox1.Text = value;
}
}
protected void Page_Load(object sender, EventArgs e)
{
}
And now you can access them from the Parent by looping all the controls and get the value.
foreach (UserControl1 control in PlaceHolder1.Controls)
{
Label1.Text += control.textBox1 + "<br>";
}
add you code inside
<asp:updatepanel>
tag and add onclick properties to you button. After that you can write your business code in code behind (aspx.cs). This is default ajax in asp.net
Can someone help me?
My js is not working, I hide the divId and when I click te button the divId should appear but nothing happens! I am sending the code below.
What am I doing wrong, could it be in the master page file?
%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="AppTest.aspx.cs" Inherits="AppTest.Screens.UploadFile" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<style>
.hidden{
display: none;
}
</style>
<div class="row">
<h2>File Upload</h2>
<br />
<asp:Panel ID="panelUpload" runat="server">
<p> <asp:Label ID="lblFileUpload" Width="300px" runat="server">Select the file:</asp:Label>
<asp:FileUpload ID="fileUP" runat="server" /></p>
<p>
<asp:Label ID="lblDdl" runat="server">Paciente</asp:Label>
<asp:DropDownList ID="ddl1" runat="server">
</asp:DropDownList>
</p>
<br />
</asp:Panel>
<div id="divId" class="hidden">
</br>
<h2>Cadastro de paciente</h2>
<br />
<p>
<asp:Label ID="lblName" runat="server">Name:</asp:Label>
<asp:TextBox ID="txtName" runat="server" Width="140px"></asp:TextBox>
</p>
<p>
<asp:Label ID="lblLast" runat="server">Last Name:</asp:Label>
<asp:TextBox ID="txtLastName" runat="server" Width="140px"></asp:TextBox>
</p>
<p>
<asp:Label ID="lblAge" runat="server">Age:</asp:Label>
<asp:TextBox ID="txtAge" runat="server" Width="140px"></asp:TextBox>
</p>
<br />
</div>
<p>
<div class="col-md-6">
<asp:Button ID="btnInsert" runat="server" Text="Inserir"/>
</div>
<div class="col-md-6">
<button>New</button>
</div>
</p>
</div>
</asp:Content>
<asp:Content ContentPlaceHolderID="ScriptPlaceHolder1" ID="scripts" runat="server">
<script src="../Scripts/jquery-1.10.2.js" ></script>
<script>
$(document).ready(function () {
$('button').on('click', function () {
$('#divId').show(); // aparece o div
});
});
</script>
</asp:Content>
So When you do Button click your page is loaded again because postback occurs. in your aspx page you have defined your class as hidden in aspx page. So you can prevent this by this way.
$('button').on('click', function () {
$('#divId').show(); // aparece o div
return false;
});
There are multiple way of doing this, I have shown you one way.
EDIT: I found the the answer which fixed my issue at this link
How to make JQuery masked-input plugin working after AsyncPostback in asp.net Ajax Update pannel?
I am using this plugin
http://digitalbush.com/projects/masked-input-plugin/
My reference:
<script src='<%# ResolveUrl("~/Scripts/jquery-maskedInput-1.3.1.js")%>' type="text/javascript"></script>
I have my function in a script
$(function () {
$('<%= txtPhoneNum.ClientID %>').mask("(999) 999-9999");
});
and my textbox control in a pane/updatepanel/contentTemplate
<asp:Panel ID="PanelAddPhoneNumber" runat="server" Style="display: none; min-width: 500px; min-height: 500px;" Title="Add Phone Numbers">
<asp:UpdatePanel ID="UpdatePanelAddPhoneNums" runat="server" UpdateMode="Always">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Label ID="Label21" runat="server" Text="Phone Type:" />
</td>
<td>
<asp:DropDownList runat="server" ID="dropDownListPhoneType" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label28" runat="server" Text="Phone Number:" />
</td>
<td>
<asp:TextBox runat="server" ID="txtPhoneNum" type="text" AutoPostBack="true" Width="300" />
</td>
</tr>
</table>
<div style="text-align: center;">
<br />
<br />
<br />
<asp:Button ID="btnAddPhoneNum" runat="server" OnClientClick="ButtonCancelClient();" OnClick="btnAddPhoneNum_Click" Text="Add" />
<asp:Button ID="btnCancelPhoneNum" runat="server" OnClientClick="ButtonCancelClient();" OnClick="btnCancelPhoneNum_Click" Text="Cancel" />
<asp:Button ID="btnDeletePhoneNum" runat="server" OnClick="btnDeletePhoneNum_Click" Text="Delete" Visible="false" OnClientClick="check();" />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddPhoneNum" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnCancelPhoneNum" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
but when I click on my txtPhone control, there is no mask or anything.. it does nothing.
I tried changing my name in the function from txtPhone.ClientID to just txtPhone, i thought it might be the reference but it isnt since I am using like 5 other references to .js files within the same folder and they are working, and my reference is spelt correct, but I really have no idea why this isnt working.
these are all the .js being used in the project
f
' rel="stylesheet"
type="text/css" runat="server" />
' rel="stylesheet"
type="text/css" runat="server" />
' rel="stylesheet"
type="text/css" runat="server" />
' type="text/javascript">
' type="text/javascript">
' type="text/javascript">
' type="text/javascript">
<script src='<%# ResolveUrl("~/Scripts/jquery-ui-1.10.1.custom.min.js")%>' type="text/javascript"></script>
<script src='<%# ResolveUrl("~/Scripts/jquery-maskedInput-1.3.1.js")%>' type="text/javascript"></script>
Make sure you are loading the CORE jQuery library and UI library:
These libraries must be loaded first: (these are just an example, use whatever version you prefer but you need jQuery loaded)
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
this is not correct:
$(function () {
$('<%= txtPhoneNum.ClientID %>').mask("(999) 999-9999");
});
You need to use and need to prefex the elementId with a #:
$( document ).ready(function() {
$('#<%= txtPhoneNum.ClientID %>').mask("(999) 999-9999");
});
Make sure you are loading the jquery library NOT JUST THE MASKED plugin I don't see you doing that.
Hello everyone iam trying to open a aspx page in a dialog box window from asp button click event but even after specifying the dialog height and dialog width i want i could see dialog window opening in a default size.It seems like the height and width parameters i am passing are ignored.
Here is the Server Side Code:
ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(),Guid.NewGuid().ToString(), "try { showMessageRulesDialog('MessageRuleCenterFrame.htm', true); }catch(e){alert(e);}", true);
JavaScript Code:
function showMessageRulesDialog(dialogName, refresh)
{
try {
var WinSettings = "wcenter:yes;resizable:no;onscroll:off;dialogHeight:700px;dialogWidth:610px;";
var ret = window.showModalDialog("../Dialogs/" + dialogName,"", WinSettings);
if (refresh) {
window.location = window.location;
}
}
catch (e)
{ alert("ShowDialog Error: " + e); }
}
HtmPage Properties
<iframe src="MessageRulesCenter.aspx" style="height:700px;width:610px;" frameborder="0" scrolling="yes"></iframe>
MessageRulesCenter.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="MessageRulesCenter.aspx.cs" Inherits="Dialogs_QuotaCenter" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<%--<base target="_blank" /> --%>
<title>Quota Message Center</title>
<link rel="Stylesheet" href="../Skins/QuotaCenter.css" />
<script language="javascript" type="text/javascript" src="../Scripts/Common.js"></script>
<style type="text/css">
#form1
{
height: 450px;
width: 581px;
}
.formfield * {
vertical-align: middle;
border-width:0px;
}
</style>
</head>
<body style="text-align: left">
<form id="form1" runat="server">
<table style="height: 437px; width: 582px" >
<tr>
<td bgcolor="#91ACFF">
<div class="Section" id="Sec1">
<div>
<br />
<asp:Label ID="Label1" runat="server" Text="Message Rule Name : "
ForeColor="Black" Font-Bold="False"></asp:Label>
<asp:TextBox ID="txtRuleName" runat="server"></asp:TextBox>
<br /><br />
</div>
<div>
<asp:Label ID="Label2" runat="server" ForeColor="Black"
Text="Create Message Rule On :" Font-Bold="False"></asp:Label>
<br />
<br />
</div>
</div>
<div class="Section" id="Sec2">
<div>
<asp:RadioButton ID="rdoIncoming" GroupName="MessageRules" runat="server" ForeColor="Black"
Text="Incoming Message" AutoPostBack="True"
oncheckedchanged="rdoOutgoing_CheckedChanged" />
<asp:RadioButton ID="rdoOutgoing" GroupName="MessageRules" runat="server" ForeColor="Black"
Text="Outgoing Message" oncheckedchanged="rdoOutgoing_CheckedChanged"
AutoPostBack="True" />
<br />
<br />
</div>
<div>
<asp:Label ID="Label3" runat="server" ForeColor="Black" Text="Where"></asp:Label>
<br />
</div>
<div>
<p class="formfield">
<asp:Label ID="lblField1" runat="server" ForeColor="Black" Text="From field Contains :"></asp:Label>
<asp:TextBox ID="txtField3" runat="server" Width="272px" TextMode="MultiLine"></asp:TextBox>
<asp:Button ID="btnAddContact" runat="server" Text="Add Contact" Width="102px" onclick="btnAddContact_Click"/>
<br />
</p>
</div>
<div>
<p class="formfield">
<asp:Label ID="lblFiled2" runat="server" ForeColor="Black" Text="Subject Contains :"></asp:Label>
<asp:TextBox ID="txtField4" runat="server" Width="270px"></asp:TextBox>
<br />
</p>
</div>
</div>
<div class="Section" id ="Sec3">
<div>
<asp:Label ID="Label4" runat="server" ForeColor="Black" Text="Then"></asp:Label>
</div>
<div>
<p class="formfield">
<asp:RadioButton ID="rdoMove" runat="server" GroupName ="ActionType" ForeColor="Black" Text="Move it to the Folder : " />
<asp:DropDownList ID="ddlMove" runat="server" Width="165px" onselectedindexchanged="ddlMove_SelectedIndexChanged" >
</asp:DropDownList>
</p>
</div>
<div>
<p class="formfield">
<asp:RadioButton ID="rdoCopy" runat="server" GroupName ="ActionType" ForeColor="Black" Text="Copy it to the Folder : " />
<asp:DropDownList ID="ddlCopy" runat="server" Width="165px" onselectedindexchanged="ddlMove_SelectedIndexChanged" >
</asp:DropDownList>
</p>
</div>
<div style="text-align:right">
<asp:Label ID="lblError" runat="server"></asp:Label>
<p class="formfield">
<asp:Button ID="btnDone" runat="server" Text="Done" OnClick="btnDone_Click" Width="61px" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Cancel" />
</p>
</div>
</div>
</td>
</tr>
</table>
</form>
I tried your code and it seems it works fine. My guess for why it is not working as expected could be because of the browser version.
Check if you get the required behavior if you remove the Doctype declaration (the top most line in the page).