Definition:
Operations...
* indicates are required field.
- Insert
- Update
- Active / In Active
- Delete On confirmation
- List all With (Search,Paging,sorting)
- Insert
- Update
- Active / In Active
- Delete On confirmation
- List all With (Search,Paging,sorting)
-----------------------------
=> Table Employee Master
-----------------------------
- EmplId
*- FirstName
*- LastName
*- UserName
*- Password
- ConfirmPassword (this is not database field.. use it to compare with Password)
*- Email
*- Phone
*- birthDate
*- Gender
*- Resume (only .doc and .pdf file format allow)
- IsActive
- Remarks
=> Table Employee Master
-----------------------------
- EmplId
*- FirstName
*- LastName
*- UserName
*- Password
- ConfirmPassword (this is not database field.. use it to compare with Password)
*- Phone
*- birthDate
*- Gender
*- Resume (only .doc and .pdf file format allow)
- IsActive
- Remarks
Output:
![]() |
| Employee Management System |
Coding Part.
Default.aspx
<HTML>
<HEAD>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript" ></script>
<script src="Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<!-- This CSS is use for JQUERY Date Picker -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function () {
displayData(0, 9);
$('#btnUpdate').hide();
$('#btnCancle').hide();
});
$(function () {
$("#datepicker").datepicker();
});
function setPageNo(end, rowCount) {
var noOfPages = Math.ceil(rowCount / 10);
var currentPage = 0;
var endIndex = 0;
for (var i = 0; i < noOfPages; i++) {
if (i == 0) {
endIndex += 9;
currentPage += 1;
}
else {
endIndex += 10;
currentPage += 1;
}
if (endIndex == end) {
break;
}
}
document.getElementById('totalPage').innerHTML = noOfPages;
document.getElementById('curPage').innerHTML = currentPage;
}
function displayData(strt, end) {
$.ajax({
type: "POST",
url: "DatabaseService.asmx/DisplayRecords",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (message) {
$('#TableData').empty();
$('#RecordTemplate').tmpl(message.d).appendTo('#TableData');
pagging(strt, end);
},
error: function () {
alert("ERROR in SELECT...");
}
});
}
function searchedRecords() {
var curText = $('#txtSearch').val();
if (!(curText == "")) {
$.ajax({
type: "POST",
url: "DatabaseService.asmx/searchRecords",
data: "{'Text':'" + curText + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (message) {
$('#TableData').empty();
$('#RecordTemplate').tmpl(message.d).appendTo('#TableData');
$('#btnFirst').hide();
$('#btnLast').hide();
$('#btnPrev').hide();
$('#btnNext').hide();
},
error: function () {
alert("Error in Search...");
}
});
}
else {
$('#btnFirst').show();
$('#btnLast').show();
$('#btnPrev').show();
$('#btnNext').show();
displayData(0, 9);
}
}
function insertData() {
var Fname = $('#txtFname').val();
var Lname = $('#txtLname').val();
var Uname = $('#txtUserName').val();
var Pwd = $('#txtPwd').val();
var Email = $('#txtEmail').val();
var Phone = $('#txtPhone').val();
var Bdate = $('#datepicker').val();
var Remark = $('#txtRemarks').val();
var radios = document.getElementsByName('radioBtnGender');
var Gender = "";
var file = document.getElementById("<%= resumeUploader.ClientID %>");
var Resume = file.value;
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
Gender = radios[i].value;
break;
}
}
var dotIndex = Resume.lastIndexOf(".");
//alert(dotIndex);
var fileExt = Resume.substring(dotIndex + 1);
//alert(fileExt);
if (Fname == "" || Lname == "" || Uname == "" || Pwd == "" || Email == "" || Phone == "" || Bdate == "" || Remark == "" || Gender == "" || Resume == "") {
alert("ERROR ::: Please Fill up All The Fields...");
}
else {
if (fileExt == "doc" || fileExt == "pdf" || fileExt == "docx") {
$.ajax({
type: "POST",
url: "DatabaseService.asmx/InsertRecord",
data: "{'Fname':'" + Fname + "','Lname':'" + Lname + "','Uname':'" + Uname + "','Pwd':'" + Pwd + "','Email':'" + Email + "','Phone':'" + Phone + "','BDate':'" + Bdate + "','Gender':'" + Gender + "','Resume':'" + Resume + "','Remarks':'" + Remark + "'}",
contentType: "application/json",
async: false,
success: function () {
var curText = $('#txtSearch').val();
clear();
if (!(curText == "")) {
searchedRecords();
}
else {
var strtIndex = $('#hdnStrtIndex').val();
var endIndex = $('#hdnEndIndex').val();
displayData(strtIndex, endIndex);
}
alert("Record Inserted");
},
error: function () {
alert("ERROR!!");
}
});
}
else {
alert("ERROR ::: Only .doc,.docx and .pdf Files Are Allowed...");
}
}
}
function deleteData(node) {
var tbl = document.getElementById("TableData");
var Id = tbl.rows[node.rowIndex -1].getElementsByTagName("input")[0].value;
//alert(Id);
var ans = confirm("Are You Sure You Want To Delete Record?");
if (ans == true) {
$.ajax({
type: "POST",
url: "DatabaseService.asmx/deleteRecord",
data: "{'Id':'" + Id + "'}",
contentType: "application/json",
async: false,
success: function (deletedId) {
var curText = $('#txtSearch').val();
if (!(curText == "")) {
searchedRecords();
}
else {
var strtIndex = $('#hdnStrtIndex').val();
var endIndex = $('#hdnEndIndex').val();
displayData(strtIndex, endIndex);
}
if ($('#txtId').val() == deletedId.d) {
cancleUpdate();
}
},
error: function () {
alert("Error In Delete...");
}
});
}
}
function showDataForEdit(node) {
$('#btnUpdate').show();
$('#btnCancle').show();
$('#btnInsert').hide();
var tbl = document.getElementById("TableData");
var Id = tbl.rows[node.rowIndex - 1].getElementsByTagName("input")[0].value;
//alert(Id);
var Name = tbl.rows[node.rowIndex - 1].getElementsByTagName("td")[1].innerHTML;
var Email = tbl.rows[node.rowIndex - 1].getElementsByTagName("td")[2].innerHTML;
var Phone = tbl.rows[node.rowIndex - 1].getElementsByTagName("td")[3].innerHTML;
var Bdate = tbl.rows[node.rowIndex - 1].getElementsByTagName("td")[4].innerHTML;
var Gender = tbl.rows[node.rowIndex - 1].getElementsByTagName("td")[5].innerHTML;
var Remark = tbl.rows[node.rowIndex - 1].getElementsByTagName("td")[6].innerHTML;
//alert(Name+Email+Phone+Bdate+Gender+Remark);
var spaceIndex = Name.indexOf(" ");
var Lname = Name.substring(spaceIndex+1);
var Fname = Name.substring(0, spaceIndex);
//alert(Fname+Lname);
$('input[id="txtUserName"]').attr('disabled', true);
$('input[id="txtPwd"]').attr('disabled', true);
$('input[id="txtConfirmPwd"]').attr('disabled', true);
$('input[id="datepicker"]').attr('disabled', true);
$('input[name="radioBtnGender"]').attr('disabled', true);
var radios = document.getElementsByName('radioBtnGender');
if (Gender == "Male") {
radios[0].checked = true;
}
else {
radios[1].checked = true;
}
$('#txtId').val(Id);
$('#txtFname').val(Fname);
$('#txtLname').val(Lname);
$('#txtEmail').val(Email);
$('#txtPhone').val(Phone);
$('#txtRemarks').val(Remark);
}
function updateData() {
var Id = $('#txtId').val();
var Fname = $('#txtFname').val();
var Lname = $('#txtLname').val();
var Email = $('#txtEmail').val();
var Phone = $('#txtPhone').val();
var Remark = $('#txtRemarks').val();
var file = document.getElementById("<%= resumeUploader.ClientID %>");
var Resume = file.value;
$.ajax({
type: "POST",
url: "DatabaseService.asmx/updateRecord",
data: "{'Id':'" + Id + "','Fname':'" + Fname + "','Lname':'" + Lname + "','Email':'" + Email + "','Phone':'" + Phone + "','Resume':'" + Resume + "','Remark':'" + Remark + "'}",
dataType: "json",
contentType: "application/json",
async: false,
success: function () {
var curText = $('#txtSearch').val();
if (!(curText == "")) {
searchedRecords();
}
else {
var strtIndex = $('#hdnStrtIndex').val();
var endIndex = $('#hdnEndIndex').val();
displayData(strtIndex, endIndex);
}
cancleUpdate();
},
error: function () {
alert("Error in Update.");
}
});
}
function changeStatus(node) {
var tbl = document.getElementById('TableData');
var Id = tbl.rows[node.rowIndex - 1].getElementsByTagName('input')[0].value;
//alert(Id);
$.ajax({
type: "POST",
url: "DatabaseService.asmx/changeStatus",
data: "{'Id':'" + Id + "'}",
dataType: "json",
contentType: "application/json",
async: false,
success: function () {
var curText = $('#txtSearch').val();
if (!(curText == "")) {
searchedRecords();
}
else {
var strtIndex = $('#hdnStrtIndex').val();
var endIndex = $('#hdnEndIndex').val();
displayData(strtIndex, endIndex);
}
},
error: function () {
alert("Error in Changing Status...");
}
});
}
function cancleUpdate() {
$('input[id="txtUserName"]').attr('disabled', false);
$('input[id="txtPwd"]').attr('disabled', false);
$('input[id="txtConfirmPwd"]').attr('disabled', false);
$('input[id="datepicker"]').attr('disabled', false);
$('input[name="radioBtnGender"]').attr('disabled', false);
clear();
$('#btnUpdate').hide();
$('#btnCancle').hide();
$('#btnInsert').show();
}
function matchPassword() {
var Pwd = document.getElementById('txtPwd').value;
var CPwd = document.getElementById('txtConfirmPwd').value;
if (!(Pwd == CPwd)) {
alert("ERROR: Password Match Failed, Please Confirm Password.");
document.getElementById('txtConfirmPwd').value = "";
document.getElementById('txtPwd').focus();
}
}
function clear() {
document.getElementById('txtFname').value = "";
document.getElementById('txtLname').value = "";
document.getElementById('txtUserName').value = "";
document.getElementById('txtPwd').value = "";
document.getElementById('txtConfirmPwd').value = "";
document.getElementById('txtEmail').value = "";
document.getElementById('txtPhone').value = "";
document.getElementById('datepicker').value = "";
//document.getElementById('resumeUploader')
document.getElementById('txtRemarks').value = "";
}
function deleteEnable(item) {
item.src = "Images/delete_enable.png";
}
function deleteDisable(item) {
item.src = "Images/delete_disable.png";
}
function editEnable(item) {
item.src = "Images/edit_enable.png";
}
function editDisable(item) {
item.src = "Images/edit_disable.png";
}
function prev10() {
var endIndex = parseInt($('#hdnStrtIndex').val()) - 1;
var strtIndex = endIndex - 9;
//alert(strtIndex);
//alert(endIndex);
displayData(strtIndex, endIndex);
}
function next10() {
var strtIndex = parseInt($('#hdnEndIndex').val()) + 1;
var endIndex = strtIndex + 9;
//alert(strtIndex);
//alert(endIndex);
displayData(strtIndex, endIndex);
}
function goToLastRecord() {
var tbl = document.getElementById('TableData');
var rowCount = tbl.rows.length;
var endIndex = 0;
var noOfPages = Math.ceil(rowCount / 10);
//alert(rowCount);
//alert(noOfPages);
for (var i = 0; i < noOfPages; i++) {
if (i == 0) {
endIndex += 9;
}
else {
endIndex += 10;
}
}
var strtIndex = endIndex - 9;
displayData(strtIndex, endIndex);
}
function pagging(start, end) {
var tbl = document.getElementById('TableData');
var rowCount = tbl.rows.length;
$('#hdnStrtIndex').val(start);
$('#hdnEndIndex').val(end);
//alert($('#hdnStrtIndex').val());
//alert($('#hdnEndIndex').val());
for (var i = 0; i < rowCount; i++) {
if (i >= start && i <= end) {
tbl.rows[i].style.display = "display";
}
else {
tbl.rows[i].style.display = "none";
}
}
if (start <= 0) {
$('#btnPrev').hide();
}
else {
$('#btnPrev').show();
}
if (end >= rowCount) {
$('#btnNext').hide();
}
else {
$('#btnNext').show();
}
setPageNo(end,rowCount);
}
function checkEmail() {
var emailptrn = "^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$";
var email = $('#txtEmail').val();
var matchemail = email.match(emailptrn);
if (!(email == "")) {
if (matchemail == null) {
alert("Error :: Incorrect Email Address!!");
$('#txtEmail').val("");
$('#txtEmail').focus();
}
}
}
function checkPhoneNo() {
var numpattern = "^[0-9]{10}$";
var phone = $('#txtPhone').val();
var matchptrn = phone.match(numpattern);
if (!(phone == "")) {
if (matchptrn == null) {
alert("Error :: Only 10 DIGITS are allowed in phone number.");
$('#txtPhone').val("");
$('#txtPhone').focus();
}
}
}
</script>
<script id="RecordTemplate" type="text/x-jquery-tmpl">
<tr>
<td align="center"><img src="${_IsActive}" height="20" onclick="changeStatus(this.parentNode.parentNode);" alt="Click Here To Make User Account Activate/Deactivate"></td>
<td>${_Name}</td>
<td>${_Email}</td>
<td>${_Phone}</td>
<td>${_Birthdate}</td>
<td>${_Gender}</td>
<td>${_Remarks}</td>
<td align="center">
<input type="hidden" id="HdnId" value="${_Id}">
<img src="Images/delete_disable.png" height="30" onmouseover="deleteEnable(this);" onmouseout="deleteDisable(this);" onclick="deleteData(this.parentNode.parentNode);">
</td>
<td align="center">
<img src="Images/edit_disable.png" height="30" onmouseover="editEnable(this);" onmouseout="editDisable(this);" onclick="showDataForEdit(this.parentNode.parentNode);">
</td>
</tr>
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript" ></script>
<script src="Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<!-- This CSS is use for JQUERY Date Picker -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function () {
displayData(0, 9);
$('#btnUpdate').hide();
$('#btnCancle').hide();
});
$(function () {
$("#datepicker").datepicker();
});
function setPageNo(end, rowCount) {
var noOfPages = Math.ceil(rowCount / 10);
var currentPage = 0;
var endIndex = 0;
for (var i = 0; i < noOfPages; i++) {
if (i == 0) {
endIndex += 9;
currentPage += 1;
}
else {
endIndex += 10;
currentPage += 1;
}
if (endIndex == end) {
break;
}
}
document.getElementById('totalPage').innerHTML = noOfPages;
document.getElementById('curPage').innerHTML = currentPage;
}
function displayData(strt, end) {
$.ajax({
type: "POST",
url: "DatabaseService.asmx/DisplayRecords",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (message) {
$('#TableData').empty();
$('#RecordTemplate').tmpl(message.d).appendTo('#TableData');
pagging(strt, end);
},
error: function () {
alert("ERROR in SELECT...");
}
});
}
function searchedRecords() {
var curText = $('#txtSearch').val();
if (!(curText == "")) {
$.ajax({
type: "POST",
url: "DatabaseService.asmx/searchRecords",
data: "{'Text':'" + curText + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (message) {
$('#TableData').empty();
$('#RecordTemplate').tmpl(message.d).appendTo('#TableData');
$('#btnFirst').hide();
$('#btnLast').hide();
$('#btnPrev').hide();
$('#btnNext').hide();
},
error: function () {
alert("Error in Search...");
}
});
}
else {
$('#btnFirst').show();
$('#btnLast').show();
$('#btnPrev').show();
$('#btnNext').show();
displayData(0, 9);
}
}
function insertData() {
var Fname = $('#txtFname').val();
var Lname = $('#txtLname').val();
var Uname = $('#txtUserName').val();
var Pwd = $('#txtPwd').val();
var Email = $('#txtEmail').val();
var Phone = $('#txtPhone').val();
var Bdate = $('#datepicker').val();
var Remark = $('#txtRemarks').val();
var radios = document.getElementsByName('radioBtnGender');
var Gender = "";
var file = document.getElementById("<%= resumeUploader.ClientID %>");
var Resume = file.value;
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
Gender = radios[i].value;
break;
}
}
var dotIndex = Resume.lastIndexOf(".");
//alert(dotIndex);
var fileExt = Resume.substring(dotIndex + 1);
//alert(fileExt);
if (Fname == "" || Lname == "" || Uname == "" || Pwd == "" || Email == "" || Phone == "" || Bdate == "" || Remark == "" || Gender == "" || Resume == "") {
alert("ERROR ::: Please Fill up All The Fields...");
}
else {
if (fileExt == "doc" || fileExt == "pdf" || fileExt == "docx") {
$.ajax({
type: "POST",
url: "DatabaseService.asmx/InsertRecord",
data: "{'Fname':'" + Fname + "','Lname':'" + Lname + "','Uname':'" + Uname + "','Pwd':'" + Pwd + "','Email':'" + Email + "','Phone':'" + Phone + "','BDate':'" + Bdate + "','Gender':'" + Gender + "','Resume':'" + Resume + "','Remarks':'" + Remark + "'}",
contentType: "application/json",
async: false,
success: function () {
var curText = $('#txtSearch').val();
clear();
if (!(curText == "")) {
searchedRecords();
}
else {
var strtIndex = $('#hdnStrtIndex').val();
var endIndex = $('#hdnEndIndex').val();
displayData(strtIndex, endIndex);
}
alert("Record Inserted");
},
error: function () {
alert("ERROR!!");
}
});
}
else {
alert("ERROR ::: Only .doc,.docx and .pdf Files Are Allowed...");
}
}
}
function deleteData(node) {
var tbl = document.getElementById("TableData");
var Id = tbl.rows[node.rowIndex -1].getElementsByTagName("input")[0].value;
//alert(Id);
var ans = confirm("Are You Sure You Want To Delete Record?");
if (ans == true) {
$.ajax({
type: "POST",
url: "DatabaseService.asmx/deleteRecord",
data: "{'Id':'" + Id + "'}",
contentType: "application/json",
async: false,
success: function (deletedId) {
var curText = $('#txtSearch').val();
if (!(curText == "")) {
searchedRecords();
}
else {
var strtIndex = $('#hdnStrtIndex').val();
var endIndex = $('#hdnEndIndex').val();
displayData(strtIndex, endIndex);
}
if ($('#txtId').val() == deletedId.d) {
cancleUpdate();
}
},
error: function () {
alert("Error In Delete...");
}
});
}
}
function showDataForEdit(node) {
$('#btnUpdate').show();
$('#btnCancle').show();
$('#btnInsert').hide();
var tbl = document.getElementById("TableData");
var Id = tbl.rows[node.rowIndex - 1].getElementsByTagName("input")[0].value;
//alert(Id);
var Name = tbl.rows[node.rowIndex - 1].getElementsByTagName("td")[1].innerHTML;
var Email = tbl.rows[node.rowIndex - 1].getElementsByTagName("td")[2].innerHTML;
var Phone = tbl.rows[node.rowIndex - 1].getElementsByTagName("td")[3].innerHTML;
var Bdate = tbl.rows[node.rowIndex - 1].getElementsByTagName("td")[4].innerHTML;
var Gender = tbl.rows[node.rowIndex - 1].getElementsByTagName("td")[5].innerHTML;
var Remark = tbl.rows[node.rowIndex - 1].getElementsByTagName("td")[6].innerHTML;
//alert(Name+Email+Phone+Bdate+Gender+Remark);
var spaceIndex = Name.indexOf(" ");
var Lname = Name.substring(spaceIndex+1);
var Fname = Name.substring(0, spaceIndex);
//alert(Fname+Lname);
$('input[id="txtUserName"]').attr('disabled', true);
$('input[id="txtPwd"]').attr('disabled', true);
$('input[id="txtConfirmPwd"]').attr('disabled', true);
$('input[id="datepicker"]').attr('disabled', true);
$('input[name="radioBtnGender"]').attr('disabled', true);
var radios = document.getElementsByName('radioBtnGender');
if (Gender == "Male") {
radios[0].checked = true;
}
else {
radios[1].checked = true;
}
$('#txtId').val(Id);
$('#txtFname').val(Fname);
$('#txtLname').val(Lname);
$('#txtEmail').val(Email);
$('#txtPhone').val(Phone);
$('#txtRemarks').val(Remark);
}
function updateData() {
var Id = $('#txtId').val();
var Fname = $('#txtFname').val();
var Lname = $('#txtLname').val();
var Email = $('#txtEmail').val();
var Phone = $('#txtPhone').val();
var Remark = $('#txtRemarks').val();
var file = document.getElementById("<%= resumeUploader.ClientID %>");
var Resume = file.value;
$.ajax({
type: "POST",
url: "DatabaseService.asmx/updateRecord",
data: "{'Id':'" + Id + "','Fname':'" + Fname + "','Lname':'" + Lname + "','Email':'" + Email + "','Phone':'" + Phone + "','Resume':'" + Resume + "','Remark':'" + Remark + "'}",
dataType: "json",
contentType: "application/json",
async: false,
success: function () {
var curText = $('#txtSearch').val();
if (!(curText == "")) {
searchedRecords();
}
else {
var strtIndex = $('#hdnStrtIndex').val();
var endIndex = $('#hdnEndIndex').val();
displayData(strtIndex, endIndex);
}
cancleUpdate();
},
error: function () {
alert("Error in Update.");
}
});
}
function changeStatus(node) {
var tbl = document.getElementById('TableData');
var Id = tbl.rows[node.rowIndex - 1].getElementsByTagName('input')[0].value;
//alert(Id);
$.ajax({
type: "POST",
url: "DatabaseService.asmx/changeStatus",
data: "{'Id':'" + Id + "'}",
dataType: "json",
contentType: "application/json",
async: false,
success: function () {
var curText = $('#txtSearch').val();
if (!(curText == "")) {
searchedRecords();
}
else {
var strtIndex = $('#hdnStrtIndex').val();
var endIndex = $('#hdnEndIndex').val();
displayData(strtIndex, endIndex);
}
},
error: function () {
alert("Error in Changing Status...");
}
});
}
function cancleUpdate() {
$('input[id="txtUserName"]').attr('disabled', false);
$('input[id="txtPwd"]').attr('disabled', false);
$('input[id="txtConfirmPwd"]').attr('disabled', false);
$('input[id="datepicker"]').attr('disabled', false);
$('input[name="radioBtnGender"]').attr('disabled', false);
clear();
$('#btnUpdate').hide();
$('#btnCancle').hide();
$('#btnInsert').show();
}
function matchPassword() {
var Pwd = document.getElementById('txtPwd').value;
var CPwd = document.getElementById('txtConfirmPwd').value;
if (!(Pwd == CPwd)) {
alert("ERROR: Password Match Failed, Please Confirm Password.");
document.getElementById('txtConfirmPwd').value = "";
document.getElementById('txtPwd').focus();
}
}
function clear() {
document.getElementById('txtFname').value = "";
document.getElementById('txtLname').value = "";
document.getElementById('txtUserName').value = "";
document.getElementById('txtPwd').value = "";
document.getElementById('txtConfirmPwd').value = "";
document.getElementById('txtEmail').value = "";
document.getElementById('txtPhone').value = "";
document.getElementById('datepicker').value = "";
//document.getElementById('resumeUploader')
document.getElementById('txtRemarks').value = "";
}
function deleteEnable(item) {
item.src = "Images/delete_enable.png";
}
function deleteDisable(item) {
item.src = "Images/delete_disable.png";
}
function editEnable(item) {
item.src = "Images/edit_enable.png";
}
function editDisable(item) {
item.src = "Images/edit_disable.png";
}
function prev10() {
var endIndex = parseInt($('#hdnStrtIndex').val()) - 1;
var strtIndex = endIndex - 9;
//alert(strtIndex);
//alert(endIndex);
displayData(strtIndex, endIndex);
}
function next10() {
var strtIndex = parseInt($('#hdnEndIndex').val()) + 1;
var endIndex = strtIndex + 9;
//alert(strtIndex);
//alert(endIndex);
displayData(strtIndex, endIndex);
}
function goToLastRecord() {
var tbl = document.getElementById('TableData');
var rowCount = tbl.rows.length;
var endIndex = 0;
var noOfPages = Math.ceil(rowCount / 10);
//alert(rowCount);
//alert(noOfPages);
for (var i = 0; i < noOfPages; i++) {
if (i == 0) {
endIndex += 9;
}
else {
endIndex += 10;
}
}
var strtIndex = endIndex - 9;
displayData(strtIndex, endIndex);
}
function pagging(start, end) {
var tbl = document.getElementById('TableData');
var rowCount = tbl.rows.length;
$('#hdnStrtIndex').val(start);
$('#hdnEndIndex').val(end);
//alert($('#hdnStrtIndex').val());
//alert($('#hdnEndIndex').val());
for (var i = 0; i < rowCount; i++) {
if (i >= start && i <= end) {
tbl.rows[i].style.display = "display";
}
else {
tbl.rows[i].style.display = "none";
}
}
if (start <= 0) {
$('#btnPrev').hide();
}
else {
$('#btnPrev').show();
}
if (end >= rowCount) {
$('#btnNext').hide();
}
else {
$('#btnNext').show();
}
setPageNo(end,rowCount);
}
function checkEmail() {
var emailptrn = "^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$";
var email = $('#txtEmail').val();
var matchemail = email.match(emailptrn);
if (!(email == "")) {
if (matchemail == null) {
alert("Error :: Incorrect Email Address!!");
$('#txtEmail').val("");
$('#txtEmail').focus();
}
}
}
function checkPhoneNo() {
var numpattern = "^[0-9]{10}$";
var phone = $('#txtPhone').val();
var matchptrn = phone.match(numpattern);
if (!(phone == "")) {
if (matchptrn == null) {
alert("Error :: Only 10 DIGITS are allowed in phone number.");
$('#txtPhone').val("");
$('#txtPhone').focus();
}
}
}
</script>
<script id="RecordTemplate" type="text/x-jquery-tmpl">
<tr>
<td align="center"><img src="${_IsActive}" height="20" onclick="changeStatus(this.parentNode.parentNode);" alt="Click Here To Make User Account Activate/Deactivate"></td>
<td>${_Name}</td>
<td>${_Email}</td>
<td>${_Phone}</td>
<td>${_Birthdate}</td>
<td>${_Gender}</td>
<td>${_Remarks}</td>
<td align="center">
<input type="hidden" id="HdnId" value="${_Id}">
<img src="Images/delete_disable.png" height="30" onmouseover="deleteEnable(this);" onmouseout="deleteDisable(this);" onclick="deleteData(this.parentNode.parentNode);">
</td>
<td align="center">
<img src="Images/edit_disable.png" height="30" onmouseover="editEnable(this);" onmouseout="editDisable(this);" onclick="showDataForEdit(this.parentNode.parentNode);">
</td>
</tr>
</script>
</HEAD>
<BODY>
<input type="hidden" id="txtId" />
<table border="0" cellpadding="5" cellspacing="2" id="tblMain">
<tr>
<td>First Name</td>
<td><input type="text" id="txtFname" size="15"/></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="txtLname" size="15"/></td>
</tr>
<tr>
<td>User Name</td>
<td><input type="text" id="txtUserName" size="20"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" id="txtPwd" size="20"/></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type="password" id="txtConfirmPwd" onblur="matchPassword()" size="20"/></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" id="txtEmail" size="40" onblur="checkEmail();" /></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" id="txtPhone" size="10" onblur="checkPhoneNo();" /></td>
</tr>
<tr>
<td>BirthDate</td>
<td>
<input type="text" id="datepicker" size="10" />
</td>
</tr>
<tr>
<td valign="top">Gender</td>
<td>
<input type="radio" name="radioBtnGender" value="Male" />Male<br />
<input type="radio" name="radioBtnGender" value="Female" />Female
</td>
</tr>
<tr>
<td>Resume</td>
<td>
<asp:FileUpload ID="resumeUploader" runat="server" />
</td>
</tr>
<tr>
<td>Remarks</td>
<td><input type="text" id="txtRemarks" maxlength="50" size="30"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Update" id="btnUpdate" onclick="updateData()" />
<input type="button" value="Cancle" id="btnCancle" onclick="cancleUpdate()" />
<input type="button" value="Insert" id="btnInsert" onclick="insertData()"/>
</td>
</tr>
</table>
<br />
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right">
Search
<input type="text" id="txtSearch" onkeyup="searchedRecords();"/>
</td>
</tr>
</table>
<table border="1" cellpadding="1" cellspacing="0" id="tblDynamic" width="100%">
<thead>
<tr>
<th>
Activate/Deactivate
</th>
<th>
Name
</th>
<th>
Email
</th>
<th>
Phone
</th>
<th>
Birthdate
</th>
<th>
Gender
</th>
<th>
Remarks
</th>
<th colspan="2">
Actions
</th>
</tr>
</thead>
<tbody id="TableData">
</tbody>
<tr>
<td colspan="9" align="center">
<input type="button" id="btnFirst" value="FIRST" onclick="displayData(0, 9);"/>
<input type="hidden" id="hdnStrtIndex" />
<input type="button" id="btnPrev" value="PREVIOUS" onclick="prev10();" />
<input type="button" id="btnNext" value="NEXT" onclick="next10();" />
<input type="hidden" id="hdnEndIndex" />
<input type="button" id="btnLast" value="LAST" onclick="goToLastRecord();"/>
<div align="right">Page <span id="curPage"></span> Of <span id="totalPage"></span></div>
</td>
</tr>
</table>
<table border="0" cellpadding="5" cellspacing="2" id="tblMain">
<tr>
<td>First Name</td>
<td><input type="text" id="txtFname" size="15"/></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="txtLname" size="15"/></td>
</tr>
<tr>
<td>User Name</td>
<td><input type="text" id="txtUserName" size="20"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" id="txtPwd" size="20"/></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type="password" id="txtConfirmPwd" onblur="matchPassword()" size="20"/></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" id="txtEmail" size="40" onblur="checkEmail();" /></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" id="txtPhone" size="10" onblur="checkPhoneNo();" /></td>
</tr>
<tr>
<td>BirthDate</td>
<td>
<input type="text" id="datepicker" size="10" />
</td>
</tr>
<tr>
<td valign="top">Gender</td>
<td>
<input type="radio" name="radioBtnGender" value="Male" />Male<br />
<input type="radio" name="radioBtnGender" value="Female" />Female
</td>
</tr>
<tr>
<td>Resume</td>
<td>
<asp:FileUpload ID="resumeUploader" runat="server" />
</td>
</tr>
<tr>
<td>Remarks</td>
<td><input type="text" id="txtRemarks" maxlength="50" size="30"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Update" id="btnUpdate" onclick="updateData()" />
<input type="button" value="Cancle" id="btnCancle" onclick="cancleUpdate()" />
<input type="button" value="Insert" id="btnInsert" onclick="insertData()"/>
</td>
</tr>
</table>
<br />
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right">
Search
<input type="text" id="txtSearch" onkeyup="searchedRecords();"/>
</td>
</tr>
</table>
<table border="1" cellpadding="1" cellspacing="0" id="tblDynamic" width="100%">
<thead>
<tr>
<th>
Activate/Deactivate
</th>
<th>
Name
</th>
<th>
</th>
<th>
Phone
</th>
<th>
Birthdate
</th>
<th>
Gender
</th>
<th>
Remarks
</th>
<th colspan="2">
Actions
</th>
</tr>
</thead>
<tbody id="TableData">
</tbody>
<tr>
<td colspan="9" align="center">
<input type="button" id="btnFirst" value="FIRST" onclick="displayData(0, 9);"/>
<input type="hidden" id="hdnStrtIndex" />
<input type="button" id="btnPrev" value="PREVIOUS" onclick="prev10();" />
<input type="button" id="btnNext" value="NEXT" onclick="next10();" />
<input type="hidden" id="hdnEndIndex" />
<input type="button" id="btnLast" value="LAST" onclick="goToLastRecord();"/>
<div align="right">Page <span id="curPage"></span> Of <span id="totalPage"></span></div>
</td>
</tr>
</table>
</BODY>
</HTML>
DatabaseService.asmx
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class DatabaseService : System.Web.Services.WebService {
SqlConnection objCon = new SqlConnection(@"Data Source=DS-1\SQL2008;Initial Catalog=EmployeeDb;User ID=training;Password=training");
SqlCommand objCmd = null;
/// <summary>
/// Web method to insert record in database.
/// </summary>
[WebMethod]
public void InsertRecord(string Fname, string Lname, string Uname, string Pwd, string Email, string Phone, string BDate, string Gender, string Resume, string Remarks)
{
int isActive = 1;
string insertQuery = "insert into empdetails_master(emp_fn,emp_ln,emp_uname,emp_pwd,emp_email,emp_phone,emp_birthdate,emp_gender,emp_resume,emp_isactive,emp_remarks) values('" + Fname + "','" + Lname + "','" + Uname + "','" + Pwd + "','" + Email + "','" + Phone + "','" + BDate + "','" + Gender + "','" + Resume + "','" + isActive + "','" + Remarks + "')";
objCmd = new SqlCommand();
objCmd.Connection = objCon;
objCmd.CommandText = insertQuery;
objCon.Open();
objCmd.ExecuteNonQuery();
objCon.Close();
objCmd.Dispose();
}
[WebMethod]
public List<Properties> DisplayRecords()
{
List<Properties> objListProperties = new List<Properties>();
string selectQuery = "select (emp_fn+' '+emp_ln) as name,emp_email,emp_phone,emp_id,CONVERT(varchar(10),emp_birthdate,105) as bdate,emp_gender,emp_remarks,case emp_isactive when 1 then 'Images/yes.png' else 'Images/no.png' end as isActive from empdetails_master order by emp_fn";
objCmd = new SqlCommand();
objCmd.Connection = objCon;
objCmd.CommandText = selectQuery;
objCon.Open();
SqlDataReader objDr = objCmd.ExecuteReader();
while (objDr.Read())
{
Properties objProperty = new Properties();
objProperty._Id = objDr["emp_id"].ToString();
objProperty._Name = objDr["name"].ToString();
objProperty._Email = objDr["emp_email"].ToString();
objProperty._Phone = objDr["emp_phone"].ToString();
objProperty._Birthdate = objDr["bdate"].ToString();
objProperty._Gender = objDr["emp_gender"].ToString();
objProperty._Remarks = objDr["emp_remarks"].ToString();
objProperty._IsActive = objDr["isActive"].ToString();
objListProperties.Add(objProperty);
}
objCon.Close();
objDr.Dispose();
objCmd.Dispose();
return objListProperties;
}
[WebMethod]
public List<Properties> searchRecords(string Text)
{
string args = Text + "%";
string searchQuery = "select (emp_fn+' '+emp_ln) as name,emp_email,emp_phone,emp_id,CONVERT(varchar(10),emp_birthdate,105) as bdate,emp_gender,emp_remarks,case emp_isactive when 1 then 'Images/yes.png' else 'Images/no.png' end as isActive from empdetails_master where emp_fn LIKE '" + args + "' order by emp_fn";
List<Properties> objListProperties = new List<Properties>();
objCmd = new SqlCommand();
objCmd.Connection = objCon;
objCmd.CommandText = searchQuery;
objCon.Open();
SqlDataReader objDr = objCmd.ExecuteReader();
while (objDr.Read())
{
Properties objProperty = new Properties();
objProperty._Id = objDr["emp_id"].ToString();
objProperty._Name = objDr["name"].ToString();
objProperty._Email = objDr["emp_email"].ToString();
objProperty._Phone = objDr["emp_phone"].ToString();
objProperty._Birthdate = objDr["bdate"].ToString();
objProperty._Gender = objDr["emp_gender"].ToString();
objProperty._Remarks = objDr["emp_remarks"].ToString();
objProperty._IsActive = objDr["isActive"].ToString();
objListProperties.Add(objProperty);
}
objCon.Close();
objDr.Dispose();
objCmd.Dispose();
return objListProperties;
}
[WebMethod]
public int deleteRecord(string Id)
{
string deleteQuery = "delete from empdetails_master where emp_id="+Id;
objCmd = new SqlCommand();
objCmd.Connection = objCon;
objCmd.CommandText = deleteQuery;
objCon.Open();
objCmd.ExecuteNonQuery();
objCon.Close();
objCmd.Dispose();
return Convert.ToInt32(Id);
}
[WebMethod]
public void updateRecord(string Id, string Fname, string Lname, string Email, string Phone, string Resume, string Remark)
{
string updateQuery = "update empdetails_master set emp_fn='" + Fname + "',emp_ln='" + Lname + "',emp_email='" + Email + "',emp_phone='" + Phone + "',emp_resume='" + Resume + "',emp_remarks='" + Remark + "' where emp_id=" + Id;
objCmd = new SqlCommand();
objCmd.Connection = objCon;
objCmd.CommandText = updateQuery;
objCon.Open();
objCmd.ExecuteNonQuery();
objCon.Close();
objCmd.Dispose();
}
[WebMethod]
public void changeStatus(string Id)
{
string getStatus = "select emp_isactive from empdetails_master where emp_id=" + Id;
string updatequery = "";
objCmd = new SqlCommand();
objCmd.Connection = objCon;
objCmd.CommandText = getStatus;
objCon.Open();
SqlDataReader objDr = objCmd.ExecuteReader();
while (objDr.Read())
{
int currentStatus = Convert.ToInt32(objDr["emp_isactive"]);
if (currentStatus == 0)
{
updatequery = "update empdetails_master set emp_isactive=1 where emp_id=" + Id;
}
else
{
updatequery = "update empdetails_master set emp_isactive=0 where emp_id=" + Id;
}
}
objCon.Close();
objCmd.Dispose();
objDr.Dispose();
objCmd = new SqlCommand();
objCmd.Connection = objCon;
objCmd.CommandText = updatequery;
objCon.Open();
objCmd.ExecuteNonQuery();
objCon.Close();
objCmd.Dispose();
}
}
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class DatabaseService : System.Web.Services.WebService {
SqlConnection objCon = new SqlConnection(@"Data Source=DS-1\SQL2008;Initial Catalog=EmployeeDb;User ID=training;Password=training");
SqlCommand objCmd = null;
/// <summary>
/// Web method to insert record in database.
/// </summary>
[WebMethod]
public void InsertRecord(string Fname, string Lname, string Uname, string Pwd, string Email, string Phone, string BDate, string Gender, string Resume, string Remarks)
{
int isActive = 1;
string insertQuery = "insert into empdetails_master(emp_fn,emp_ln,emp_uname,emp_pwd,emp_email,emp_phone,emp_birthdate,emp_gender,emp_resume,emp_isactive,emp_remarks) values('" + Fname + "','" + Lname + "','" + Uname + "','" + Pwd + "','" + Email + "','" + Phone + "','" + BDate + "','" + Gender + "','" + Resume + "','" + isActive + "','" + Remarks + "')";
objCmd = new SqlCommand();
objCmd.Connection = objCon;
objCmd.CommandText = insertQuery;
objCon.Open();
objCmd.ExecuteNonQuery();
objCon.Close();
objCmd.Dispose();
}
[WebMethod]
public List<Properties> DisplayRecords()
{
List<Properties> objListProperties = new List<Properties>();
string selectQuery = "select (emp_fn+' '+emp_ln) as name,emp_email,emp_phone,emp_id,CONVERT(varchar(10),emp_birthdate,105) as bdate,emp_gender,emp_remarks,case emp_isactive when 1 then 'Images/yes.png' else 'Images/no.png' end as isActive from empdetails_master order by emp_fn";
objCmd = new SqlCommand();
objCmd.Connection = objCon;
objCmd.CommandText = selectQuery;
objCon.Open();
SqlDataReader objDr = objCmd.ExecuteReader();
while (objDr.Read())
{
Properties objProperty = new Properties();
objProperty._Id = objDr["emp_id"].ToString();
objProperty._Name = objDr["name"].ToString();
objProperty._Email = objDr["emp_email"].ToString();
objProperty._Phone = objDr["emp_phone"].ToString();
objProperty._Birthdate = objDr["bdate"].ToString();
objProperty._Gender = objDr["emp_gender"].ToString();
objProperty._Remarks = objDr["emp_remarks"].ToString();
objProperty._IsActive = objDr["isActive"].ToString();
objListProperties.Add(objProperty);
}
objCon.Close();
objDr.Dispose();
objCmd.Dispose();
return objListProperties;
}
[WebMethod]
public List<Properties> searchRecords(string Text)
{
string args = Text + "%";
string searchQuery = "select (emp_fn+' '+emp_ln) as name,emp_email,emp_phone,emp_id,CONVERT(varchar(10),emp_birthdate,105) as bdate,emp_gender,emp_remarks,case emp_isactive when 1 then 'Images/yes.png' else 'Images/no.png' end as isActive from empdetails_master where emp_fn LIKE '" + args + "' order by emp_fn";
List<Properties> objListProperties = new List<Properties>();
objCmd = new SqlCommand();
objCmd.Connection = objCon;
objCmd.CommandText = searchQuery;
objCon.Open();
SqlDataReader objDr = objCmd.ExecuteReader();
while (objDr.Read())
{
Properties objProperty = new Properties();
objProperty._Id = objDr["emp_id"].ToString();
objProperty._Name = objDr["name"].ToString();
objProperty._Email = objDr["emp_email"].ToString();
objProperty._Phone = objDr["emp_phone"].ToString();
objProperty._Birthdate = objDr["bdate"].ToString();
objProperty._Gender = objDr["emp_gender"].ToString();
objProperty._Remarks = objDr["emp_remarks"].ToString();
objProperty._IsActive = objDr["isActive"].ToString();
objListProperties.Add(objProperty);
}
objCon.Close();
objDr.Dispose();
objCmd.Dispose();
return objListProperties;
}
[WebMethod]
public int deleteRecord(string Id)
{
string deleteQuery = "delete from empdetails_master where emp_id="+Id;
objCmd = new SqlCommand();
objCmd.Connection = objCon;
objCmd.CommandText = deleteQuery;
objCon.Open();
objCmd.ExecuteNonQuery();
objCon.Close();
objCmd.Dispose();
return Convert.ToInt32(Id);
}
[WebMethod]
public void updateRecord(string Id, string Fname, string Lname, string Email, string Phone, string Resume, string Remark)
{
string updateQuery = "update empdetails_master set emp_fn='" + Fname + "',emp_ln='" + Lname + "',emp_email='" + Email + "',emp_phone='" + Phone + "',emp_resume='" + Resume + "',emp_remarks='" + Remark + "' where emp_id=" + Id;
objCmd = new SqlCommand();
objCmd.Connection = objCon;
objCmd.CommandText = updateQuery;
objCon.Open();
objCmd.ExecuteNonQuery();
objCon.Close();
objCmd.Dispose();
}
[WebMethod]
public void changeStatus(string Id)
{
string getStatus = "select emp_isactive from empdetails_master where emp_id=" + Id;
string updatequery = "";
objCmd = new SqlCommand();
objCmd.Connection = objCon;
objCmd.CommandText = getStatus;
objCon.Open();
SqlDataReader objDr = objCmd.ExecuteReader();
while (objDr.Read())
{
int currentStatus = Convert.ToInt32(objDr["emp_isactive"]);
if (currentStatus == 0)
{
updatequery = "update empdetails_master set emp_isactive=1 where emp_id=" + Id;
}
else
{
updatequery = "update empdetails_master set emp_isactive=0 where emp_id=" + Id;
}
}
objCon.Close();
objCmd.Dispose();
objDr.Dispose();
objCmd = new SqlCommand();
objCmd.Connection = objCon;
objCmd.CommandText = updatequery;
objCon.Open();
objCmd.ExecuteNonQuery();
objCon.Close();
objCmd.Dispose();
}
}
Properties.cs
[Serializable]
public class Properties
{
public string _Id { get; set; }
public string _Name { get; set; }
public string _Email { get; set; }
public string _Phone { get; set; }
public string _Birthdate { get; set; }
public string _Gender { get; set; }
public string _Remarks { get; set; }
public string _IsActive { get; set; }
}
For more demos,
visit, http://jenisbhatt3990.blogspot.in
public class Properties
{
public string _Id { get; set; }
public string _Name { get; set; }
public string _Email { get; set; }
public string _Phone { get; set; }
public string _Birthdate { get; set; }
public string _Gender { get; set; }
public string _Remarks { get; set; }
public string _IsActive { get; set; }
}
For more demos,
visit, http://jenisbhatt3990.blogspot.in

Nice Posting...
ReplyDeleteThanks Jenis... :)
ReplyDelete