21 Sep 2017

How to insert data into Mysql database using jquery ajax

How to insert record in database using Jquery:-

Create Table:-

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

)

Create 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

use to j query code with ado.net:-

j query in does not use server control only on html control. j query support Json. How to install json 

Aspx page code in j query:-

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

<!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: 'Registration.aspx/Insert',
                type: 'post',
                contentType: 'application/json;charset=utf-8',
                datatype: 'json',
                data: "{A: '" + $("#textname").val() + "', B:'" + $("#textage").val() + "',C: '" + $("#textaddress").val() + "'}",
                success: function () {
                    alert('data is insert !!');
                    Getdata();
                },
                error: function () {
                    alert('data error !!');
               }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>Nmae:</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 code of Jquery:-

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 Jqueryinsertonly
{
    public partial class Registration : System.Web.UI.Page
    {
        static SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DBC"].ConnectionString);
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        [WebMethod]
        public static void Insert(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 file code:-


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

No comments:
Write comments

Contact Form

Name

Email *

Message *

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