Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Save data using asp.net web services and jquery ajax

Suggested Videos
Part 61 - Calling asp.net web services using jquery ajax
Part 62 - Handling json data returned from asp.net web services
Part 63 - Handling json arrays returned from asp.net web services with jquery



In this video we will discuss how to save data using asp.net web services and jquery ajax.



This is continuation to Part 63, please watch Part 63 before proceeding.

When Add Employee button is clicked we want to post form data to the asp.net web service and the web service should save the data to the database table.
Save data using asp.net web services and jquery ajax

Step 1 : Create Insert Stored Procedure

Create procedure spInsertEmployee
@Name nvarchar(50),
@Gender nvarchar(10),
@Salary int
as
Begin
     Insert into tblEmployee
     values (@Name, @Gender, @Salary)
End

Step 2 : Modify EmployeeService.asmx.cs as shown below

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

namespace Demo
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class EmployeeService : System.Web.Services.WebService
    {
        [WebMethod]
        public void AddEmployee(Employee emp)
        {
            string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
            using (SqlConnection con = new SqlConnection(cs))
            {
                SqlCommand cmd = new SqlCommand("spInsertEmployee", con);
                cmd.CommandType = CommandType.StoredProcedure;

                cmd.Parameters.Add(new SqlParameter()
                {
                    ParameterName = "@Name",
                    Value = emp.Name
                });

                cmd.Parameters.Add(new SqlParameter()
                {
                    ParameterName = "@Gender",
                    Value = emp.Gender
                });

                cmd.Parameters.Add(new SqlParameter()
                {
                    ParameterName = "@Salary",
                    Value = emp.Salary
                });

                con.Open();
                cmd.ExecuteNonQuery();
            }
        }

        [WebMethod]
        public void GetAllEmployees()
        {
            List<Employee> listEmployees = new List<Employee>();

            string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
            using (SqlConnection con = new SqlConnection(cs))
            {
                SqlCommand cmd = new SqlCommand("Select * from tblEmployee", con);
                con.Open();
                SqlDataReader rdr = cmd.ExecuteReader();
                while (rdr.Read())
                {
                    Employee employee = new Employee();
                    employee.ID = Convert.ToInt32(rdr["Id"]);
                    employee.Name = rdr["Name"].ToString();
                    employee.Gender = rdr["Gender"].ToString();
                    employee.Salary = Convert.ToInt32(rdr["Salary"]);
                    listEmployees.Add(employee);
                }
            }

            JavaScriptSerializer js = new JavaScriptSerializer();
            Context.Response.Write(js.Serialize(listEmployees));
        }
    }
}

Step 3 : Modify HtmlPage1.html as shown below.

<html>
<head>
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnAddEmployee').click(function () {
                var employee = {};
                employee.Name = $('#txtName').val();
                employee.Gender = $('#txtGender').val();
                employee.Salary = $('#txtSalary').val();

                $.ajax({
                    url: 'EmployeeService.asmx/AddEmployee',
                    method: 'post',
                    data: '{emp: ' + JSON.stringify(employee) + '}',
                    contentType: "application/json; charset=utf-8",
                    success: function () {
                        getAllEmployees();
                    },
                    error: function (err) {
                        alert(err);
                    }
                });
            });

            function getAllEmployees() {
                $.ajax({
                    url: 'EmployeeService.asmx/GetAllEmployees',
                    dataType: "json",
                    method: 'post',
                    success: function (data) {
                        var employeeTable = $('#tblEmployee tbody');
                        employeeTable.empty();

                        $(data).each(function (index, emp) {
                            employeeTable.append('<tr><td>' + emp.ID + '</td><td>'
                                + emp.Name + '</td><td>' + emp.Gender
                                + '</td><td>' + emp.Salary + '</td></tr>');
                        });
                    },
                    error: function (err) {
                        alert(err);
                    }
                });
            }
        });
    </script>
</head>
<body style="font-family:Arial">
    <table border="1" style="border-collapse:collapse">
        <tr>
            <td>Name</td>
            <td><input id="txtName" type="text" /></td>
        </tr>
        <tr>
            <td>Gender</td>
            <td><input id="txtGender" type="text" /></td>
        </tr>
        <tr>
            <td>Salary</td>
            <td><input id="txtSalary" type="text" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" id="btnAddEmployee" value="Add Employee" />
            </td>
        </tr>
    </table>
    <br />
    <table id="tblEmployee" border="1" style="border-collapse:collapse">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Gender</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
</html>

jQuery tutorial for beginners

4 comments:

  1. sir in this code accour a error [object Object]

    ReplyDelete
  2. $.ajax({
    url: 'EmployeeService.asmx/SaveEmployee',
    //url: 'WebForm1.aspx/SaveEmployee',
    method: 'post',
    data: '{emp:' + JSON.stringify(employee) + '}',
    contentType: "application/json; charset=utf-8",
    success: function () {

    },
    error: function (err) {
    alert(err);
    }
    });


    the above function doesnt work when i call a webservice function , it gives [object Object] error, but the same function works perfectly when it call a aspx function with the same code as webmethod

    ReplyDelete
  3. In page EmployeeService.asmx.cs need to add the [WebMethod] before both the methods AddEmployee() and GetAllEmployees().That is why the [object Object] error occurs.

    ReplyDelete
  4. You all guys do a very miner mistakes in your coding, before reading your codes you just use copy and paste to run the program.

    Anyway, if you are getting an error something like [object, object] it means js is not able to determine the error.

    To resolve it just unchech the following code line in your ASMX

    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]

    ReplyDelete

It would be great if you can help share these free resources