Monday, 28 November 2016

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

TechnoGTB November 28, 2016 asp.net mvc tutorial, CRUD, Insert Record, JQuery AJAX

#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

About TechnoGTB
alistarbot is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of alistarbot is to provide the best quality blogger templates.