16 Aug 2017

How to insert data in sql database Using jQuery Ajax and Json

What is jQuery-  jquery is just like library. it is not any language. we can insert update delete etc in ajax method  in jquery library.

Step1.  Download jquery file.

Step2. Copy jquery file past in project.


step3. Drop the jquery file in Header section.


Note- we need to json in ajax and jquery file.

what is Json-

Json is just like dataformate.it is not language. jquary use in json. jqury do not use dataset and data table.

how to install json

Step1. json install.

Step2. Tools ==> Library Package manager ==>package manager console.



Step3. 



Step4.   Install-Package Newtonsoft.Json -Version 6.0.1 (run this command)

Step5. Complete Download Process the Json



step5. goto the project name then click the right click build the project.




Types of Jquary property.-

jquary are seven type of property.

1. url:' ',

2.type:' ',

3.datatype:' ',

4.contentType: ' ',

5.data: " ",

6.success:


7.error:

Note.Ajax method in data property in value pass by default will be reached ajax method in url property define by function.

Step1. url:'  ',

syntax-   url: 'employee.aspx/Devesh',

Step2. datatype: '  ', - json type.

Step3. type: '  ', - Post.

Step4. contentType: '  ', - syntax-'application/json;charset=utf-8',

Step5. data:'  ',  (ajax method data property )

code syntax- "{A :'"+ $("#TextName").val() +"',B :'"+ $("#TextAge").val() +"',C: '"+ $("#TextAddress").val() +"'}",

Step6. success - This property can be use to your program is not missing code the success mgs pass,

Step7. error. This property can be used to your record insert time any missing then msg pass is error ,

How to insert record in database jquery.

Database code-

create database selfjquary15_8_17

use selfjquary15_8_17

create table-
create table Employee
(
Empid int primary key identity(1,1),
Name varchar(50),
Age int,
Address varchar(50)
)

select stetment-

select * from Employee

Insert procedure-

create proc usp_employee_insert
@Name varchar(50),
@Age int,
@Address varchar(50)
as
begin
insert into Employee(Name,Age,Address) values(@Name,@Age,@Address)
end

Aspx page coding.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="employee.aspx.cs" Inherits="selfjquary15_8_17.employee" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            GetData();
        });

        function Savedata()
        {
            $.ajax({
                url: 'employee.aspx/Devesh',
                type: 'post',
                contentType: 'application/json;charset=utf-8',
                datatype: 'json',
                data: "{A :'"+ $("#TextName").val() +"',B :'"+ $("#TextAge").val() +"',C: '"+ $("#TextAddress").val() +"'}",
                success: function () {
                    alert('data inserted !!');
                    GetData();
                },

                error: function ()
                {
                    alert('data error !!');
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>Name:</td>
                    <td><input type="text" id="TextName" /></td>
                </tr>

                <tr>
                    <td>Age:</td>
                    <td><input type="text" id="TextAge" /></td>
                </tr>

                <tr>
                    <td>Address:</td>
                    <td><input type="text" id="TextAddress" /></td>
                </tr>

                <tr>
                    <td></td>
                    <td><input type="button" id="btnsave" value="Save" onclick="Savedata()" /></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

CS page coding.

Three namespace add on cs page.
using System.Web.Services;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

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.Configuration;
using System.Web.Services;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;


namespace selfjquary15_8_17
{
    public partial class employee : System.Web.UI.Page
    {
       static SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString);
        protected void Page_Load(object sender, EventArgs e)
        {
        
        }
        [WebMethod]
        public static void Devesh(string A, int B, string C)
        {
           con.Open();
           SqlCommand cmd = new SqlCommand("usp_employee_insert", con);
            cmd.CommandType= CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@Name",A);
            cmd.Parameters.AddWithValue("@Age",B);
            cmd.Parameters.AddWithValue("@Address",C);
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }

}

Web.config page code-

<?xml version="1.0"?>

<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->

<configuration>
    <system.web>
      <compilation debug="true" targetFramework="4.5" />
      <httpRuntime targetFramework="4.5" />
    </system.web>
<connectionStrings>
  <add name="DBCS" connectionString="data source=Shiva;integrated security=true;initial catalog=selfjquary15_8_17 "/>
</connectionStrings>

</configuration>

why make the static sqlconnection.

Because-  sql connection do not call in static method. so sql connection make the static.

syntax- static SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString);

Q.why use webmethed.

Because- Client site call, so we use the [Webmethed].

syntax-[WebMethod]

Q.why make static function. 

syntax- public static void Devesh(string A, int B, string C)  

Bescuse- function call is without object create one class to another class, so we make the static method. the function call same as the class name

Note. This function call in ajax methed in url property with aspx page name.

No comments:
Write comments

Contact Form

Name

Email *

Message *

© 2014 Rock Programmer . Designed by Bloggertheme9
Powered by Rock Programmer.