Post
Ask Question

Insert Data Into Database In C# Using JavaScript

Initial Chamber

Step 1. Open Visual Studio 2010 and create an Empty Website, Give a suitable name [insert_demo].

Step 2. In Solution Explorer you get your empty website, add a web form, SQL Database. By going like this.

For Web Form

insert_demo (Your Empty Website) - Right-click, Add New Item, then Web Form. Name it insert_demo.aspx.

For SQL Server Database

insert_demo (Your Empty Website) - Right-click, Add New Item, SQL Server Database. [Add Database inside the App_Data_folder].

Database Chamber

Step 3. Get to your Database [Database.mdf], we will create a table tbl_Data. Go to database.mdf, Table, then Add New table; design your table like the following.

Table - tbl_data [Don’t forget to make ID, then Identity Specification - Yes]

database

Design Chamber

Step 4. Now open your insert_demo.aspx file, where we create our design for inserting data into database.

insert_demo.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <title></title>

    <style type="text/css">
        .auto-style1 {
            width: 147px;
        }
    </style>
</head>

<body>
    <form id="form1" runat="server">
        <div>
            <table style="width:100%;">
                <tr>
                    <td class="auto-style1"></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="auto-style1">Name</td>
                    <td>
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td class="auto-style1">Email</td>
                    <td>
                        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td class="auto-style1">Designation</td>
                    <td>
                        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td class="auto-style1">City</td>
                    <td>
                        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td class="auto-style1"></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="auto-style1"></td>
                    <td>
                        <asp:Button ID="Button1" runat="server" Text="Submit" />
                    </td>
                    <td></td>
                </tr>
            </table>
        </div>
    </form>

    <script type="text/javascript">
        $(function () {
            $('#Button1').click(function () {
                var name = $('#TextBox1').val();
                var email = $('#TextBox2').val();
                var designation = $('#TextBox3').val();
                var city = $('#TextBox4').val();
                if (name !== '' && email !== '' && designation !== '' && city !== '') {
                    $.ajax({
                        type: 'POST',
                        url: 'Default.aspx/insertdata',
                        async: false,
                        data: "{'name':'" + name + "','email':'" + email + "','designation':'" + designation + "','city':'" + city + "'}",
                        contentType: 'application/json; charset=utf-8',
                        success: function (data) {
                            var obj = data.d;
                            if (obj === 'true') {
                                $('#TextBox1').val('');
                                $('#TextBox2').val('');
                                $('#TextBox3').val('');
                                $('#TextBox4').val('');
                                alert("Data Saved Successfully");
                            }
                        },
                        error: function (result) {
                            alert("Error Occurred, Try Again");
                        }
                    });
                } else {
                    alert("Please Fill all the Fields");
                    return false;
                }
            });
        });
    </script>
</body>
</html>

menu

Code Chamber

Step 5. Open your insert_demo.aspx.cs and write some code so that our application starts working.

Insert_demo.aspx.cs

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using System.Data;  
using System.Data.SqlClient;  
using System.Web.Services;  
  
public partial class _Default: System.Web.UI.Page  
{  
    protected void Page_Load(object sender, EventArgs e)   
    {  
  
    }  
  
    [WebMethod]  
    public static string insertdata(string name, string email, string designation, string city)  
    {  
        string msg = "";  
        SqlConnection con = new SqlConnection("Data Source=Nilu;Initial Catalog=mydb;Integrated Security=True");  
        SqlCommand cmd = new SqlCommand("insert into tbl_data values(@name, @email,@designation,@city)", con);  
        cmd.Parameters.AddWithValue("@name", name);  
        cmd.Parameters.AddWithValue("@email", email);  
        cmd.Parameters.AddWithValue("@designation", designation);  
        cmd.Parameters.AddWithValue("@city", city);  
        con.Open();  
        int i = cmd.ExecuteNonQuery();  
        if (i == 1)  
        {  
            msg = "true";  
        } else  
        {  
            msg = "false";  
        }  
  
        return msg;  
  
    }  
}  

Output

output

Now go back to the database, where we check that the same data is entered into the database or not, by going to database.mdf, Tables, tbl_data, then right click and show Table Data.

table

Hope you liked this. Thank you for reading. Have a good day.


Similar Articles