C#

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 5: Now open your insert_demo.aspx file, where we create our design for inserting data into database.

insert_demo.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3.     <!DOCTYPE html>  
  4.   
  5.     <html xmlns="http://www.w3.org/1999/xhtml">  
  6.   
  7.     <head runat="server">  
  8.         <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>  
  9.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
  10.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>  
  11.         <title></title>  
  12.   
  13.   
  14.         <style type="text/css">  
  15.             .auto-style1   
  16.             {  
  17.                 width: 147px;  
  18.             }  
  19.         </style>  
  20.     </head>  
  21.   
  22.     <body>  
  23.         <form id="form1" runat="server">  
  24.             <div>  
  25.   
  26.                 <table style="width:100%;">  
  27.                     <tr>  
  28.                         <td class="auto-style1"> </td>  
  29.                         <td> </td>  
  30.                         <td> </td>  
  31.                     </tr>  
  32.                     <tr>  
  33.                         <td class="auto-style1">Name </td>  
  34.                         <td>  
  35.                             <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
  36.                         </td>  
  37.                         <td> </td>  
  38.                     </tr>  
  39.                     <tr>  
  40.                         <td class="auto-style1">Email </td>  
  41.                         <td>  
  42.                             <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>  
  43.                         </td>  
  44.                         <td> </td>  
  45.                     </tr>  
  46.                     <tr>  
  47.                         <td class="auto-style1">Designation</td>  
  48.                         <td>  
  49.                             <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>  
  50.                         </td>  
  51.                         <td> </td>  
  52.                     </tr>  
  53.                     <tr>  
  54.                         <td class="auto-style1">City</td>  
  55.                         <td>  
  56.                             <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>  
  57.                         </td>  
  58.                         <td> </td>  
  59.                     </tr>  
  60.                     <tr>  
  61.                         <td class="auto-style1"> </td>  
  62.                         <td> </td>  
  63.                         <td> </td>  
  64.                     </tr>  
  65.                     <tr>  
  66.                         <td class="auto-style1"> </td>  
  67.                         <td>  
  68.                             <asp:Button ID="Button1" runat="server" Text="Submit" />  
  69.                         </td>  
  70.                         <td> </td>  
  71.                     </tr>  
  72.                 </table>  
  73.   
  74.             </div>  
  75.         </form>  
  76.         <script type="text/javascript">  
  77.             $(function()   
  78.               {  
  79.   
  80.                 $('#Button1').click(function() {  
  81.                     var name = $('#TextBox1').val();  
  82.                     var email = $('#TextBox2').val();  
  83.                     var designation = $('#TextBox3').val();  
  84.                     var city = $('#TextBox4').val();  
  85.                     if (name != '' && email != '' && designation != '' && city != '') {  
  86.                         $.ajax  
  87.   
  88.                             ({  
  89.   
  90.                             type: 'POST',  
  91.                             url: 'Default.aspx/insertdata',  
  92.                             async: false,  
  93.                             data: "{'name':'" + name + "','email':'" + email + "','designation':'" + designation + "','city':'" + city + "'}",  
  94.                             contentType: 'application/json; charset =utf-8',  
  95.                             success: function(data)  
  96.                           {  
  97.   
  98.                                 var obj = data.d;  
  99.                                 if (obj == 'true')   
  100.                                 {  
  101.                                     $('#TextBox1').val('');  
  102.                                     $('#TextBox2').val('');  
  103.                                     $('#TextBox3').val('');  
  104.                                     $('#TextBox4').val('');  
  105.                                     alert("Data Saved Successfully");  
  106.   
  107.                                 }  
  108.                             },  
  109.   
  110.                             error: function(result)   
  111.                             {  
  112.                                 alert("Error Occured, Try Again");  
  113.                             }  
  114.                         });  
  115.                     } else   
  116.                     {  
  117.                         alert("Pleae Fill all the Fields");  
  118.                         return false;  
  119.                     }  
  120.                 })  
  121.             });  
  122.         </script>  
  123.   
  124.     </body>  
  125.   
  126.     </html>  
menu

CODE CHAMBER

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

Insert_demo.aspx.cs:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9. using System.Web.Services;  
  10.   
  11. public partial class _Default: System.Web.UI.Page  
  12. {  
  13.     protected void Page_Load(object sender, EventArgs e)   
  14.     {  
  15.   
  16.     }  
  17.   
  18.     [WebMethod]  
  19.     public static string insertdata(string name, string email, string designation, string city)  
  20.     {  
  21.         string msg = "";  
  22.         SqlConnection con = new SqlConnection("Data Source=Nilu;Initial Catalog=mydb;Integrated Security=True");  
  23.         SqlCommand cmd = new SqlCommand("insert into tbl_data values(@name, @email,@designation,@city)", con);  
  24.         cmd.Parameters.AddWithValue("@name", name);  
  25.         cmd.Parameters.AddWithValue("@email", email);  
  26.         cmd.Parameters.AddWithValue("@designation", designation);  
  27.         cmd.Parameters.AddWithValue("@city", city);  
  28.         con.Open();  
  29.         int i = cmd.ExecuteNonQuery();  
  30.         if (i == 1)  
  31.         {  
  32.             msg = "true";  
  33.         } else  
  34.         {  
  35.             msg = "false";  
  36.         }  
  37.   
  38.         return msg;  
  39.   
  40.     }  
  41. }  
OUTPUT CHAMBER
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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs