Thursday, December 1, 2016

Part 15 - How to create a bootstrap popup (bootstrap modal) and insert data using JQuery in ASP.NET MVC




In this video, You will  find the way to insert data  using bootstrap popup(modal). Before copying below code, I recommend you to watch above video completely. Now a days, every website using a popup to insert/ update/delete record as its easier to save multiple record without navigating to different page (see example: Add/Edit record using bootstrap popup). Bootstrap has provided an attractive popup or modal which is pretty cool and easy to use. 

 #Controller Code

 Add a controller named "Test" and replace everything with below code. In below code, you will find two methods
a) Index () : This method will return all employees records.
b) Index (EmployeeViewModel model): This method will insert employee record in Employee table and Site record in Site table.

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();
                Return View ();
           }
       catch (Exception ex)
       {
        throw ex;
       }           
        
    }
}
  
#Model code (EmployeeViewModel)

 Right click on your model folder and add a class. Give name"EmployeeViewModel" and click ok button. Replace content with below code, 

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)
Right click on your controller' s Index method and add a view. After adding view, replace content with below code.

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

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>


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

    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</a>

    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                    <h3 class="modal-title">Technotips MVC</h3>

                </div>
                <div class="modal-body">

                    <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" })


                    </form>

                    <div style="text-align:center;display:none" id="loaderDiv">
                        <img src="~/Content/InternetSlowdown_Day.gif" width="150" /> @* //put any image in content folder*@
                    </div>


                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
                    <input type="reset" value="Submit" class="btn btn-success" id="btnSubmit" />
                    
                </div>

            </div>

        </div>

    </div>

</div>

<script>

    $(document).ready(function () {


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

            $("#loaderDiv").show();

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

            $.ajax({

                type: "POST",
                url:"/Test/Index",
                data: myformdata,
                success: function () {
                    $("#loaderDiv").hide();
                    $("#myModal").modal("hide");
                  
                }
                
            })
        })

    })

   
</script>

#Database Script

 Add a database named "MVCTutorial" in your local db. Then execute below 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

By at
Labels: , , , ,

4 comments:

Tauhidul Islam said...

I have a question, in test controller we have two Index action, and we are calling it from ajax then how it's understand which Index we are calling??

December 23, 2017 at 2:24 AM
Unknown said...

type is post in ajax call then it will call post index method

May 26, 2018 at 1:37 PM
Unknown said...

Hi I want a confirmation pop up after submitting the form.Here it is in the modal you are writing the form but I want it otherwise kindly help.

November 27, 2018 at 6:09 PM
Nina Athena said...

Thank you for sharing this piece! It is very helpful and informative. Would like to see more updates from you.

Melbourne Web Developer

February 5, 2020 at 9:44 PM

Post a Comment

Subscribe to: Post Comments (Atom)