Monday, 1 December 2014

MVC 4 Razor: Inline Editing in WebGrid || WebGrid with inline editing, updating, cancel and delete the record using JSON AJAX

Hi friends,in this article I will explain about Inline Editing in WebGrid using MVC 4 Razor or  WebGrid with inline editing, updating, cancel and delete the record using JSON AJAX.

In this, toggle command is used to swap the data between the two presentations on a line-by-line basis.Get the userdata and pass in to WebGrid.There are two things in each item one is Display mode and second is Edit mode.we Display all Edit Item is Display none at First Time.when click on Edit Button the Edit Item is Shown.


Add Users table in the ADO.NET Entity Data Model then connectionstring will be added in the web.config file and USER.edmx will be created.

After adding users table ,.edmx file will be like as shown in the below figure.


Model(UserModel.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcInlineEditingWebgrid.Models
{
    public class UserModel
    {
        public static List<USER> getUsers()
        {
            //User is Entity Name in the users.edmx
            UserDBEntities db = new UserDBEntities();
            List<USER> users = new List<USER>();
            users = (from p in db.USERS select p).ToList();
            return users;
        }
    }
}

Controller(UserController.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcInlineEditingWebgrid.Models;

namespace MvcInlineEditingWebgrid.Controllers
{
    public class UserController : Controller
    {
        List<USER> users = null;
        UserDBEntities db = new UserDBEntities();
        public ActionResult Index()
        {
            users = (from p in db.USERS select p).ToList();
            return View(users);
        }

        public ActionResult UpdateUser(USER obj)
        {
            var query = db.USERS.Where(x => x.User_id == obj.User_id).FirstOrDefault();
            query.UserName = obj.UserName;
            query.Gender = obj.Gender;
            query.Address = obj.Address;
            db.SaveChanges();
            ViewBag.msg = "Record Updated Successfully";
            return RedirectToAction("Index");
        }

        public ActionResult DeleteUser(USER obj)
        {
            USER p = db.USERS.SingleOrDefault(x => x.User_id == obj.User_id);
            db.USERS.DeleteObject(p);
            db.SaveChanges();
            ViewBag.msg = "Record Deleted Successfully";
            return RedirectToAction("Index");

        }
    }
}

View(Index.cshtml):
@model IEnumerable<MvcInlineEditingWebgrid.Models.USER>
<script src="../../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('.edit-mode').hide();
        $('.edit-user, .cancel-user').on('click', function () {
            var tr = $(this).parents('tr:first');
            tr.find('.edit-mode, .display-mode').toggle();
        });
        $('.save-user').on('click', function () {
            var tr = $(this).parents('tr:first');
            var UserName = tr.find("#UserName").val();
            var Gender = tr.find("#Gender").val();
            var User_Id = tr.find("#UserID").html();
            var Address = tr.find("#Address").val();

            tr.find('.edit-mode, .display-mode').toggle();
            var UserModel =
              {
                  "User_Id": User_Id,
                  "UserName": UserName,
                  "Gender": Gender,
                  "Address": Address
              };
            $.ajax({
                url: '/User/UpdateUser/',
                data: JSON.stringify(UserModel),
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                }
            });

        });
        $('.delete-user').on('click', function () {
            var tr = $(this).parents('tr:first');
            var UserName = tr.find("#UserName").val();
            var Gender = tr.find("#Gender").val();
            var User_Id = tr.find("#UserID").html();
            var Address = tr.find("#Address").val();
            var UserModel =
              {
                  "User_Id": User_Id,
                  "UserName": UserName,
                  "Gender": Gender,
                  "Address": Address
              };
            $.ajax({
                url: '/User/DeleteUser/',
                data: JSON.stringify(UserModel),
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                }
            });
        });
    })
</script>
<style type="text/css">
    .webGrid
    {
        margin: 4px;
        border-collapse: collapse;
        width: 100%;
        font-family: Tahoma;
    }
    .grid-header
    {
        background-color: #990000;
        font-weight: bold;
        color: White !important;
    }
    .webGrid th a
    {
        color: White;
        text-decoration: none;
    }
    .webGrid th, .webGrid td
    {
        border: 1px solid black;
        padding: 5px;
    }
    .alt
    {
        background-color: #F4EFEF;
    }
    .webGrid th a:hover
    {
        text-decoration: underline;
    }
    .to-the-right
    {
        text-align: right;
    }
</style>
@{
    var grid = new WebGrid(source: Model, canPage: true, defaultSort: "User_Id", rowsPerPage: 3, canSort: true);
}
<h2 style="float: right; padding-right: 40%;">
    @Html.ActionLink("Refresh", "Index", "User")
</h2>
<div id="gridContent" style="padding-right: 40%;">
    @grid.GetHtml(
            tableStyle: "webGrid",
         fillEmptyRows: false,
         alternatingRowStyle: "alt",
         headerStyle: "grid-header",
         footerStyle: "foot-grid",
         mode: WebGridPagerModes.All,
         firstText: "<< First",
         previousText: " < Previous",
         nextText: "Next >",
         lastText: "Last >>",
         caption: "User Details",
         emptyRowCellValue: null,
    columns:
        grid.Columns(
        grid.Column("ID", format: @<text>
        <span class="display-mode">@item.User_Id</span>
        <label id="UserID" class="edit-mode">@item.User_Id</label>
        </text>),
        grid.Column("UserName", "UserName", format: @<text>
        <span class="display-mode">
        <label id="lblName">@item.UserName</label>
        </span>
        <input type="text" id="UserName" value="@item.UserName" class="edit-mode" />
        </text>),
        grid.Column("Gender", "Last Name", format: @<text>
        <span class="display-mode">
        <label id="lblGender">@item.Gender</label>
        </span>
        <input type="text" id="Gender" value="@item.Gender" class="edit-mode" /></text>),
        grid.Column("Address", "Address", format: @<text>
        <span class="display-mode">
        <label id="lblAddress">@item.Address</label>
        </span>
       <input type="text" id="Address" value="@item.Address" class="edit-mode" />
       </text>),
        grid.Column("Action", format: @<text>
    <button class="edit-user display-mode">  Edit</button>
    <button class="delete-user display-mode"> Delete</button>
    <button class="save-user edit-mode">  Save</button>
    <button class="cancel-user edit-mode"> Cancel</button>
    </text>, canSort: false)
    ))
</div>

The output of the above code as shown in the below figure.


When you click on Edit button then you can able to edit the values


Change the values and click on Save button then values will updated.

You can download the above code by clicking on the below Download image.
"If you like my blog or articles, you can appreciate by leaving your comments or Liking my Facebook page Aspdotnet-kishore, following on Google+ Aspdotnet-Kishore, Twitter on AspdotnetKishore, Linked in Aspdotnet-Kishore, stumbling my posts on stumble upon and subscribing on RSSfeed Aspdotnet-Kishore for free updates directly to your Email inbox . Watch my blog for more articles."

3 comments:

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.