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.
Step 1 : Create Insert Stored Procedure
Step 2 : Modify EmployeeService.asmx.cs as shown below
Step 3 : Modify HtmlPage1.html as shown below.
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.
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>
sir in this code accour a error [object Object]
ReplyDelete$.ajax({
ReplyDeleteurl: '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
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.
ReplyDeleteYou all guys do a very miner mistakes in your coding, before reading your codes you just use copy and paste to run the program.
ReplyDeleteAnyway, 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]