Save data using asp net web services and jquery ajax

Link for all dot net and sql server video tutorial playlists
www.youtube.co...
Link for slides, code samples and text version of the video
csharp-video-tu...
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our KZbin channel. Hope you can help.
/ @aarvikitchen5572
In this video we will discuss how to save data using asp.net web services and jquery ajax.
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
namespace Demo
{
[WebService(Namespace = "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.
$(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);
}
});
});
});

[@mohammedbadran7840]

I learned so much from your videos thnx a lot

[@Csharp-video-tutorialsBlogspot]

+Mohammed Knight Thanks a bunch for taking your valuable time to give feedback. Means a lot. Glad you found the videos useful. Dot Net & SQL Server videos for aspiring software developers kzbin.infoplaylists?view=1&sort=dd If you need videos for offline viewing, you can order them using the link below www.pragimtech.com/Order.aspx Code Samples, Text Version of the videos & PPTS on my blog csharp-video-tutorials.blogspot.com Tips to effectively use our channel kzbin.info/www/bejne/r2ibYYCtnb5qZtU Want to receive email alerts, when new videos are uploaded, please subscribe to our channel using the link below kzbin.info Please click the THUMBS UP button below the video, if you think you liked them Thank you for sharing these links with your friends Best Venkat

[@mohammedbadran7840]

+kudvenkat thnx a lot from Egypt

[@tolaskaplan]

I have a question - how are you passing a json string in the ajax and recieving an employee object in the web service?

[@ahmedshahabaz8370]

This example didn't work for me. I used visual studio 2013 and Microsoft SQL server 2012. I uncommented [System.Web.Script.Services.ScriptService] this. Firstly I had to pass Id as a parameter to the stored procedure. So my stored procedure had 4 parameters. Secondly passing the parameter from html page to asmx method didn't work. So I had to change the parameter type of the AddEmployee(Employee emp ) method to AddEmployee(string name,string gender , int salary). I passed the three parameter from the html page.I counted the number of rows in tblEmployee table and incremented it by one and assigned it to the emp.Id this was passed as the @Id parameter to the stored procedure. Please suggest me if I could have done this in another way. Where I could have kept the Employee type parameter of the AddEmployee method.

[@tung.nguyen.29]

Nice tutorial, good job guy!

[@vimalupadhyay1883]

Hello Venkat Sir, i am making one application by seeing your videos, I implementing Insert/Add functionality same as in this video, but sometimes my application insert data, and sometimes its not, but in both cases it gives error [object,object] ,even it successfully insert data it go to error function, not success function and give error [object object] can you provide some guidance on what i need to do? i already viewed this video several times and check everything as per it, but still getting this issue

[@pastuh]

If you get this error, that means you get Object. Need to use .each function, to get all elements from object

[@mohammedtawane]

I really enjoyed your clear video, Although i was looking different. Can you pls guide me how to insert file in to database using jquery ajax through webservice? I appreciate you

[@vshah2703]

sir in web service where did you get the value name that is passed to parameter @Name, I am unable to pass

[@gauravdubey4002]

Hi kudvenkat,can u include the upload file in the same form and along side saving that filename to database and file to the folder.

[@rahulrathaur8039]

Hello sir. How Can I Send Image from Ajax to Webservice

[@Rocky19700101]

Thank you for your excellent video, I got successful on search and get all data from web service, but always fails on saving data to database, Just don't know what cause the problem?

[@eksrikanth06]

can you pls share an example of saving Image(from picturebox) to Sqlserver table with Image(datatype)

[@pxanimate]

Thank you so much . Great Tutorial ... I have a question How can i create the Employee class object ...?

[@artemboss1999]

a good video tutorial thanks

[@SwiftLearn]

Get employees tutorial please.

[@jclinares6874]

aunque no entendi lo que hablaste, me ayudo a comprender mucho (y)

[@donfeto7636]

i would rather write the data like that data:Json.stringify({emp:employee}) we have to stringify anything that isn't string cuz the http accept only string to be passed in url any complex type have to stringifyed first

[@FabianoAugustoperfil]

very good class

[@codewizard5327]

It kinda works, but in real world application, you might want to add a small piece of html at the end of tbody instead of success:GetAllEmployees()

[@bojanasamardzioska3040]

💯

[@pablosalas8586]

and with update?? SP: public void UpdateEmployee(Employee emp) { string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString; using (SqlConnection con = new SqlConnection(cs)) { SqlCommand cmd = new SqlCommand("spUpdateEmployee", con); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.Add(new SqlParameter() { ParameterName = "@Id", Value = emp.ID }); 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(); } } ********************************************* $('#btnUpdateEmployee').click(function () { var employee = {}; employee.ID = $('#txtId').val(); employee.Name = $('#txtName').val(); employee.Gender = $('#txtGender').val(); employee.Salary = $('#txtSalary').val(); $.ajax({ url: 'EmployeeService.asmx/UpdateEmployee', method: 'POST', data: '{emp: ' + JSON.stringify(employee) +'}', contentType: "application/json; charset=utf-8", success: function () { getAllEmployees(); }, error: function (err) {alert(err); } }); }); doesn't work!. :(

[@Shahzaibkhan-xr7lr]

For those who are getting error [object object] uncomment this library [System.Web.Script.Services.ScriptService] in your asmx file