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

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


            <h3>Insert Data Into SQL Server Using jQuery (post method) in ASP.Net</h3>
            <div>
                <table>
                    <tr>
                        <td>Contact Name : </td>
                        <td><asp:TextBox ID="txtContactName" runat="server" Width="200px" /></td>
                    </tr>
                    <tr>
                        <td>Contact No: </td>
                        <td><asp:TextBox ID="txtContactNo" runat="server" Width="200px" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="button" value="Submit" id="btnSave" />
                            <div id="loadingPanel" style="color:green; font-weight:bold;display:none;">Data Saving...</div>
                        </td>
                    </tr>
                </table>
            </div>

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


            <script src="Scripts/jquery-1.7.1.js"></script>
            <script>
                $(document).ready(function () {
                    $('#btnSave').click(function () {
                        var contactName = $('#<%=txtContactName.ClientID%>').val();
                        var contactNo = $('#<%=txtContactNo.ClientID%>').val();
                        if (contactName.trim() == "" || contactNo.trim() == "") {
                              alert("All the fields are required!");
                              return false;
                         }
                        $('#loadingPanel').show();
 
                        // here call server side function for save data using jquery ajax
                        $.ajax({
                            url: "ContactInfo.aspx/SaveData",
                            type: "POST",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            data: JSON.stringify({
                                "contactName": contactName,
                                "contactNo" : contactNo
                            }),
                            success: function (data) {
                                if (data.d == "success") {
                                    alert("Data saved successfully");
                                    // clear text here after save complete
                                    $('#<%=txtContactName.ClientID%>').val('');
                                    $('#<%=txtContactNo.ClientID%>').val('');
                                }
                            },
                            error: function (xhr, ajaxOptions, thrownError) {
                                alert(thrownError);
                            }
                        }).done(function () {
                            // here hide loading panel as function complete
                            $('#loadingPanel').hide();
                        });
                    });
                });
            </script>

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.


            using System.Web.Services;

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


            [WebMethod]
            public static string SaveData(string contactName, string contactNo)
            {
                string status = "";
                // apply validation here
                ContactInfo c = new ContactInfo { ID=0, ContactName = contactName, ContactNo = contactNo };
 
                // here MyDatabaseEntities  is our dbContext
                using (MyDatabaseEntities dc = new MyDatabaseEntities())
                {
                    dc.ContactInfoes.Add(c);
                    dc.SaveChanges();
                    status = "success";
                }
 
                return status;
            }

Step-8: Run Application

Microsoft hubs(8920128728)

Sunday, August 11, 2019

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

Step - 1 : Create New Project.

Step-2: Add a Database.

Step-3: Create table for Save data.

Step-4: Add Entity Data Model.

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

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

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

No comments:

Post a Comment

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

Report Abuse