Modal Popup Example for insert Upadate Delete in popup in MVC4

Description:-

            In this Example we explain that How to Create Crud(create,Read,update,Delete) operation in Modal Popup in Mvc4 Application. Previous time we Explain a lot of example of Mvc now we Create a DML operation in Gridview using Modal popup in MVC Application.

First you have to create a Table name like customer as following structure:

 Here is Some Image or Scrren shot of this Application at runtime are as follows:-

1. Validation Screen Shot:-

Create Operation,Update,Delete operation:-

In this Example we use Jquery For Creating a Insert upadate Delete Operation in Modal Popup.and we Create a Three Modal popup for Create and Edit,Upade, Delete. When user Create an Create link the new Popup windows is Appear with Creating a Form Design of Craete record same Process for the Edit Update and Delete Operation.

Implement Remember Me functionality using CheckBox ASP.Net 

set WaterMark Text in PDF using itextsharp in C#

How to set Default Button in MVC Web Form Application 

How to Bind XML File data to Treeview in asp.net

JQuery datepicker calender with Dropdown month and year in asp.net.

To Download The Complete Project Click the below Download Image Link


Step 1:- First you to Add Linq to Sql class means Dbml file and Add the customer table in it.

Step 2:- Add the customerModel class in Model Folder or Direcory and write the Following Code.


customerModel.cs:-

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.ComponentModel.DataAnnotations;

using System.Web.Mvc;

using System.Text.RegularExpressions;

using Mvc4_CRUD_jQueryDialog.Models;

//Required for custom paging

using System.Linq.Expressions;

namespace Mvc4_CRUD_jQueryDialog.Models

{

    public class ModelServices : IDisposable

    {

        private readonly DataEntities entities = new DataEntities();

        DataClasses1DataContext dc = new DataClasses1DataContext();

        public IEnumerable<customer> GetCustomer()

        {

            return dc.customers.ToList();

           // return entities.Customers.ToList();

        }

        //For Custom Paging

        public IEnumerable<customer> GetCustomerPage(int pageNumber, int pageSize, string searchCriteria)

        {

            if (pageNumber < 1)

                pageNumber = 1;

            return dc.customers

             // .OrderBy(searchCriteria)

              .Skip((pageNumber - 1) * pageSize)

              .Take(pageSize)

              .ToList();

        }

        public int CountCustomer()

        {

            return dc.customers.Count();

        }

        public void Dispose()

        {

            entities.Dispose();

        }

        //For Edit

        public customer GetCustomer(int mCustID)

        {

            return dc.customers.Where(m => m.c_id == mCustID).FirstOrDefault();

        }

        public bool CreateCustomer(customer mCustomer)

        {

            try

            {

                dc.customers.InsertOnSubmit(mCustomer);

                dc.SubmitChanges();

              

                return true;

            }

            catch (Exception mex)

            {

                return false;

            }

        }

        public bool UpdateCustomer(customer mCustomer)

        {

            try

            {

                customer data = dc.customers.Where(m => m.c_id == mCustomer.c_id).FirstOrDefault();

                data.c_address = mCustomer.c_address;

              

                data.c_mobile = mCustomer.c_mobile;

                data.c_name = mCustomer.c_name;

                dc.SubmitChanges();

              

                return true;

            }

            catch (Exception mex)

            {

                return false;

            }

        }

        public bool DeleteCustomer(int mCustID)

        {

            try

            {

                customer data = dc.customers.Where(m => m.c_id == mCustID).FirstOrDefault();

                dc.customers.DeleteOnSubmit(data);

                dc.SubmitChanges();

            

                return true;

            }

            catch (Exception mex)

            {

                return false;

            }

        }

    }

    //public enum SortDirection

    //{

    //    Ascending,

    //    Descencing

    //}

    public class PagedCustomerModel

    {

        public int TotalRows { get; set; }

        public IEnumerable<customer> Customer { get; set; }

        public int PageSize { get; set; }

    }

    public class customerModel

    {

        [ScaffoldColumn(false)]

        public int c_id { get; set; }

        [Required(ErrorMessage = "Please Enter Name")]

        public string c_name { get; set; }

        [Required(ErrorMessage = "Please Enter Address")]

        [UIHint("Multiline")]

        public string c_address { get; set; }

        [Required(ErrorMessage = "Please Enter Contact No")]

        public string c_mobile { get; set; }

    }

}

HomeController:-

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Mvc4_CRUD_jQueryDialog.Models;

namespace Mvc4_CRUD_jQueryDialog.Controllers

{

    public class HomeController : Controller

    {

        ModelServices mobjModel = new ModelServices();

        public ActionResult Index()

        {

            return View();

        }

        public ActionResult Demo()

        {

            Response.Redirect("http://www.dotnet-tricks.com/Tutorial/mvclist");

            return View();

        }

        //Bind Web Grid and also do paging

        public ActionResult WebGrid(int page = 1, string sort = "c_name", string sortDir = "ASC")

        {

            const int pageSize = 5;

            var totalRows = mobjModel.CountCustomer();

            sortDir = sortDir.Equals("desc", StringComparison.CurrentCultureIgnoreCase) ? sortDir : "asc";

            var validColumns = new[] { "c_id", "c_name", "c_address", "c_mobile" };

            if (!validColumns.Any(c => c.Equals(sort, StringComparison.CurrentCultureIgnoreCase)))

                sort = "custid";

            var customer = mobjModel.GetCustomerPage(page, pageSize, "it." + sort + " " + sortDir);

            var data = new PagedCustomerModel()

            {

                TotalRows = totalRows,

                PageSize = pageSize,

                Customer = customer

            };

            return View(data);

        }

        public ActionResult Create()

        {

            if (Request.IsAjaxRequest())

            {

                customerModel cust = new customerModel();

                ViewBag.IsUpdate = false;

                return View("Add_Customer", cust);

              

            }

            else

                return View();

        }

        public ActionResult View(int id)

        {

            var data = mobjModel.GetCustomer(id);

            if (Request.IsAjaxRequest())

            {

                customerModel cust = new customerModel();

                cust.c_id = data.c_id;

                cust.c_name = data.c_name;

                cust.c_address = data.c_address;

                cust.c_mobile = data.c_mobile;

                return View("_ViewCustomer", cust);

            }

            else

                return View(data);

        }

        public ActionResult Edit(int id)

        {

            var data = mobjModel.GetCustomer(id);

            if (Request.IsAjaxRequest())

            {

                customerModel cust = new customerModel();

                cust.c_id = data.c_id;

                cust.c_name = data.c_name;

                cust.c_address = data.c_address;

                cust.c_mobile = data.c_mobile;

                ViewBag.IsUpdate = true;

                return View("_Customer", cust);

            }

            else

                return View(data);

        }

        public ActionResult Delete(int id)

        {

            bool check = mobjModel.DeleteCustomer(id);

            var data = mobjModel.GetCustomer();

            return RedirectToAction("WebGrid");

        }

        [HttpPost]

        public ActionResult CreateEditCustomer(customerModel mCust, string Command)

        {

            // Validate the model being submitted

            if (!ModelState.IsValid)

            {

                return PartialView("_Customer", mCust);

            }

            else if (Command == "Save")

            {

                customer mobjcust = new customer();

                mobjcust.c_id = mCust.c_id;

                mobjcust.c_address = mCust.c_address;

                mobjcust.c_mobile = mCust.c_mobile;

                mobjcust.c_name = mCust.c_name;

                bool check = mobjModel.CreateCustomer(mobjcust);

                if (check)

                {

                    TempData["Msg"] = "Data has been saved succeessfully";

                    ModelState.Clear();

                    return RedirectToAction("WebGrid", "Home");

                }

            }

            else if (Command == "Update")

            {

                customer mobjcust = new customer();

                mobjcust.c_id = mCust.c_id;

                mobjcust.c_address = mCust.c_address;

                mobjcust.c_mobile = mCust.c_mobile;

                mobjcust.c_name = mCust.c_name;

                bool check = mobjModel.UpdateCustomer(mobjcust);

                if (check)

                {

                    TempData["Msg"] = "Data has been updated succeessfully";

                    ModelState.Clear();

                    return RedirectToAction("WebGrid", "Home");

                }

            }

            return PartialView("_Customer");

        }

    }

}

WebGrid.cshtml:-

@model Mvc4_CRUD_jQueryDialog.Models.PagedCustomerModel

@{

    ViewBag.Title = "Web Grid";

    WebGrid grid = new WebGrid(rowsPerPage: Model.PageSize);

    grid.Bind(Model.Customer,

              autoSortAndPage: false,

              rowCount: Model.TotalRows

    );

}

<link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("#CreateCustomer").live("click", function (e) {

            // e.preventDefault(); use this or return false

            var url = $(this).attr('href');

            $("#dialog-edit").dialog({

                title: 'Create Customer',

                autoOpen: false,

                resizable: false,

                height: 355,

                width: 400,

                show: { effect: 'drop', direction: "up" },

                modal: true,

                draggable: true,

                open: function (event, ui) {

                    $(this).load(url);

                },

                close: function (event, ui) {

                    $(this).dialog('close');

                }

            });

            $("#dialog-edit").dialog('open');

            return false;

        });

      

        $(".editDialog").live("click", function (e) {

            // e.preventDefault(); use this or return false

            var url = $(this).attr('href');

            $("#dialog-edit").dialog({

                title: 'Edit Customer',

                autoOpen: false,

                resizable: false,

                height: 355,

                width: 400,

                show: { effect: 'drop', direction: "up" },

                modal: true,

                draggable: true,

                open: function (event, ui) {

                    $(this).load(url);

                },

                close: function (event, ui) {

                    $(this).dialog('close');

                }

            });

            $("#dialog-edit").dialog('open');

            return false;

        });

        $(".confirmDialog").live("click", function (e) {

            // e.preventDefault(); use this or return false

            var url = $(this).attr('href');

            $("#dialog-confirm").dialog({

                autoOpen: false,

                resizable: false,

                height: 170,

                width: 350,

                show: { effect: 'drop', direction: "up" },

                modal: true,

                draggable: true,

                buttons: {

                    "OK": function () {

                        $(this).dialog("close");

                        window.location = url;

                    },

                    "Cancel": function () {

                        $(this).dialog("close");

                    }

                }

            });

            $("#dialog-confirm").dialog('open');

            return false;

        });

        $(".viewDialog").live("click", function (e) {

            // e.preventDefault(); use this or return false

            var url = $(this).attr('href');

            $("#dialog-view").dialog({

                title: 'View Customer',

                autoOpen: false,

                resizable: false,

                height: 250,

                width: 400,

                show: { effect: 'drop', direction: "up" },

                modal: true,

                draggable: true,

                open: function (event, ui) {

                    $(this).load(url);

                },

                buttons: {

                    "Close": function () {

                        $(this).dialog("close");

                    }

                },

                close: function (event, ui) {

                    $(this).dialog('close');

                }

            });

            $("#dialog-view").dialog('open');

            return false;

        });

        $("#btncancel").live("click", function (e) {

           // location.reload(true);

            $("#dialog-edit").dialog('close');

        });

    });  

</script>

<h2>

    CRUD Operations using jQuery dialog and WebGrid</h2>

<br />

<div style="color: Green; font-weight: bold">

    @TempData["msg"]

</div>

<br />

@grid.GetHtml(

    fillEmptyRows: false,

    alternatingRowStyle: "alternate-row",

    headerStyle: "grid-header",

    footerStyle: "grid-footer",

    mode: WebGridPagerModes.All,

            firstText: "<< First",

            previousText: "< Prev",

            nextText: "Next >",

            lastText: "Last >>",

    columns: new[] {

       

        grid.Column("c_id",

                    header: "c_id", canSort: false),

        grid.Column("c_name",

                    header: "c_name",

                    format: @<text>

@Html.ActionLink((string)item.c_name, "View", new { id = item.c_id }, new { @class = "viewDialog" })</text>

                    ),

        grid.Column("c_address"),

        grid.Column("c_mobile",

                    header: "c_mobile"

        ),

        grid.Column("",

                    header: "Actions",

                    format: @<text>

@Html.ActionLink("Edit", "Edit", new { id = item.c_id }, new { @class = "editDialog"/*, data_dialog_id = "edit-Dialog"*/ })

|

@Html.ActionLink("Delete", "Delete", new { id = item.c_id }, new { @class = "confirmDialog"})

</text>

        )

})

<br />

<a id="CreateCustomer" href="..\Home\Create">Create Customer</a>

<div id="dialog-confirm" style="display: none">

    <p>

        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>

        Are you sure to delete ?

    </p>

</div>

<div id="dialog-edit" style="display: none">

</div>

<div id="dialog-view" style="display: none">

 

</div>

@*<div id="dialog-add" style="display: none">

 

</div>*@

Index.cshtml:-

@{

    ViewBag.Title = "Dot Net Tricks - MVC4 CRUD Operations Demo";

}

@section featured {

    <section class="featured">

        <div class="content-wrapper">

            <hgroup class="title">

                <h1>@ViewBag.Title</h1>

              

            </hgroup>

            <p>

                To learn more about ASP.NET MVC4 visit

                <a href="http://aspsolutionkirit.blogspot.in" title="ASP.NET MVC4 Tutorial">All Example of Asp.Net and MVC</a>.

              

            </p>

        </div>

    </section>

}

<div style="height: 320px;">

    &nbsp;</div>

  _Customer.cshtml:-

@model Mvc4_CRUD_jQueryDialog.Models.customerModel

@{ 

    Layout = null;

}

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

@*@using (Ajax.BeginForm("EditCustomer", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "edit-Dialog" }))*@

@using (Html.BeginForm("CreateEditCustomer", "Home", "POST"))

{ 

    <fieldset>

        <legend>Person</legend>

       @* <div style="color: Green; font-weight: bold">

            @ViewBag.Msg

        </div>*@

        @if (ViewBag.IsUpdate == true)

        {

            @Html.HiddenFor(model => model.c_id)

        }

        <div class="editor-label">

            @Html.LabelFor(model => model.c_name)

        </div>

        <div class="editor-field">

           

            @Html.EditorFor(model => model.c_name)

            @Html.ValidationMessageFor(model => model.c_name)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.c_address)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.c_address)

            @Html.ValidationMessageFor(model => model.c_address)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.c_mobile)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.c_mobile)

            @Html.ValidationMessageFor(model => model.c_mobile)

        </div>

        <br />

        <div style="float: right">

            @if (ViewBag.IsUpdate == true)

            {

                <button type="submit" id="btnUpdate" name="Command" value="Update" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">

                    <span class="ui-button-text">Update</span></button>

            }

            else

            {

                <button type="submit" id="btnSave" name="Command" value="Save" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">

                    <span class="ui-button-text">Save</span></button>

            }

            &nbsp; &nbsp;

            <button type="button" id="btncancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">

                <span class="ui-button-text">Cancel</span></button>

        </div>

    </fieldset>

}

_ViewCustomer.cshtml:

@model Mvc4_CRUD_jQueryDialog.Models.customerModel

@{

    Layout = null;

}

@using (@Html.BeginForm())

{ 

    <fieldset>

        <legend>Customer</legend>

        <div class="editor-label">

            @Html.LabelFor(model => model.c_name)

        </div>

        <div class="editor-field">

            @Html.DisplayTextFor(model => model.c_name)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.c_address)

        </div>

        <div class="editor-field">

            @Html.DisplayTextFor(model => model.c_address)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.c_mobile)

        </div>

        <div class="editor-field">

            @Html.DisplayTextFor(model => model.c_mobile)

        </div>

    </fieldset>

}

_Message.cshtml:-

@{

    Layout = null;

}

<p>Your data has been updated</p>

<p><a href="javascript:void(0);" class="close">Close Window</a></p>