Monday, 7 January 2013

Sample Application : Using AJAX,JSON,JQUERY,JAVASCRIPT and Web Services.

Definition:

Operations...

* indicates are required field.
 - 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

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>
</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&nbsp;&nbsp;
                    <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);"/>&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="hidden" id="hdnStrtIndex" />&nbsp;&nbsp;
                <input type="button" id="btnPrev" value="PREVIOUS" onclick="prev10();" />&nbsp;&nbsp;
                <input type="button" id="btnNext" value="NEXT" onclick="next10();" />&nbsp;&nbsp;
                <input type="hidden" id="hdnEndIndex" />&nbsp;&nbsp;&nbsp;&nbsp;
                <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();
    }
}

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