Sunday, August 11, 2019

How to insert data into sql server databse using jquery (post method) in asp.net

Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create table for Save data.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok. 
In this example, I have used one tables as below

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >

 Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish. 

Step-5: Add a webpage and design for save data to sql server database.

HTML Code 
    

  1.             <h3>Insert Data Into SQL Server Using jQuery (post method) in ASP.Net</h3>
    2. 

  2.             <div>
    3. 

  3.                 <table>
    4. 

  4.                     <tr>
    5. 

  5.                         <td>Contact Name : </td>
    6. 

  6.                         <td><asp:TextBox ID="txtContactName" runat="server" Width="200px" /></td>
    7. 

  7.                     </tr>
    8. 

  8.                     <tr>
    9. 

  9.                         <td>Contact No: </td>
    10. 

  10.                         <td><asp:TextBox ID="txtContactNo" runat="server" Width="200px" /></td>
    11. 

  11.                     </tr>
    12. 

  12.                     <tr>
    13. 

  13.                         <td></td>
    14. 

  14.                         <td>
    15. 

  15.                             <input type="button" value="Submit" id="btnSave" />
    16. 

  16.                             <div id="loadingPanel" style="color:green; font-weight:bold;display:none;">Data Saving...</div>
    17. 

  17.                         </td>
    18. 

  18.                     </tr>
    19. 

  19.                 </table>
    20. 

  20.             </div>
    21. 

  21.         
    22.

Step-6: Add Jquery code for call server side function for save data to the sql server database.

Write this below jquery code inside page <head></head> section. 
Jquery Code 
    

  1.             <script src="Scripts/jquery-1.7.1.js"></script>
    2. 

  2.             <script>
    3. 

  3.                 $(document).ready(function () {
    4. 

  4.                     $('#btnSave').click(function () {
    5. 

  5.                         var contactName = $('#<%=txtContactName.ClientID%>').val();
    6. 

  6.                         var contactNo = $('#<%=txtContactNo.ClientID%>').val();
    7. 

  7.                         if (contactName.trim() == "" || contactNo.trim() == "") {
    8. 

  8.                               alert("All the fields are required!");
    9. 

  9.                               return false;
    10. 

  10.                          }
    11. 

  11.                         $('#loadingPanel').show();
    12. 

  12.  
    13. 

  13.                         // here call server side function for save data using jquery ajax
    14. 

  14.                         $.ajax({
    15. 

  15.                             url: "ContactInfo.aspx/SaveData",
    16. 

  16.                             type: "POST",
    17. 

  17.                             dataType: "json",
    18. 

  18.                             contentType: "application/json; charset=utf-8",
    19. 

  19.                             data: JSON.stringify({
    20. 

  20.                                 "contactName": contactName,
    21. 

  21.                                 "contactNo" : contactNo
    22. 

  22.                             }),
    23. 

  23.                             success: function (data) {
    24. 

  24.                                 if (data.d == "success") {
    25. 

  25.                                     alert("Data saved successfully");
    26. 

  26.                                     // clear text here after save complete
    27. 

  27.                                     $('#<%=txtContactName.ClientID%>').val('');
    28. 

  28.                                     $('#<%=txtContactNo.ClientID%>').val('');
    29. 

  29.                                 }
    30. 

  30.                             },
    31. 

  31.                             error: function (xhr, ajaxOptions, thrownError) {
    32. 

  32.                                 alert(thrownError);
    33. 

  33.                             }
    34. 

  34.                         }).done(function () {
    35. 

  35.                             // here hide loading panel as function complete
    36. 

  36.                             $('#loadingPanel').hide();
    37. 

  37.                         });
    38. 

  38.                     });
    39. 

  39.                 });
    40. 

  40.             </script>
    41. 

  41.         
    42.

Step-7: Write server side code (function) for save data to the sql server database.

Before writing code add this namespace to your code behide page. 

    

  1.             using System.Web.Services;
    2. 

  2.         
    3.
Here is the function, which is called by jquery code.
    

  1.             [WebMethod]
    2. 

  2.             public static string SaveData(string contactName, string contactNo)
    3. 

  3.             {
    4. 

  4.                 string status = "";
    5. 

  5.                 // apply validation here
    6. 

  6.                 ContactInfo c = new ContactInfo { ID=0, ContactName = contactName, ContactNo = contactNo };
    7. 

  7.  
    8. 

  8.                 // here MyDatabaseEntities  is our dbContext
    9. 

  9.                 using (MyDatabaseEntities dc = new MyDatabaseEntities())
    10. 

  10.                 {
    11. 

  11.                     dc.ContactInfoes.Add(c);
    12. 

  12.                     dc.SaveChanges();
    13. 

  13.                     status = "success";
    14. 

  14.                 }
    15. 

  15.  
    16. 

  16.                 return status;
    17. 

  17.             }
    18. 

  18.         
    19.
Step-8: Run Application
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

How to register multiple implementations of the same interface in Asp.Net Core?

 Problem: I have services that are derived from the same interface. public interface IService { } public class ServiceA : IService { ...