Update panel / Modal popup Demo

login update panel

<script type=”text/javascript”>
function pageLoad() {
try {
$find(“mdlSignInPopup”).add_shown(onModalPopupShown);
}
catch (err) { }
try {
$find(“mdlNewUserPopup”).add_shown(onModalPopupShown);
}
catch (err) { }

}
function onModalPopupShown() {
try {
$get(“<%=txtUsername.ClientID%>”).focus();
}
catch (err) { }
try {
$get(“<%=txtFirstName.ClientID%>”).focus();
}
catch (err) { }

}
</script>

<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate>
<div id=”divSignIn”>
<div style=”margin-left: 15px;margin-right: 10px;”>
<asp:Label ID=”lblWelcome” runat=”server” Visible=”false” CssClass=”welcomeText”></asp:Label>
<asp:Label ID=”lblPartition” runat=”server” Text=”|” Visible=”false”></asp:Label>
<asp:LinkButton ID=”linkBtnSignIn” runat=”server”>Sign In</asp:LinkButton>
<asp:LinkButton ID=”linkBtnSignOut” runat=”server” OnClick=”linkBtnSignOut_Click”
Visible=”False”>Sign Out</asp:LinkButton>
|
<asp:LinkButton ID=”linkBtnJoin” runat=”server”>Join</asp:LinkButton>

</div>
</div>
<div>
<ajaxToolkit:ModalPopupExtender ID=”mpeLogin” runat=”server” BehaviorID=”mdlSignInPopup”
TargetControlID=”linkBtnSignIn” PopupControlID=”panelLogin” BackgroundCssClass=”modalBackground”
DropShadow=”true” OkControlID=”btnDummy” CancelControlID=”btnCancel” />
<ajaxToolkit:ModalPopupExtender ID=”mpeNewUser” runat=”server” BehaviorID=”mdlNewUserPopup”
TargetControlID=”linkBtnJoin” PopupControlID=”panelNewUser” BackgroundCssClass=”modalBackground”
DropShadow=”true” OkControlID=”btnDummy” CancelControlID=”btnNewUserCancel” />
<asp:Panel ID=”panelLogin” runat=”server” CssClass=”panelNewGroup” Style=”display: none”
Width=”350px” Font-Names=”@MS PGothic”>
<div>
<asp:Label ID=”lblLogin” Font-Size=”Medium” runat=”server”>Login</asp:Label><br />
</div>
<table style=”width: 340px”>
<tr>
<td style=”width: 40%;” align=”right”>
<asp:Label ID=”lblUsername” runat=”server” Text=”User Name(EmailId) :”></asp:Label>
</td>
<td style=”width: 60%;”>
<asp:TextBox ID=”txtUsername” CssClass=”nonwatermarkCssClassHomepage” runat=”server” Width=”75%” ValidationGroup=”SignIn”
MaxLength=”255″></asp:TextBox>
<asp:RequiredFieldValidator ID=”rfvUsername” ControlToValidate=”txtUsername” runat=”server”
Text=”*” ValidationGroup=”SignIn”></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td style=”width: 40%;” align=”right”>
<asp:Label ID=”lblPassword” runat=”server” Text=”Password :”></asp:Label>
</td>
<td style=”width: 60%;”>
<asp:TextBox ID=”txtPassword” CssClass=”nonwatermarkCssClassHomepage” runat=”server” Width=”75%” ValidationGroup=”SignIn”
TextMode=”Password” MaxLength=”255″></asp:TextBox><asp:RequiredFieldValidator ID=”rfvPassword”
ControlToValidate=”txtPassword” runat=”server” Text=”*” ValidationGroup=”SignIn”></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td style=”width: 100%;” align=”center” colspan=”2″>
<asp:Label ID=”lblMessage” runat=”server” Font-Bold=”True” ForeColor=”Red”></asp:Label>
</td>
</tr>
<tr>
<td>
</td>
<td align=”left”>
<asp:LinkButton ID=”lnkBtnForgotPassword” runat=”server” OnClick=”lnkBtnForgotPassword_Click”
Style=”font-size: 0.9em;”>Forgot Password</asp:LinkButton>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td style=”width: 94px”>
</td>
<td style=”width: 179px”>
<asp:Button ID=”btnLogin” runat=”server” Text=”Log In” OnClick=”btnLogin_Click” ValidationGroup=”SignIn” />
<asp:Button ID=”btnCancel” runat=”server” Text=”Cancel” Width=”52px” />
<div>
<asp:LinkButton ID=”LinkButton2″ runat=”server” CssClass=”close” OnClientClick=”$find(‘mdlSignInPopup’).hide(); return false;” /></div>
</td>
</tr>
</table>
<br />
<input id=”btnDummy” runat=”server” type=”button” style=”display: none;” />
</asp:Panel>
<ajaxToolkit:CalendarExtender ID=”CalendarExtender1″ runat=”server” TargetControlID=”txtDOB”
PopupButtonID=”userImg”>
</ajaxToolkit:CalendarExtender>
<asp:Panel ID=”panelNewUser” runat=”server” CssClass=”panelNewGroup” Style=”display: none;”
Width=”539px” Font-Names=”@MS PGothic”>
<div>
<asp:Label ID=”lblNewUser” runat=”server”>Create A New User</asp:Label><br />
</div>
<table style=”width: 452px; height: 277px; padding: 10px; margin-bottom: 10px;” align=”center”>
<tr>
<td style=”width: 30%” align=”right”>
<asp:Label ID=”lblFirstName” runat=”server” Text=”First Name :”></asp:Label>
</td>
<td style=”width: 179px”>
<asp:TextBox ID=”txtFirstName” runat=”server” Width=”80%” ValidationGroup=”NewUser”
CssClass=”nonwatermarkCssClassHomepage”     MaxLength=”255″></asp:TextBox><asp:RequiredFieldValidator ID=”rfvFirstName” ControlToValidate=”txtFirstName”
runat=”server” ValidationGroup=”NewUser” Text=”*” SetFocusOnError=”True”></asp:RequiredFieldValidator>
<ajaxToolkit:TextBoxWatermarkExtender TargetControlID=”txtFirstName” WatermarkText=”Required”
WatermarkCssClass=”watermarkCssClassHomepage” ID=”tbweFirstName” runat=”server”>
</ajaxToolkit:TextBoxWatermarkExtender>
</td>
</tr>
<tr>
<td style=”width: 30%” align=”right”>
<asp:Label ID=”lblLastName” runat=”server” Text=”Last Name :”></asp:Label>
</td>
<td style=”width: 179px”>
<asp:TextBox ID=”txtLastName” CssClass=”nonwatermarkCssClassHomepage” runat=”server” Width=”80%” ValidationGroup=”NewUser”></asp:TextBox><asp:RequiredFieldValidator
ID=”rfvLastName” runat=”server” ValidationGroup=”NewUser” Text=”*” ControlToValidate=”txtLastName”
SetFocusOnError=”True”></asp:RequiredFieldValidator>
<ajaxToolkit:TextBoxWatermarkExtender TargetControlID=”txtLastName” WatermarkText=”Required”
WatermarkCssClass=”watermarkCssClassHomepage” ID=”tbweLastName” runat=”server”>
</ajaxToolkit:TextBoxWatermarkExtender>
</td>
</tr>

<tr>
<td style=”width: 30%” align=”right”>
<asp:Label ID=”lblDOB” runat=”server” Text=”Date Of Birth :”></asp:Label>
</td>
<td style=”width: 179px”>
<asp:TextBox ID=”txtDOB” CssClass=”nonwatermarkCssClassHomepage” runat=”server” Width=”80%” ValidationGroup=”NewUser”></asp:TextBox>
<asp:Image ID=”userImg” runat=”server” ImageUrl=”~/images/Calendar.png” />
<asp:RequiredFieldValidator ID=”rfvDOB” runat=”server” Text=”*” ValidationGroup=”NewUser”
ControlToValidate=”txtDOB” SetFocusOnError=”True”></asp:RequiredFieldValidator>
<asp:CustomValidator ID=”cvDOB” runat=”server” Text=”Invalid Date” OnServerValidate=”cvDOB_ServerValidate”
ValidationGroup=”NewUser” SetFocusOnError=”True”></asp:CustomValidator>
<ajaxToolkit:TextBoxWatermarkExtender TargetControlID=”txtDOB” WatermarkText=”Required”
WatermarkCssClass=”watermarkCssClassHomepage” ID=”tbweDOB” runat=”server”>
</ajaxToolkit:TextBoxWatermarkExtender>
</td>
</tr>
<tr>
<td style=”width: 30%” align=”right”>
<asp:Label ID=”lblUserImg” runat=”server” Text=”User’s Image:”></asp:Label>
</td>
<td style=”width: 179px”>
<asp:FileUpload ID=”fuUserImage” runat=”server” Width=”80%” />
</td>
</tr>
<tr>
<td style=”width: 30%” align=”right”>
<asp:Label ID=”lblEmailID” runat=”server” Text=”Email Id (User Name):”></asp:Label>
</td>
<td style=”width: 179px”>
<asp:TextBox ID=”txtEmail” CssClass=”nonwatermarkCssClassHomepage” runat=”server” Width=”80%” ValidationGroup=”NewUser” MaxLength=”255″></asp:TextBox><asp:RequiredFieldValidator
ID=”rfvEmail” runat=”server” ErrorMessage=”RequiredFieldValidator” Text=”*” ControlToValidate=”txtEmail”
ValidationGroup=”NewUser” SetFocusOnError=”True”></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID=”revEmail” runat=”server” Text=”Invalid Email”
ControlToValidate=”txtEmail” SetFocusOnError=”True” ValidationExpression=”\w+([-+.’]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*”
ValidationGroup=”NewUser”></asp:RegularExpressionValidator>
<ajaxToolkit:TextBoxWatermarkExtender TargetControlID=”txtEmail” WatermarkText=”Required”
WatermarkCssClass=”watermarkCssClassHomepage” ID=”tbweEmail” runat=”server” />
<asp:Label ID=”lblUserNameMessge” runat=”server” ForeColor=”Red”></asp:Label>
</td>
</tr>
<tr>
<td style=”width: 30%” align=”right”>
<asp:Label ID=”lblPass” runat=”server” Text=”Password :”></asp:Label>
</td>
<td style=”width: 179px”>
<asp:TextBox ID=”txtNewUserPassword” CssClass=”nonwatermarkCssClassHomepage” runat=”server” Width=”80%” ValidationGroup=”NewUser”
MaxLength=”255″ TextMode=”Password”></asp:TextBox><asp:RequiredFieldValidator ID=”rfvNewUserPassword”
runat=”server” ErrorMessage=”RequiredFieldValidator” Text=”*” ControlToValidate=”txtNewUserPassword”
ValidationGroup=”NewUser” SetFocusOnError=”True”></asp:RequiredFieldValidator>
<ajaxToolkit:TextBoxWatermarkExtender TargetControlID=”txtNewUserPassword” WatermarkText=”Required”
WatermarkCssClass=”watermarkCssClassHomepage” ID=”tbweNewPassword” runat=”server” />
</td>
</tr>
<tr>
<td style=”width: 30%” align=”right”>
<asp:Label ID=”Label1″ runat=”server” Text=”Confirm Password :”></asp:Label>
</td>
<td style=”width: 179px”>
<asp:TextBox ID=”txtNewUserConfirmPassword” CssClass=”nonwatermarkCssClassHomepage” runat=”server” Width=”80%” ValidationGroup=”NewUser”
MaxLength=”255″ TextMode=”Password”></asp:TextBox><asp:RequiredFieldValidator ID=”RequiredFieldValidator2″
runat=”server” ErrorMessage=”RequiredFieldValidator” Text=”*” ControlToValidate=”txtNewUserConfirmPassword”
ValidationGroup=”NewUser” SetFocusOnError=”True”></asp:RequiredFieldValidator>
<asp:CompareValidator ID=”cvPasswords” runat=”server” Text=”Passwords must match.”
ControlToValidate=”txtNewUserConfirmPassword” ControlToCompare=”txtNewUserPassword”
ValueToCompare=”Text” ValidationGroup=”NewUser”></asp:CompareValidator>
<ajaxToolkit:TextBoxWatermarkExtender TargetControlID=”txtNewUserConfirmPassword”
WatermarkText=”Required” WatermarkCssClass=”watermarkCssClassHomepage” ID=”tbweNewUserConfirmPassword”
runat=”server”>
</ajaxToolkit:TextBoxWatermarkExtender>
</td>
</tr>
<tr>
<td style=”width: 30%” align=”right”>
<asp:Label ID=”lblAboutMe” runat=”server” Text=”About Me :”></asp:Label>
</td>
<td style=”width: 179px”>
<asp:TextBox ID=”txtAboutMe” TextMode=”MultiLine” CssClass=”nonwatermarkCssClassHomepage” runat=”server” Width=”80%” ValidationGroup=”NewUser”></asp:TextBox>
</td>
</tr>
<tr>
<td style=”width: 104px; height: 26px;”>
</td>
<td style=”width: 179px; height: 70px;”>
<asp:Button ID=”btnNewUserSubmit” runat=”server” Text=”Submit” ValidationGroup=”NewUser”
OnClick=”btnNewUserSubmit_Click” />
<asp:Button ID=”btnNewUserCancel” runat=”server” Text=”Cancel” Width=”52px” />
<div>
<asp:LinkButton ID=”LinkButton1″ runat=”server” CssClass=”close” OnClientClick=”$find(‘mdlNewUserPopup’).hide(); return false;” /></div>
</td>
</tr>
</table>
</asp:Panel>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID=”btnNewUserSubmit” />
</Triggers>
</asp:UpdatePanel>

Stylesheet file
body
{
margin: 0px; /*background: url(../images/img01.gif) repeat-x left top;*/
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #444444;
background-color: WhiteSmoke;
}

h1, h2, h3
{
margin: 0; /*font-family: Georgia, “Times New Roman” , Times, serif;*/
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #444444;
}

h1
{
font-size: 2em;
}

h2
{
font-size: 2em;
}

h3
{
font-size: 1.6em;
}

p, ul, ol
{
margin-top: 0;
line-height: 180%;
}

ul, ol
{
}

a
{
text-decoration: none; /*border-bottom: 1px dotted #CC0001;*/
color: #B70000; /*#B70000*/
}

.watermarkCssClass
{
font-style: italic;
color: Gray;
background-color: MistyRose;
}

.watermarkCssClassHomepage
{
background-color: lightgray;
border: 0 none;
color: Gray;
margin-bottom: 5px;
margin-top: 5px;
}

.nonwatermarkCssClassHomepage
{
background-color: lightgray;
border: 0 none;
color: black;
margin-bottom: 5px;
margin-top: 5px;
}

#imgbutton
{
margin-left: 0px;
float: left;
margin-top: 11px;
}

a:hover
{
background: none;
}

#wrapper
{
width: 98%;
margin: 0 auto; /*background: url(../images/img04.jpg) no-repeat left top;*/
background-color: White;
}

#wrapper .btm
{
background: url(../images/img05.gif) no-repeat left bottom;
}

/* Header */

#header
{
width: 100%;
height: 105px;
margin: 0 auto; /*background: url(../images/img02.jpg) repeat-y left top;*/
background-color: White;
}

.header-strip
{
background-color: Black;
height: 12px;
}

#divSignIn
{
background: url(“../images/signIn-bg.png”) no-repeat scroll 0 0 black;
color: White;
float: right;
font-size: x-small;
height: 20px;
padding-top: 4px;
}

#divSignIn a
{
color: White;
}

/* Logo */

.slogan
{
float: right;
margin-top: 35px;
font-size: 11pt;
}

/* Calendar */

#calendar
{
}

#calendar_wrap
{
padding: 20px;
}

#calendar table
{
width: 100%;
}

#calendar tbody td
{
text-align: center;
}

#calendar #next
{
text-align: right;
}

/* Footer */

#footer
{
width: 100%;
margin: 0 auto;
padding: 5px 0 5px;
background: #444444;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}

#footer p
{
margin: 0;
line-height: normal;
font-size: 9px;
text-transform: uppercase;
text-align: center;
}

#footer a
{
color: #FFFFFF;
border-bottom: 1px #FFFFFF dotted;
}

/**********Search Box**************/

.Posts
{
width: 100%;
}

.userImage
{
float: left;
margin-right: 10px; /*border: thin AntiqueWhite solid !important;*/
border: thin MistyRose solid !important;
padding: 3px;
}

.postData
{
height: 150px;
}

.postTextData
{
/*float: left;*/
height: 90%;
overflow: hidden;
}

.imageDiv
{
float: left; /*height: 100%;*/ /*width: 20%;*/
margin-top: 20px;
margin-left: 30px;
}
#postsGroup
{
float: right;
margin-right: 10px;
}

#postsPageNumber
{
float: right;
}

.panelNewGroup
{
background-color: WhiteSmoke;
border-top-color: Orange;
border-left-color: Orange;
border-bottom-color: Black;
border-right-color: Black;
max-height: 500px;
border: medium double;
}

.modalBackground
{
background-color: Black;
filter: alpha(opacity=70);
opacity: 0.7;
}

.modalHeading
{
background-color: Gray;
color: black;
font-family: Verdana;
font-size: 1.3em;
font-weight: bold;
margin: 10px;
padding: 10px;
}

#postsMenuBar
{
float: right;
margin-bottom: 5px;
margin-right: 20px;
margin-top: 10px;
/*width: 70%;*/
}

#postsSortMenuBar
{
float: left; /*margin-left: 21px;     margin-bottom: 0px;*/
/*margin-right: 20px;*/  /* width: 100%;*/
/*margin-right:63px;
margin-top:-41px;*/
}

#divPosts
{
float: left;
margin-top: 20px; /*width: 100%;*/
padding-left: 60px;
}

#divClose
{
float: right;
margin: 10px;
}

.sortSelected
{
border: thin dotted Orange !important;
/*background-color: #526F77; /*AntiqueWhite;*/
}

.sortDeSelected
{
}

#divSortTypes
{
float: left;
margin-top: 10px;
margin-left: 2px;
}

#divSortTypes a
{
color: White;
}

#divSortTypes a:hover
{
background-color: #526F77; /*AntiqueWhite;*/
}

.labelComments
{
font-family: Verdana;
font-size: 1.2em;
font-weight: bold;
}

.commentMessage
{
color: Gray;
display: block;
font-size: 15px;
font-style: italic;
margin-left: 20px;
margin-top: 20px;
padding: 0;
}

.divPopupPost
{
/*border: thin solid Coral;*/
padding: 20px;
width: 90%;
}
.divPopupComments
{
width: 100%;
}

.close
{
display: block;
background: url(/images/close24.png) no-repeat 0px 0px;
right: -5px;
width: 24px;
text-indent: -1000em;
position: absolute;
top: -14px;
height: 23px;
border: 0;
}
.divClose a:hover
{
background: url(/images/close24.png) no-repeat 0px 0px;
}

.welcomeText
{
color: AliceBlue;
font-size: 1.1em;
font-weight: bold;
margin-right: 2px;
}

#divSelectView
{
float: right;
margin-right: 20px;
}

.blur
{
position: fixed !important;
z-index: 10000;
top: 0px;
left: 0px;
background-color: WhiteSmoke; /*#000;*/
filter: alpha(opacity=40);
opacity: 0.40;
}

.progress
{
position: absolute;
height: 75px;
width: 250px;
top: 50%;
left: 50%;
margin-top: -33px;
margin-left: -125px;
color: #ccc;
z-index: 10005;
padding: 10px;
background-color: #000;
filter: alpha(opacity=50);
opacity: 0.50;
}

.updateImage
{
/*background-color: #000;*/
padding: 10px;
font-family: Verdana;
font-size: 1.5em;
font-weight: bold;
color: Red; /*#B70000;*/ /*filter: alpha(opacity=1) !important;     opacity: 1.00 !important;*/
}

.profileClass
{
font-family: Verdana;
border: thin solid BurlyWood !important;
margin-bottom: 10px;
margin-left: 0;
padding-bottom: 30px;
}

///////////

public class ConfigurationParameters
{

public static string ErrorLogPath
{
get
{
return System.Configuration.ConfigurationManager.AppSettings[“ErrorLogPath”];
}
}

/////// try catch

catch (Exception ex)
{
ErrorLogger.LogError(ex, Server.MapPath(ConfigurationParameters.ErrorLogPath));
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s