Insert data using jQuery AJAX in ASP.Net MVC Razor

   11/5/2021 2:58:18 PM     ASP.Net MVC jQuery AJAX Insert data Add Data Submit Data     0

Share us on:

Linkedin GooglePlus

Hi, i am Shubham Kumar, I am going to explain with example, how to insert data using jQuery AJAX in ASP.Net MVC Razor. 


Here data will be Post from view to Controller with help of jQuery AJAX and inserted Data using Entity Framework in ASP.Net MVC.  

Insert Data from view to controller using jQuery AJAX in ASP.Net MVC Razor

 

Database

I have created tblEmp table, which contains field empId, empName, empCountry.


 CREATE TABLE [dbo].[tblEmp]
   (
       [empId] [int] IDENTITY(1,1) NOT NULL,
       [empName] [varchar](50) NULL,
       [empCountry] [varchar](50) NULL
   )

Controller

In Controller there are two Action methods.

Index and InsertData, i have used Index method for showing index page view. 

i have used InsertData method for inserting record using Entity Framework.  

 
i have posted data from view to Action method InsertData for Inserting data to Database,

 


        public ActionResult Index()
        {
            return View();
        }
        public JsonResult  InsertData(Employee obj)
        {
            string status = string.Empty;
            try
            {
                _context.emp.Add(obj);
                _context.SaveChanges();
                status = "Record inserted successfully.";
            }

            catch (Exception ex)
            {
                status = "!!!there are some problem.";
            }
            return Json(status, JsonRequestBehavior.AllowGet);
        }

 

Model

           I have created Employee model with properties empId, empName, empCountry  

 


    [Table("tblEmp")]
    public class Employee
    {
        [Key]
        public int empId { get; set; }
        public string empName { get; set; }
        public string empCountry { get; set; }
    }

 

View

In View there are two TextBoxes and a Button. i have called jQuery AJAX function submitData on Button click.

When button click, it will call jQuery AJAX function submitData, i will take all textbox value using jQuery and post data to Controller, which contain ActionResult(InsertData),
will insert data using Entity Framework after that it will return success or failure message to ajax success method ,

if data inserted successfully then i will show alert message on success method.


<!DOCTYPE html>
 
<html>
<head>
    <title>Index</title>
</head>
<body>
    <table >
        <tr>
            <td style="width: 155px">
                Emp Name<br/>
                <input type="text" id="txtEmpName" style="width:145px"/>
            </td>
            <td style="width: 155px">
                EmpCountry:<br/>
                <input type="text" id="txtEmpCountry" style="width:145px"/>
            </td>
            <td style="width: 200px">
                <br/>
                <input type="button" id="btnSubmit" onclick="submitData();" value="Submit"/>
            </td>
        </tr>
    </table>
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script type="text/javascript">
        function submitData () {
            var txtEmpName = $("#txtEmpName").val();
            var txtEmpCountry = $("#txtEmpCountry").val();
            var obj = {};
            obj.empName = txtEmpName;
            obj.empCountry = txtEmpCountry;
            $.ajax({
                type: "POST",
                url: "/Home/InsertData",
                data: JSON.stringify(obj),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    alert(data);
                },
                error: function (errormsg) {
                    alert(errormsg);
                }
            });
        }
    </script>
</body>
</html>

 

Output Screen

Output-Screen

 

 

I hope this article will help you to learn, How to insert data using jQuery AJAX in ASP.Net MVC, if you like this article please share Us on

Shubham Kumar

Shubham Kumar

Shubham Kumar is a founder of AspNetBugs, .NET Team Leader. He has very good experience with designing and developing enterprise-scale applications. He is exprience in ASP.NET MVC,ASP.NET C#, ASP.NET Core, AngularJS, Web API, EPPlus, SQL, Entity Framework, JavaScript, jQuery, Kendo, Windows services etc.