I have AjaxControlToolkit popup Control in my asp.net project. While Clicking Submit, the popup window closed. but i have wrote code to validate form in C#,. How to stop the popup closeing.
Popup will be close button Clicking, otherwise popup not want to close.
STYLE
<style type="text/css">
.Background
{
background-color: Black;
filter: alpha(opacity=90);
opacity: 0.8;
}
.Popup
{
background-color: #FFFFFF;
border-width: 3px;
border-style: solid;
border-color: black;
padding-top: 10px;
padding-left: 10px;
width: 400px;
height: 350px;
}
.lbl
{
font-size: 16px;
font-style: italic;
font-weight: bold;
}
</style>
ASPX CODE -
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="Button1" runat="server" Text="Fill Form in Popup" />
<!-- ModalPopupExtender -->
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="btnClose" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" Style="display: none">
<table>
<tr>
<td>
<asp:Label runat="server" CssClass="lbl" Text="First Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtName" runat="server" Font-Size="14px"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" Click="btnSubmit_Click" />
<asp:Button ID="btnClose" runat="server" Text="Close" Click="btnClose_Click" /> <br />
<asp:Label ID="lblError" runat="server" />
</td>
</tr>
</table>
<br />
</asp:Panel>
<!-- ModalPopupExtender -->
</form>
C# -
protected void btnSubmit_Click(object sender, EventArgs e)
{
if (txtName.Text != "")
{
lblError.Text = "Error";
}
}
Output -
Dont Go for C# Try JavaScript Validation Like This
<script language="javascript" type="text/javascript">
function ValidateControls() {
if (document.getElementById('<%=txtName.ClientID %>').value == "") {
alert('ERROR');
return false;
}
else {
alert('OK');
return true;
}
}
</script>
//button code
<asp:Button ID="btnSubmit" runat="server" Text="Submit" Click="btnSubmit_Click" OnClientClick="return ValidateControls() />
Related
I've run into a problem while trying to style a content page. I created a content Page that have buttons in it and for some reason after I linked a styleSheet the buttons stopped working.
I would appreciate any help, thank u.
the content page:
<%# Page Title="" Language="C#" MasterPageFile="~/Pages/Site1.Master" AutoEventWireup="true" CodeBehind="MyBooks.aspx.cs" Inherits="WebApplication8.Pages.MyBooks" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="../css/myBooks.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
<asp:Button CssClass="addBook" ID="addBook" runat="server" Text="+Add book"
onclick="addBook_Click" />
<center><asp:DataList ID="DataList1" runat="server" Font-Bold="False"
Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
Font-Underline="False" ForeColor="Gray">
<ItemTemplate>
<table class="style1">
<tr>
<td class="td">
<asp:Image CssClass="binding" ID="Image2" runat="server"
ImageUrl='<%# Bind("binding")%>'/>
<asp:Label ID="bookName" CssClass="bookName" runat="server" Text='<%# Bind("BookName") %>'></asp:Label>
</td>
<td>
<br />
<br />
<div class="buttons">
<asp:Button CssClass="btn1" ID="Publish" runat="server" Text="Publish" /><br />
<asp:Button CssClass="btn2" ID="Edit" runat="server" Text="Edit" /><br />
<asp:Button CssClass="btn2" ID="discared" runat="server" Text="discared" />
</div>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList></center>
</div>
</asp:Content>
the styleSheet (linked in the first content place holder):
addBook is the cssClass of the first butoon in the content page
btn1 is the cssClass of the first button in the DataList.
btn2 is the cssClass of the tow other buttons below it.
buttons is the cssClass of the div who contains the three buttons inside the DataList.
body
{
}
.btn1
{
border-style: none;
width:200px;
height:40px;
border-radius:15px;
background-color:#d4fcea;
color:White;
font-family:Calibri;
margin-bottom:10px;
font-size:20px;
}
.btn2
{
border-style: none;
width:200px;
height:40px;
border-radius:15px;
background-color:#d5e0db;
color:White;
font-family:Calibri;
margin-bottom:10px;
font-size:20px;
}
.buttons
{
position:relative;
left:30%;
z-index:-1;
}
.style1
{
margin-top:20px;
width:800px;
height:250px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 20px 0 rgba(0, 0, 0, 0.15);
border-radius:10px;
margin-left: auto;
margin-bottom: 0;
position:relative;
z-index:-1;
}
.addBook
{
border-style: none;
position:relative;
left:20%;
width:200px;
height:40px;
border-radius:15px;
background-color:#ffcc99;
color:White;
font-family:Calibri;
margin-bottom:10px;
font-size:20px;
right:25%;
z-index:-1;
}
everybody
there's something weird in my webpage as it automatically adds new line after each controller
<asp:Label ID="ll" Class="question_bold" runat="server" Text="label 1" Visible="false"></asp:Label>
<asp:RequiredFieldValidator runat="server" id="lln" controltovalidate="Textbox" errormessage="* Required" Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Display="Dynamic" />
<asp:TextBox ID="Textbox" runat="server" Visible ="false" Width="350px" ></asp:TextBox>
<asp:LinkButton ID="check" CssClass="myclass" visible="false" runat="server" OnClick="check_Click">Check</asp:LinkButton>
and here's CSS code:
a.myclass{ color: #FF0000; text-decoration: none; }
a.myclass:hover { text-decoration: none; }
.question_bold {
font-weight: bold;
border: 1px solid #e6e6e6;
border-radius: 10px;
background-color: #e6e6e6;
height: 25px;
width: 100%;
display: block;
}
i've tried changing display, and even removing the entire CSS from asp but still same
i need textbox, field validator, link button to be on same line....
any ideas ?!
The code below will line up the controls on one line. It uses CSS3 flexbox to line up the controls.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
a.myclass{ color: #FF0000; text-decoration: none; }
a.myclass:hover { text-decoration: none; }
.question_bold {
font-weight: bold;
border: 1px solid #e6e6e6;
border-radius: 10px;
background-color: #e6e6e6;
height: 25px;
width: 100%;
display: block;
}
.flex-container {
display: flex;
width: 650px;
height: 250px;
}
.flex-item {
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="flex-container">
<div class="flex-item"><asp:Label ID="ll" Class="question_bold" runat="server" Text="label 1"></asp:Label></div>
<div class="flex-item"><asp:RequiredFieldValidator runat="server" id="lln" controltovalidate="Textbox" errormessage="* Required" Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Display="Dynamic" /></div>
<div class="flex-item"><asp:TextBox ID="Textbox" runat="server" Width="350px" ></asp:TextBox></div>
<div class="flex-item"><asp:LinkButton ID="check" CssClass="myclass" runat="server" OnClick="check_Click">Check</asp:LinkButton></div>
</div>
</form>
</body>
</html>
The solution above requires the browser supports CSS3 flexbox. Can you set the widths of each control? This can also be done using CSS. The solution below works for me across the different browsers.
<div>
<span><asp:Label ID="ll" Class="question_bold" runat="server" Text="label 1" Width="100px"></asp:Label></span>
<span><asp:RequiredFieldValidator runat="server" id="lln" controltovalidate="Textbox" errormessage="* Required" Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Display="Dynamic" /></span>
<span><asp:TextBox ID="Textbox" runat="server" Width="350px" ></asp:TextBox></span>
<span><asp:LinkButton ID="check" CssClass="myclass" runat="server">Check</asp:LinkButton></span>
</div>
<html>
<head>
<title> </title>
</head>
<body>
<table class="format1" width="740px" cellpadding="2" cellspacing="0">
<tr>
<td>
<asp:Label ID="ll" Class="question_bold" runat="server" Text="label 1" Visible="false"></asp:Label>
<asp:RequiredFieldValidator runat="server" ID="lln" ControlToValidate="Textbox" ErrorMessage="* Required" Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Display="Dynamic" />
</td>
<td>
<asp:TextBox ID="Textbox" runat="server" Visible="false" Width="350px"></asp:TextBox>
</td>
<td>
<asp:LinkButton ID="check" CssClass="myclass" Visible="false" runat="server" OnClick="check_Click">Check</asp:LinkButton>
</td>
</tr>
</table>
</body>
</html>
the code :
<telerik:RadListView ID="RadListView1" Width="100%" AllowPaging="True" runat="server"
Skin="Metro" allowsorting="true" ItemPlaceholderID="ProductsHolder" DataKeyNames="Product_ID" GroupPlaceholderID="CategoryHolder"
GroupItemCount="4" >
<GroupTemplate>
<fieldset style="float: left; width: 330px; margin-right: 15px;">
<legend><%#Eval("CATEGORY_NAME") %></legend>
<table>
<tr>
<td>
<asp:Panel ID="CategoryHolder" runat="server"></asp:Panel>
</td>
</tr>
</table>
</fieldset>
</GroupTemplate>
<LayoutTemplate>
<fieldset style="width: 100%; margin: 0 auto; border: none;" id="FieldSet1">
<telerik:RadDataPager ID="RadDataPager2" runat="server" PagedControlID="RadListView1"
Visible='<%# Container.PageCount != 1%>' Skin="Metro" PageSize="52">
<Fields>
<telerik:RadDataPagerButtonField FieldType="FirstPrev" FirstButtonText="First" PrevButtonText="Prev"
HorizontalPosition="LeftFloat" />
<telerik:RadDataPagerButtonField FieldType="Numeric" />
<telerik:RadDataPagerButtonField FieldType="NextLast" NextButtonText="Next" LastButtonText="Last"
HorizontalPosition="RightFloat" />
</Fields>
</telerik:RadDataPager>
<br />
<asp:Panel ID="ProductsHolder" runat="server">
</asp:Panel>
<table cellpadding="0" cellspacing="4" width="100%;" style="clear: both;">
<tr>
<td>
<telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
Visible='<%# Container.PageCount != 1%>' Skin="Metro" PageSize="52">
<Fields>
<telerik:RadDataPagerButtonField FieldType="FirstPrev" FirstButtonText="First" PrevButtonText="Prev"
HorizontalPosition="LeftFloat" />
<telerik:RadDataPagerButtonField FieldType="Numeric" HorizontalPosition="NoFloat" />
<telerik:RadDataPagerButtonField FieldType="NextLast" NextButtonText="Next" LastButtonText="Last"
HorizontalPosition="RightFloat" />
</Fields>
</telerik:RadDataPager>
</td>
</tr>
</table>
</fieldset>
</LayoutTemplate>
<EmptyDataTemplate>
<div style="width: 100%; text-align: center;">
<b>No Results Found</b></div>
</EmptyDataTemplate>
<ItemTemplate>
<div style="float: left; padding-bottom: 20px; padding-left: 10px; padding-right: 10px;">
<div class="CardItem" style="margin: auto !important;">
<div class="cardDisplay">
<img src="../App_Themes/VivaTheme/images/loading_big.gif" alt="" onerror="javascript:this.onerror = null;this.src='../images/Orders/VivaNotAvailable.jpg';"
onload="RetrievePicture(this,'<%# Eval("PRODUCT_ID")%>');" class="lof-image"
width="180" height="117" style="margin-bottom: 5px;" />
</div>
<div class="points">
<%# DataBinder.Eval(Container.DataItem, "SALES_PRICE", "{0:###,###,###,##0.00}") + " " + Eval("CURRENCY_ABREVIATION")%>
</div>
<hr class="fleft" style="border: 1px solid #D9E1E3; width: 195px;" />
<div class="CardItemDesc">
<table width="100%" style="display: inline-block;">
<tr>
<td>
<%# Eval("PRODUCT_NAME")%>
</td>
</tr>
<tr>
<td>
<telerik:RadRating ID="RadRating1" Skin="Metro" runat="server" Enabled="false" Value='<%# Double.Parse(Eval("SALES_PRICE").ToString()) % 3 +2 %>'>
</telerik:RadRating>
</td>
</tr>
<tr>
<td>
<img src="../images/Orders/AddToCart.png" alt="Add to Cart" height="23" onclick="AddToCart(this, '<%# Eval("PRODUCT_NAME")%>', '<%# Eval("SALES_PRICE") %>', '<%# Eval("CURRENCY_ABREVIATION") %>', '<%# (Eval("UNIT_SYMBOL").ToString()=="K" ? "Kg" : (Eval("UNIT_SYMBOL").ToString() == "U" ? "Pc" : Eval("UNIT_SYMBOL"))) %>', '<%# Eval("PRODUCT_ID") %>', '<%# Telepaty.SecurityHelper.StringEncryptorDecryptor.Instance.EncryptString(Eval("PRODUCT_ID").ToString()) %>');return false;"
class="Clickable fleft" />
<% if (LoggedClient.Current != null)
{ %>
<img src="../images/Orders/BuyNow.png" alt="Buy Now" style="padding-left: 30px;"
height="23" onclick="javascript:window.location='Checkout.aspx?pID=<%# Telepaty.SecurityHelper.StringEncryptorDecryptor.Instance.EncryptString(Eval("PRODUCT_ID").ToString()) %>';return false;"
class="Clickable fright" />
<% }
else
{ %>
<img src="../images/Orders/BuyNow.png" alt="Buy Now" style="padding-left: 30px;"
height="23" onclick="javascript:window.location='/Login.aspx?ref=anonym&pID=<%# Telepaty.SecurityHelper.StringEncryptorDecryptor.Instance.EncryptString(Eval("PRODUCT_ID").ToString()) %>';return false;"
class="Clickable fright" />
<% }; %>
</td>
</tr>
</table>
</div>
</div>
</div>
</ItemTemplate>
</telerik:RadListView>
server side :
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
RadListView1.DataSource = OrderDataHelper.GetProductByCategoryforGrouping();
RadListView1.DataBind();
}
}
The RadListView control does not have an item placeholder specified
anyone know why this problem occured ?
You set ItemPlaceholderID="ProductsHolder" in your ListView but there is no PlaceHolder with given ID in your LayoutTemplate .
Just add this code to your LayoutTemplate
<LayoutTemplate>
<asp:PlaceHolder ID="ProductsHolder" runat="server"></asp:PlaceHolder>
</LayoutTemplate>
The error you are getting does means that you should declare a control in your LayoutTemplate which to determine where the items (ItemTemplate, EditItemTemplate etc.) should be instantiated.
Please refer to this live demo for a sample of how to construct RadListView programmatically.
i have an ajax modalpopupextender that opens a popup in the event that an error occurs.
This works fine in all browsers i have tested so far. But not in internet explorer 7 (it does in ie 8 and 9)
basically the height of the panel isnt being applied. on screen its about 20 pixels high. I have no idea why and have used various samples to no avail for hours now. The width os working fine.
Any help appreciated
Thanks
Damo
HTML
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="myapp.Logon" %>
<!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">
<link href="assets/css/Logon.css" rel="stylesheet" type="text/css" />
<link href="assets/css/modalBackground.css" rel="stylesheet" type="text/css" />
<title>myapp Login</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtenderError" runat="server"
TargetControlID="PanelLogonDetails">
</ajaxToolkit:RoundedCornersExtender>
<asp:Panel ID="PanelLogonDetails" runat="server" Width="350" Height="300" BorderColor="White" BackColor="White">
<div id="container">
<asp:Label ID="LabelLogo" runat="server" Text="Logo"></asp:Label>
<br />
<div id="inputcontainer">
<asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
<br />
<asp:TextBox CssClass="Textbox" ID="txtUserName" runat="server" Text="Administrator"
ToolTip="Username" Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorUsername" runat="server" ErrorMessage="You must enter a Username"
ControlToValidate="txtUserName" ForeColor="White"></asp:RequiredFieldValidator>
<br />
<asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
<br />
<!-- TextMode set to singleline for testing - set to Password for production-->
<asp:TextBox CssClass="Textbox" ID="txtPassword" runat="server" Text="!password£$nmj5%$-12"
ToolTip="Password" TextMode="SingleLine" Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorPassword" runat="server" ErrorMessage="You must enter a password"
ControlToValidate="txtPassword" ForeColor="White"></asp:RequiredFieldValidator>
<br />
<br />
<asp:Button CssClass="Button" ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />
<br />
<br />
</div>
</div>
</asp:Panel>
<!-- Error Modal Form -->
<asp:HiddenField ID="hideForModal" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="ErrorModal" BehaviorID="modalPopupExtenderError"
TargetControlID="hideForModal" PopupDragHandleControlID="popUpPaneError" PopupControlID="popUpPaneError"
OkControlID="btnOk" BackgroundCssClass="modalBackground" DropShadow="False" Drag="true">
</ajaxToolkit:ModalPopupExtender>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="popUpPaneError">
</ajaxToolkit:RoundedCornersExtender>
<asp:Panel ID="popUpPaneError" runat="server" CssClass="confirm-dialog" Width="485" Height="285" BackColor="White">
<div id="ErrorInputContainer">
<div>
<b>Error Code:</b></div>
<asp:Label ID="lblErrorCode" runat="server" Text="Error Code"></asp:Label>
<div>
<b>Error Message:</b></div>
<asp:Label ID="lblErrorMessage" runat="server" Text="Error Message"></asp:Label>
<div>
<b>Ex message:</b></div>
<asp:Label ID="lblExMessage" runat="server" Text="Ex Message"></asp:Label>
<br />
<asp:Button ID="btnOk" runat="server" Text="Ok" CssClass="Button" />
<br />
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('modalPopupExtenderError').hide(); return false;" />
</div>
</asp:Panel>
<!-- End Error Modal Form -->
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Logon.css
#PanelLogonDetails
{
background-color:#FFFFFF;
width: 350px;
height: 300px;
position:absolute;
left: 40%;
top: 40%;
margin-left: -50px;
margin-top: -50px;
}
/* main div */
#container
{
padding-left:50px;
padding-top:20px;
}
#LabelLogo
{
font-family: Arial, Sans-Serif;
font-size: 20px;
font-weight: bold;
}
/* end main div */
/* inputcontainer (within the main div above) */
#inputcontainer {
position:absolute;
height:100px;
width:230px;
left: 35%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
/* End inputcntainer */
html,body {
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
line-height:1.5em;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003366', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#036), to(#FFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #036, #FFF); /* for firefox 3.6+ */
height: 100%;
}
/* Error Modal */
#ErrorInputContainer
{
background-color:White;
background:white;
position:absolute;
height:260px;
width:460px;
top:20px;
left:20px;
color:Black;
}
#popUpPaneError
{
height:260px;
width:460px;
}
/* End Error Modal */
/* TextBox */
.Textbox
{
width:auto;
padding:2px;
color:Black;
text-align:left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
font-size: 10pt;
font-family: Arial;
}
.Textbox:focus
{
background-color:#FFCC33;
}
/* End TextBox */
/* Button */
.Button
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
text-align:left;
padding-left:22px;
background-repeat: no-repeat;
background-image: url(/assets/img/action.gif);
background-position:3px 50%
}
.Button:hover
{
background: #FFCC33;
background-repeat: no-repeat;
background-image: url(/assets/img/action.gif);
background-position:3px 50%
}
/* End Button */
modalBackground.css
.modalBackground
{
background-color:#696969;
filter: alpha(opacity=60);
opacity: 0.6;
}
.close {
DISPLAY: block;BACKGROUND: url(img/close.png) no-repeat 0px 0px;
LEFT: -5px;WIDTH: 26px;TEXT-INDENT: -1000em;POSITION: absolute;
TOP: -7px;HEIGHT: 26px;
}
.modalBackground {
background-color:Gray;filter:alpha(opacity=70);opacity:0.7;
}
http://www.mindfiresolutions.com/Workaround-for-Modal-Popup-with-RoundedCornerExtender-issue-833.php
this is the solution. Bug with the ajax controltoolkit....
thanks
Damo
i have a page wherein i need to lock the screen when user clicks on the send email button, but everything is happening except i am unable to see my lock screen page. i have used the update progress for this purpose.. m posting part of the code here
.aspx part
<asp:UpdatePanel ID="SendMailUpdatePanel" runat="server">
<ContentTemplate>
<div style="float: right;">
<asp:Button ID="btnSend" runat="server" Text="Send" ToolTip="Send "
Visible="false" Font-Bold="True" OnClick="btnSendResume_Click" />
<asp:Button ID="btnDown" runat="server" Text="Download IDs" ToolTip="follow-up"
Visible="false" Font-Bold="True" OnClick="btnDownloadEmailIDs_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<table>
<td style="width: auto; vertical-align: top;">
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="SendMailUpdatePanel">
<ProgressTemplate>
<div id="blur" style="width: 100%; background-color: black; moz-opacity: 0.5; khtml-opacity: .5;
opacity: .5; filter: alpha(opacity=50); z-index: 120; height: 100%; position: absolute;
top: 0; left: 0;">
<div id="progress" style="z-index: 200; background-color: White; position: absolute; top: 0pt;
left: 0pt; border: solid 1px black; padding: 5px 5px 5px 5px; text-align: center;">
<b>Mail in progress.Please Wait...</b>
<br />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</table>
.cs part
protected void btnSendResume_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
}
rest of the part i have not mentioned here...any help
Your HTML Table is incorrectly formed. You have no <tr> elements, but the real problem probably lies with your style attributes, please see my updated code below.
You can find a good example of how to accomplish what you are trying to do here: http://blogs.visoftinc.com/2008/03/13/Modal-UpdateProgress-for-UpdatePanel-Revisited/
Try adjusting your code to the following:
<asp:UpdatePanel ID="SendMailUpdatePanel" runat="server">
<ContentTemplate>
<div style="float: right;">
<asp:Button ID="btnSend" runat="server" Text="Send" ToolTip="Send "
Visible="false" Font-Bold="True" OnClick="btnSendResume_Click" />
<asp:Button ID="btnDown" runat="server" Text="Download IDs" ToolTip="follow-up"
Visible="false" Font-Bold="True" OnClick="btnDownloadEmailIDs_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="SendMailUpdatePanel">
<ProgressTemplate>
<div id="blur" style="position:fixed; top:0px; bottom:0px; left:0px; right:0px; overflow:hidden; padding:0; margin:0; background-color:black; filter:alpha(opacity=50); opacity:0.5; z-index:1000;" />
<div id="progress" style="position:fixed; top:30%; left:43%; width:14%; z-index:1001; background-color:white; border:solid 1px black; padding:5px; text-align:center;">
<b>Mail in progress.Please Wait...</b>
<br />
<br />
</div>
</ProgressTemplate>
</asp:UpdateProgress>