MVC JQUERY INSERT DATA DATABASE

 

Post Data To Controller Using jQuery Ajax in ASP.NET MVC

 

STEP-1 

CREATE NEW MVC  APPLICATION

 

STEP-2

CREATE DATABASE

 

 

 

 

 

 

 

 

 

STEP-3

Create Model  class ( EmpModel.cs)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace WebApplication1.Models

{

    public class EmpModel

    {

 

        public string Name { get; set; }

        public string City { get; set; }

        public string Address { get; set; }

 

    }

}

 

 

 

 

 

 

 

Step-4  Create Controller  ( EMPController )

Create controller and connect sqlclient / model library

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Data.SqlClient;

using WebApplication1.Models;

 

namespace WebApplication1.Controllers

{

    public class EMPController : Controller

    {

        private SqlConnection con;

 

        public ActionResult AddEmployee()  // Right click add view

        {

 

            return View();

        }

 

 

 

 

 

 

 

 

        //Post method to add details

        [HttpPost]

        public ActionResult AddEmployee(EmpModel obj)

        {

            AddDetails(obj);

 

            return View();

        }

 

        //To Handle connection related activities

        private void connection()

        {

            string constr =@"path";

            con = new SqlConnection(constr);

 

        }

 

        //To add Records into database

        private void AddDetails(EmpModel obj)

        {

            connection();

            string k1 = "insert into demo(name,city,address)values(@name1,@city1,@address1)";

            SqlCommand com = new SqlCommand(k1, con);

            com.Parameters.AddWithValue("@name1", obj.Name);

            com.Parameters.AddWithValue("@city1", obj.City);

            com.Parameters.AddWithValue("@address1", obj.Address);

            con.Open();

            com.ExecuteNonQuery();

            con.Close();

 

 

        }

 

    }

}

 

 

 

 

 

 

 

 

 

Step -4  Create empty View

 

@{

    Layout = null;

}

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>

 

 

<script>

    $(document).ready(function () {

        $("#btnSave").click(function () {

            $.ajax(

            {

                type: "POST", //HTTP POST Method

                url: "/EMP/AddEmployee", // Controller/View

                data: { //Passing data

                    Name: $("#txtName").val(), //Reading text box values using Jquery

                    City: $("#txtcity").val(),

                    Address: $("#txtAddress").val()

                }

 

            });

 

        });

    });

 

</script>

<br /><br />

 

<fieldset>

 

 

    <div class="form-horizontal">

        <div class="editor-label">

            Name

        </div>

        <div class="editor-label">

            <input type="text" id="txtName" />

        </div>

 

 

 

        <div class="editor-label">

            City

        </div>

        <div class="editor-label">

            <input type="text" id="txtcity" />

        </div>

 

 

 

 

 

 

 

 

        <div class="editor-label">

            Address

        </div>

        <div class="editor-label">

            <input type="text" id="txtAddress" />

        </div>

 

      

        <div class="editor-label">

            <br />

            <input class="btn-default" type="button" id="btnSave" value="Save" />

        </div>

    </div>

 

</fieldset>