Part 14 - Insert data into database using jQuery AJAX in Asp.net MVC application

#Controller Code

using MVCTutorial.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCTutorial.Controllers
{
    public class TestController : Controller
    {

        public ActionResult Index()
        {
            MVCTutorialEntities db = new MVCTutorialEntities();

            List<Department> list = db.Departments.ToList();
            ViewBag.DepartmentList = new SelectList(list, "DepartmentId", "DepartmentName");

            return View();
        }


        [HttpPost]
        public ActionResult Index(EmployeeViewModel model)
        {
            try
            {

                MVCTutorialEntities db = new MVCTutorialEntities();
                List<Department> list = db.Departments.ToList();
                ViewBag.DepartmentList = new SelectList(list, "DepartmentId", "DepartmentName");

                Employee emp = new Employee();
                emp.Address = model.Address;
                emp.Name = model.Name;
                emp.DepartmentId = model.DepartmentId;

                db.Employees.Add(emp);
                db.SaveChanges();

                int latestEmpId = emp.EmployeeId;


                Site site = new Site();
                site.SiteName = model.SiteName;
                site.EmployeeId = latestEmpId;

                db.Sites.Add(site);
                db.SaveChanges();
            }
            catch (Exception ex)
            {

                throw ex;
            }

            return View(model);
        }


    }
}

  
#Model code (EmployeeViewModel)

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace MVCTutorial.Models
{
    public class EmployeeViewModel
    {
        public int EmployeeId { get; set; }

        [Required(ErrorMessage = "Enter Name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Enter Department")]
        public Nullable<int> DepartmentId { get; set; }

        [Required(ErrorMessage = "Enter Address")]
        public string Address { get; set; }

        //Custom attribute
        public string DepartmentName { get; set; }
        public bool Remember { get; set; }
        public string SiteName { get; set; }
       
    }
}

 # View Page (Index.cshtml)

@model MVCTutorial.Models.EmployeeViewModel
@{
    ViewBag.Title = "Index";
    Layout = null;
}

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />



<div class="container" style="width:40%;margin-top:2%">

    <form id="myForm">

        @Html.DropDownListFor(model => model.DepartmentId, ViewBag.DepartmentList as SelectList, "--select--", new { @class = "form-control" })

        @Html.TextBoxFor(model => model.Name, new { @class = "form-control", @placeholder = "Name" })

        @Html.TextBoxFor(model => model.Address, new { @class = "form-control", @placeholder = "Address" })

        @Html.TextBoxFor(model => model.SiteName, new { @class = "form-control", @placeholder = "SiteName" })

        <input type="reset" value="Submit" class="btn btn-block btn-primary" id="btnSubmit" />

    </form>

    <div style="text-align:center;display:none" id="loaderDiv">
        <img src="~/Content/InternetSlowdown_Day.gif" width="150" />
    </div>
</div>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function () {

        $("#btnSubmit").click(function () {
            debugger
            $("#loaderDiv").show();

            var data = $("#myForm").serialize();

            $.ajax({

                type: "POST",
                url: "/Test/Index",
                data: data,
                success: function (response) {
                    $("#loaderDiv").hide();
                    alert("you are done");
                }

            })
        })


    })


</script>

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

#Database Script

USE [MVCTutorial]
GO
/****** Object:  Table [dbo].[Department]    Script Date: 27-11-2016 00:28:17 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Department](
 [DepartmentId] [int] IDENTITY(1,1) NOT NULL,
 [DepartmentName] [nvarchar](100) NULL,
 CONSTRAINT [PK_Department] PRIMARY KEY CLUSTERED 
(
 [DepartmentId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
/****** Object:  Table [dbo].[Employee]    Script Date: 27-11-2016 00:28:18 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Employee](
 [EmployeeId] [int] IDENTITY(1,1) NOT NULL,
 [Name] [varchar](50) NULL,
 [DepartmentId] [int] NULL,
 [Address] [varchar](150) NULL,
 CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED 
(
 [EmployeeId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
SET ANSI_PADDING OFF
GO
/****** Object:  Table [dbo].[Sites]    Script Date: 27-11-2016 00:28:18 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Sites](
 [SiteId] [int] IDENTITY(1,1) NOT NULL,
 [EmployeeId] [int] NULL,
 [SiteName] [nvarchar](150) NULL,
 CONSTRAINT [PK_Sites] PRIMARY KEY CLUSTERED 
(
 [SiteId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
SET IDENTITY_INSERT [dbo].[Department] ON 

GO
INSERT [dbo].[Department] ([DepartmentId], [DepartmentName]) VALUES (1, N'IT')
GO
INSERT [dbo].[Department] ([DepartmentId], [DepartmentName]) VALUES (2, N'QA')
GO
INSERT [dbo].[Department] ([DepartmentId], [DepartmentName]) VALUES (3, N'Development ')
GO
INSERT [dbo].[Department] ([DepartmentId], [DepartmentName]) VALUES (4, N'Marketing')
GO
SET IDENTITY_INSERT [dbo].[Department] OFF
GO
SET IDENTITY_INSERT [dbo].[Employee] ON 

GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address]) VALUES (1, N'Ashish', 1, N'India')
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address]) VALUES (2, N'John', 2, N'London')
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address]) VALUES (3, N'Methew', 3, N'NewYork')
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address]) VALUES (4, N'Brano', 4, N'France')
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address]) VALUES (5, N'Smith', 1, N'London')
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address]) VALUES (6, N'Sara', 4, N'New york')
GO
SET IDENTITY_INSERT [dbo].[Employee] OFF
GO
SET IDENTITY_INSERT [dbo].[Sites] ON 

GO
INSERT [dbo].[Sites] ([SiteId], [EmployeeId], [SiteName]) VALUES (1, 1005, N'google.com')
GO
INSERT [dbo].[Sites] ([SiteId], [EmployeeId], [SiteName]) VALUES (2, 1006, N'www.technotips.com')
GO
SET IDENTITY_INSERT [dbo].[Sites] OFF
GO
ALTER TABLE [dbo].[Employee]  WITH CHECK ADD  CONSTRAINT [FK_Employee_Department] FOREIGN KEY([DepartmentId])
REFERENCES [dbo].[Department] ([DepartmentId])
GO
ALTER TABLE [dbo].[Employee] CHECK CONSTRAINT [FK_Employee_Department]
GO
ALTER TABLE [dbo].[Sites]  WITH CHECK ADD  CONSTRAINT [FK_Sites_Employee] FOREIGN KEY([EmployeeId])
REFERENCES [dbo].[Employee] ([EmployeeId])
GO
ALTER TABLE [dbo].[Sites] CHECK CONSTRAINT [FK_Sites_Employee]
GO

   

All Code Factory

• Part 11- Insert data into database
• Part 12- Server side and clientside validation
• Part 13- Insert data into multiple tables
• Part 14- Insert data into database using JQuery
• Part 15- How to create Bootstrap Popup
• Part 16- Delete operation in Asp.net MVC
• Part 17- What is Partial View in Asp.net MVC
• Part 18- How to call Partial View using JQuery
• Part 19- Difference between Html.Partial() and Html.RenderPartial()
• Part 20- AddEdit Record using Partial View
• Part 21- Layout View in Asp.net MVC
• Part 22- Style.Render and Script.Render
• Part 23 - RenderBody, RenderSection and RenderPage.
• Part 24- Divide Page into several component using Bootstrap
• Part 25- Refresh Entity framework after any modification in database table
• Part 26- Set foreign key relationnship in database tables
• Part 27- Create Rgistration Page
• Part 28- Create Login Page
• Part 29- Client Side Validation using JQuery
• Part 30- How to return multiple Model to a View (Interview)
• Part 31- How to create Dynamic Menu using Partial View
• Part 32- Preview Image Before Uploading
• Part 33- Upload and Display Image using JQuery
• Part 34-Upload Image to SQL Server and Display
• Part 35- Download Image from URL and Upload to SQL Server
• Part 36- Cascading DropdownList
• Part 37- Implement Search Functionality
• Part 38- Attribute Routing in MVC
• Part 39- How to display multiple checkbox checked data
• Part 40- How to send multiple checkbox checked value to Server
• Part 41- How to create responsive sortable Image Gallery
• Part 42 - How to implement JQuery Autocomplete Textbox
• Part 43 - How to send Emails in Asp.net MVC
• Part 44 - Integrate JQuery DataTables plugin
• Part 45 - Display record from database using JQuery Datatable
• Part 46- Add Edit Record using JQuery DataTable
• Part 47 - JQuery DataTables Server -side Processing
• Part 48 - JQuery server side processing -Search functionality
• Part 49 - Pagination using Skip and Take method
• Part 50 - Refresh DataTable After Performing Any Action
• Part 51 - Send OTP ( One Time Password ) to any mobile device
• Part 52 - How to use AutoMapper in Asp.net MVC
• Part 53 - How to use AutoMapper ForMember Method
• Part 54 - Repository Pattern - 1 - Adding Business Layer
• Part 55 - Repository Pattern - 2 - Adding Domain Layer
• Part 56 - Repository Pattern - 3 - Dependency Injection
• Part 57- Repository Pattern- 4 - Adding Data Access Layer
• Part 58 - Repository Pattern - 5 - Setting Up Generic Repository
• Part 59 - Display Record using repository pattern
• Part 60 - Add Edit Record using Repository Pattern