|
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<%@
Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha"
%>
<!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">
<title>LIGHTBOX EXAMPLE</title>
<%-- class
for LightBox--%>
<style
type="text/css">
.black_overlay
{
display: none;
position:
absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:
black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .60;
filter:
alpha(opacity=80);
}
.white_content
{
display: none;
position:
absolute;
top: 15%;
left: 35%;
width: 30%;
padding: 0px;
border: 0px
solid #a6c25c;
background-color:
white;
z-index: 1002;
overflow: auto;
}
.headertext
{
font-family:
Times New Roman,
Helvetica, sans-serif;
font-size: 14px;
color: teal;
font-weight: bold;
}
.textfield
{
border: 1px
solid #a6c25c;
width: 135px;
}
.button2
{
background-color:
Teal;
color: White;
font-size: 11px;
font-weight: bold;
border: 1px
solid #7f9db9;
width: 68px;
}
</style>
</head>
<body>
<form
id="form1"
runat="server">
<%-- function for clear lightbox textbox values and
call lightbox--%>
<script
type="text/javascript"
language="javascript">
function ClearTextboxes()
{
document.getElementById('txtlbName').value
= '';
document.getElementById('txtlbAge').value
= '';
document.getElementById('txtlbSalary').value
= '';
document.getElementById('txtlbCountry').value
= '';
document.getElementById('txtlbCity').value
= '';
document.getElementById('light').style.display
= 'none';
document.getElementById('fade').style.display
= 'none';
}
</script>
<div
id="light"
class="white_content">
<div
align="center"
class=" headertext">
</div>
<div>
<table
width="100%" style=" background-color: Black; z-index: 1001;
-moz-opacity:
0.8; opacity:
.60; filter:
alpha(opacity=80); " height="27">
<tr>
<td
style="width: 50%"></td>
<td
style="float: right;
width:50%;
margin-right:-2px"
height="6px">
<a
href="javascript:void(0)"
onclick="ClearTextboxes()">
<img
src="images/close.png"
style="border: 0px"
width="32px"
align="right"
height="32px"
/></a>
</td>
</tr>
</table>
</div>
<%--
table with asp.net controls in lightbox--%>
<table
cellpadding="0"
cellspacing="0"
border="0"
style="background-color: teal"
width="100%"
>
<tr>
<td
style="padding: 4px;">
<table
align="center"
border="0"
cellpadding="0"
cellspacing="0"
style="background-color: #fff"
width="100%">
<tr>
<td
align="center"
colspan="0"
class="headertext"
style="border-bottom: 1px solid
teal;">
<br
/>
User Information
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td align="center">
<table>
<tr>
<td
align="right">
Name:
</td>
<td>
<%--
script for Name validation--%>
<script
language ="javascript"
type =
"text/javascript">
function Name_Validation(e) {
if ((event.keyCode > 97) &&
(event.keyCode <= 123)) {
return true;
}
else if
((event.keyCode >= 65) && (event.keyCode <= 97)) {
return true;
}
else if
(event.keyCode == 32) {
return true;
}
else
{
alert('Please enter alphabate only');
return false;
}
}
</script>
<%--script for trim space--%>
<script
type="text/javascript">
function
trim(stringToTrim) {
return stringToTrim.replace(/^\s+|\s+$/g,
"");
}
function RemoveSpace(id) {
if (id != null)
id.value = trim(id.value);
}
</script>
<asp:TextBox
ID="txtlbName"
runat="server"
MaxLength="50"
OnKeyPress ="return
Name_Validation(this);" onblur="RemoveSpace(this)"
CssClass="textfield"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator
ID="rfvtxtlbName"
runat="server"
Text="*"
ToolTip="Enter name"
ControlToValidate="txtlbName"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td
height="10px">
</td>
</tr>
<tr>
<td
align="right">
Age:
</td>
<td>
<%--script for age validation--%>
<script
language ="javascript"
type =
"text/javascript">
function Age_Validation(e) {
if ((event.keyCode >= 48) &&
(event.keyCode <= 57)) {
return true;
}
else {
alert('Please enter numeric value');
return false;
}
}
</script>
<asp:TextBox
ID="txtlbAge"
runat="server"
MaxLength="2"
CssClass="textfield"
OnKeyPress ="return
Age_Validation(this);"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator
ID="rfvtxtlbAge"
runat="server"
Text="*"
ToolTip="Enter age"
ControlToValidate="txtlbAge"></asp:RequiredFieldValidator>
<asp:RangeValidator
ID="rrvtxtlbAge"
runat="server"
Text="*"
MaximumValue="99"
MinimumValue="15"
Display="Dynamic"
ControlToValidate="txtlbAge"
Type="Integer"
ToolTip="Min age 15 &
Max age 99"></asp:RangeValidator>
<asp:Label
ID="lblErrorMsg"
runat="server"
Text="Min age 15 & Max
age 99" Visible="false"></asp:Label>
</td>
</tr>
<tr>
<td
height="10px">
</td>
</tr>
<tr>
<td
align="right">
Salary:
</td>
<td>
<%--script for salary validator or numeric values
validator--%>
<script
language ="javascript"
type =
"text/javascript">
function Salary_Validation(e) {
if ((event.keyCode >= 48) &&
(event.keyCode <= 57)) {
return true;
}
else {
alert('Please enter numeric value');
return false;
}
}
</script>
<%-- Convert into Money Formate--%>
<script
type="text/javascript">
function formatCurrency(usFormat) {
usFormat = usFormat.toString().replace(/\$|\,/g,
'');
if (isNaN(usFormat)) {
usFormat = "0";
}
sign = (usFormat == (usFormat = Math.abs(usFormat)));
usFormat = Math.floor(usFormat * 100 + 0.50000000001);
cents = usFormat % 100;
usFormat = Math.floor(usFormat / 100).toString();
if (cents < 10) {
cents =
"0" + cents;
}
for (var
i = 0; i < Math.floor((usFormat.length - (1 + i)) / 3); i++) {
usFormat = usFormat.substring(0, usFormat.length - (4 * i + 3)) +
',' + usFormat.substring(usFormat.length - (4
* i + 3));
}
return (((sign) ?
'' : '-') +
usFormat + '.' + cents);
}
</script>
<asp:TextBox
ID="txtlbSalary"
runat="server"
MaxLength="10"
CssClass="textfield"
OnKeyPress ="return
Salary_Validation(this);" onblur="this.value=formatCurrency(this.value);"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator
ID="rfvtxtlbSalary"
runat="server"
Text="*"
ToolTip="Enter salary"
ControlToValidate="txtlbSalary"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td
height="10px">
</td>
</tr>
<tr>
<td
align="right">
Country:
</td>
<td>
<%--script for alphabate enter in textbox--%>
<script
language ="javascript"
type =
"text/javascript">
function Country_Validation(e) {
if ((event.keyCode > 97) &&
(event.keyCode <= 123)) {
return true;
}
else if
((event.keyCode >= 65) && (event.keyCode <= 97)) {
return true;
}
else {
alert('Please enter Alphabate only');
return false;
}
}
</script>
<asp:TextBox
ID="txtlbCountry"
runat="server"
MaxLength="20"
CssClass="textfield"
OnKeyPress ="return
Country_Validation(this);"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator
ID="rfvtxtlbCountry"
runat="server"
Text="*"
ToolTip="Enter country"
ControlToValidate="txtlbCountry"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td height="10px">
</td>
</tr>
<tr>
<td
align="right">
City:
</td>
<td>
<%--script for alphabate enter in textbox--%>
<script
language ="javascript"
type =
"text/javascript">
function City_Validation(e) {
if ((event.keyCode > 97) &&
(event.keyCode <= 123)) {
return
true;
}
else if
((event.keyCode >= 65) && (event.keyCode <= 97)) {
return true;
}
else {
alert('Please enter Alphabate only');
return false;
}
}
</script>
<asp:TextBox
ID="txtlbCity"
runat="server"
MaxLength="20"
CssClass="textfield"
OnKeyPress ="return
City_Validation(this);"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator
ID="rfvtxtlbCity"
runat="server"
Text="*"
ToolTip="Enter city"
ControlToValidate="txtlbCity"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td
height="10px"></td>
</tr>
<tr>
<%--reCaptcha control--%>
<table>
<tr>
<td
align="center">
<recaptcha:RecaptchaControl
ID="recaptcha"
runat="server"
PublicKey="6LfqmdQSAAAAAHcyeGDCoLodLISt4d3LyC5ghIOS"
PrivateKey="6LfqmdQSAAAAAFkZJAH9zivztO5VSwwJp_9XxcAt"/>
<asp:Label
ID="lblResult"
runat="server"
Text="Label"
Visible="false"></asp:Label>
</td>
</tr>
</table>
</tr>
<tr>
<td
height="10px"
align="center"><asp:Button ID="btnlbAdd" runat="server" Text="Add" OnClick="AddNewRecord" class="button2" /></td>
</tr>
<tr>
<td
align="center">
</td>
</tr>
<tr>
<td
height="10px"></td>
</tr>
<tr>
<td
align="center"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td
height="10px">
</td>
</tr>
</table>
</td>
</tr>
</table>
<asp:Label
ID="txtlbl"
runat="server"></asp:Label></div>
<div
id="fade"
class="black_overlay">
</div>
<%--GridView with asp.net control for bind record from
database--%>
<div>
<asp:GridView
ID="GridView1"
runat="server"
AutoGenerateColumns="False"
OnRowDeleting="RowDeleting"
CellPadding="4"
EnableModelValidation="True"
GridLines="None"
Width="1297px"
ForeColor="#333333">
<RowStyle
HorizontalAlign="Center"
/>
<AlternatingRowStyle
BackColor="White"
/>
<EditRowStyle
BackColor="#7C6F57"
/>
<FooterStyle
BackColor="#1C5E55"
ForeColor="White"
Font-Bold="True"
/>
<HeaderStyle
BackColor="#1C5E55"
Font-Bold="True"
ForeColor="White"
/>
<PagerStyle
BackColor="#666666"
ForeColor="White"
HorizontalAlign="Center"
/>
<RowStyle
BackColor="#E3EAEB"
/>
<SelectedRowStyle
BackColor="#C5BBAF"
Font-Bold="True"
ForeColor="#333333"
/>
<Columns>
<asp:TemplateField>
<HeaderTemplate>
Id</HeaderTemplate>
<ItemTemplate>
<asp:Label
ID="lblId"
runat="server"
Text='<%#Bind("id")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Name</HeaderTemplate>
<ItemTemplate>
<asp:Label
ID="lblName"
runat="server"
Text='<%#Bind("name")
%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Age</HeaderTemplate>
<ItemTemplate>
<asp:Label
ID="lblAge"
runat="server"
Text='<%#Bind("age")
%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Salary</HeaderTemplate>
<ItemTemplate>
<asp:Label
ID="lblSalary"
runat="server"
Text='<%#Bind("salary")
%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Country</HeaderTemplate>
<ItemTemplate>
<asp:Label
ID="lblCountry"
runat="server"
Text='<%#Bind("country")
%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
City</HeaderTemplate>
<ItemTemplate>
<asp:Label
ID="lblCity"
runat="server"
Text='<%#Bind("city")
%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Operation</HeaderTemplate>
<ItemTemplate>
<asp:Button
ID="btnDelete"
runat="server"
CommandName="Delete"
Text="Delete"
CausesValidation="true"
OnClientClick="return
confirm('Are you sure?')" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
No record available
</EmptyDataTemplate>
</asp:GridView>
</br>
<%--
hyperlink for display lightbox--%>
<a
href="javascript:void(0)"
onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
Add New Record</a></div>
</form>
</body>
</html>
|