How to save data using jQuery soap in SQL Server 2012?

Question

I am trying to save data using jQuery soap with C # WebMethod But I can’t save the data in SQL Server , please help me how can I save the data using Soapy jQuery . I am using the Visual Studio 2015 IDE.

<script type="text/javascript"> function SavePersonRecord() { var Name = $.trim($('#<%=txtName.ClientID %>').val()); var LName = $.trim($('#<%=txtlname.ClientID %>').val()); var Company = $.trim($('#<%=txtCompany.ClientID %>').val()); var Messege = ""; if (Name == '') { Messege = "Can not Blank Name"; } if (LName == '') { Messege += "Can not Blank Last Name"; } if (Company == '') { Messege += " Company Name Can not Blank"; } if (Messege.length == 0) { $.ajax({ type: "POST", dataType: "json", contentType: "application/json; charset=utf-8", url: "Soap-Service.aspx/InsertPersonRecord", data: "{'FirstName':'" + Name + "', 'LastName':'" + LName + "','Company':'" + Company + "'}", success: function (Record) { $('#txtName').val(); $('#txtlName').val(); $('#txtCompany').val(); if (Record.d == true) { $('#Result').text("Your Record insert"); } else { $('#Result').text("Your Record Not Insert"); } }, Error: function (textMsg) { $('#Result').text("Error: " + Error); } }); } else { $('#Result').html(''); $('#Result').html(Messege); } $('#Result').fadeIn(); } </script> <table border="0" cellpadding="5" cellspacing="5" style="border: solid 2px Green;"> <tr> <td colspan="2" style="background-color: red; color: white; font-weight: bold; font-size: 12pt; text-align: center; font-family: Verdana;">Enter Employee Information</td> </tr> <tr> <td>First Name: </td> <td> <asp:TextBox ID="txtName" runat="server" Text="" /> </td> </tr> <tr> <td>Last Name: </td> <td> <asp:TextBox ID="txtlname" runat="server" /> </td> </tr> <tr> <td>Company </td> <td> <asp:TextBox ID="txtCompany" runat="server" /> </td> </tr> <tr> <td></td> <td> <asp:Button ID="btnInsertRecord" Text="Save" runat="server" OnClientClick="SavePersonRecord(); return false" /> </td> </tr> </table> 

Answer 1

Finally, my code works well. Here is the code. There are several changes to the web application.

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> <script type="text/javascript"> $(function () { $('#btnSubmit').click(function () { var Name = $('#txtname').val(); var Contact = $('#txtcontact').val(); //var body = $('#txtbody').val(); if (Name != '' && Contact != '') { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "Soap-Jquery.aspx/InsertData", data: "{'EmpName':'" + Name + "','ConNo':'" + Contact + "'}", dataType: "json", success: function (data) { var obj = data.d; if (obj == 'true') { $('#txtname').val(''); $('#txtcontact').val(''); //$('#txtbody').val(''); $('#lblmsg').html("Details Submitted Successfully"); window.location.reload(); } }, //error: function (result) { // alert("Error"); //} }); } else { alert('Please enter all the fields') return false; } }) }); </script> 

 <asp:Panel ID="pnl_add_payment" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <section> <div class="container"> <div class="row"> <div class="form-group"> <button type="button" class="btn btn-primary ribbon">Data Insert Using Jquery</button> <asp:Label ID="lblmsg" runat="server" Text="" ForeColor="Red"></asp:Label> <div class="col-md-12" style="margin-top: 15px;"> <div class="col-md-2">Enter Name</div> <div class="col-md-4"> <asp:TextBox ID="txtname" runat="server" class="form-control" placeholder="Enter Name"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtname" ErrorMessage="*" ForeColor="Red" ValidationGroup="a"></asp:RequiredFieldValidator> </div> <div class="col-md-2">Enter Contact No</div> <div class="col-md-4"> <asp:TextBox ID="txtcontact" runat="server" class="form-control" placeholder="Enter Contact No"></asp:TextBox> <asp:RegularExpressionValidator ID="RegularExpressionValidator1" ControlToValidate="txtcontact" runat="server" ErrorMessage="Only Numbers allowed" ValidationExpression="\d+" ForeColor="Red" ValidationGroup="a"></asp:RegularExpressionValidator> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtcontact" ErrorMessage="*" ForeColor="Red" ValidationGroup="a"></asp:RequiredFieldValidator> </div> <div class="col-md-6"> <asp:Button ID="btnSubmit" runat="server" Text="Submit" value="Submit" ValidationGroup="a" /> </div> </div> </div> <%--End Form Group--%> </div> <%--End Row--%> </div> <%--End Container--%> </section> <br /><br /> <section> <div class="container"> <div class="row"> <div class="col-md-6"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4" Width="100%"> <Columns> <asp:BoundField DataField="EmpName" HeaderText="Name" /> <asp:BoundField DataField="ConNo" HeaderText="Number" /> </Columns> <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" /> <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" /> <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" /> <RowStyle BackColor="White" ForeColor="#330099" /> <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" /> <SortedAscendingCellStyle BackColor="#FEFCEB" /> <SortedAscendingHeaderStyle BackColor="#AF0101" /> <SortedDescendingCellStyle BackColor="#F6F0C0" /> <SortedDescendingHeaderStyle BackColor="#7E0000" /> </asp:GridView> </div> </div> </div> </section> </asp:Panel> 

[WebMethod] public static string InsertData (string EmpName, string ConNo) {string msg = string.Empty; using (SqlConnection con = new SqlConnection (ConfigurationManager.ConnectionStrings ["ConStr"]. ConnectionString)) {using (SqlCommand cmd = new SqlCommand ("sp_insertEmp", con)) {con.Open (); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue ("@EmpName", EmpName); cmd.Parameters.AddWithValue ("@ConNo", ConNo); int i = cmd.ExecuteNonQuery (); con.Close (); if (i == 1) {

  msg = "True"; } else { msg = "false"; } } } return msg; } 

Answer 2

A vague question. However, take the next step:

• Are you getting any error in the browser console that breaks your javascript code?
• Have you fixed any error in the "Error:" section?
• If both options look good above, have you added dubugger to your web method to check if it hit or not?
• After all this, is there any exception on the server side (in your web method)?
• Answer 4) - yes, post an exception

Answer 3

Well, as I see it, you have problems with your ajax call. It should be:

  $.ajax({ type: "POST", dataType: "json", contentType: "application/json; charset=utf-8", url: "Soap-Service.aspx/SaveUser", //Here you got wrong method //right here you should pass object (not string) with right property names (like you have in your web method) data: { FName: Name, LNAme: LName, Company: Company}, success: function (Record) { $('#txtName').val(); $('#txtlName').val(); $('#txtCompany').val(); if (Record.d == true) { $('#Result').text("Your Record insert"); } else { $('#Result').text("Your Record Not Insert"); } }, error: function (textMsg) { $('#Result').text("Error: " + Error); } }); 

Above your web method you should add:

 [WebInvoke(Method="POST",ResponseFormat=WebMessageFormat.Json)]