Home > DeveloperSection > Articles > Editable WebGrid in Asp.Net MVC

Editable WebGrid in Asp.Net MVC


ASP.Net ASP.Net 
Ratings:
0 Comment(s)
 10704  View(s)
Rate this:

Editable WebGrid in Asp.Net MVC

In this article, I’m explaining how to create an editable webgrid in asp.net mvc.

First create an asp.net mvc 4 web application:

 Editable WebGrid in Asp.Net MVC

 

Now create a model named “UserModel” like this:

public class UserModel

    {

        public int ID { getset; }

        public string Name { getset; }

        public string SurName { getset; }

 

        public static List<UserModel> getUsers()

        {

            List<UserModel> users = new List<UserModel>()

            {

                new UserModel (){ ID=1, Name="Mark", SurName="David" },

                new UserModel (){ ID=2, Name="Steve", SurName="Benson" },

                new UserModel (){ ID=3, Name="Matt", SurName="Damon" },

                new UserModel (){ ID=4, Name="Bill", SurName="Johnson" },

                new UserModel (){ ID=5, Name="James", SurName="Bond" },

            };

            return users;

        }

   }

 

Next create a controller named “UserController” and add action method like this:

public class UserController : Controller

    {

        public ActionResult Index()

        {

            List<UserModel> users = UserModel.getUsers();

            return View(users);

        }

 

        public JsonResult ChangeUser(UserModel model)

        {

                      string message = "Success";

            return Json(message, JsonRequestBehavior.AllowGet);

        }

    }

Now add a view which will be strongly typed like this:

@model List<EditableWebgrid.Models.UserModel>

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

 

<style type="text/css">

    .edit-mode { }

    .edit-user{}

    .edit-user display-mode{}

    .save-user edit-mode{}

    .display-mode{}

    .cancel-user{}

    .webgrid-table

    {

        font-familyArial,Helvetica,sans-serif;

        font-size14px;

        font-weightnormal;

        width650px;

        displaytable;

        border-collapsecollapse;

        bordersolid px #C5C5C5;

        background-colorwhite;

    }

    .webgrid-table tdth

    {

        border1px solid #C5C5C5;

        padding3px 7px 2px;

    }

    .webgrid-header.webgrid-header a

    {

        background-color#E3E3E3;

        colorblack;

        text-alignleft;

        text-decoration:none;

    }

    .webgrid-footer

    {

    }

    .webgrid-row-style

    {

        padding3px 7px 2px;

    }

    .webgrid-alternating-row

    {

        background-color#F5F5F5;

        padding3px 7px 2px;

    }

    .col1Width

    {

        width50px;

    }

    .col2Width

    {

        width200px;

    }

</style>

 

<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 Name = tr.find("#Name").val();

            var SurName = tr.find("#SurName").val();

            var UserID = tr.find("#UserID").html();

            tr.find("#lblName").text(Name);

            tr.find("#lblSurName").text(SurName);

            tr.find('.edit-mode, .display-mode').toggle();

            var UserModel =

            {

                "ID": UserID,

                "Name": Name,

                "SurName": SurName

            };

            $.ajax({

                url: '/User/ChangeUser/',

                data: JSON.stringify(UserModel),

                type: 'POST',

                contentType: 'application/json; charset=utf-8',

                success: function (data) {

                    alert(data);

                }

            });

 

        });

    })

</script>

 

<h2>Student</h2>

@{

    var grid = new WebGrid(Model);

}

 

<div  id="gridContent" style=" padding:20px" >

@grid.GetHtml(

        tableStyle: "webgrid-table",

        headerStyle: "webgrid-header",

        footerStyle: "webgrid-footer",

        alternatingRowStyle: "webgrid-alternating-row",

        selectedRowStyle: "webgrid-selected-row",

        rowStyle: "webgrid-row-style",

        mode: WebGridPagerModes.All,

        columns:

            grid.Columns(

             grid.Column("ID", format: @<text> 

<span  class="display-mode">@item.ID </span>

<label id="UserID" class="edit-mode">@item.ID</label>

</text>, style: "col1Width" ),

             grid.Column("Name""Name", format: @<text> 

<span  class="display-mode"> <label id="lblName"  >@item.Name</label>

</span>

<input type="text" id="Name" value="@item.Name" class="edit-mode" />

</text>, style: "col2Width"),

             grid.Column("SurName""Sur Name", format: @<text>

<span  class="display-mode"> <label id="lblSurName">@item.SurName</label> </span> 

<input type="text" id="SurName" value="@item.SurName" class="edit-mode" />

</text>, style: "col2Width"),

             grid.Column("Action", format: @<text>

                                <button class="edit-user display-mode" >Edit</button>

                                <button class="save-user edit-mode"  >Save</button>

                                <button class="cancel-user edit-mode" >Cancel</button>

                            </text>,  style: "col3Width" , canSort: false)

           ))

 

 

Output

Now run the application:

Editable WebGrid in Asp.Net MVC

When you click on the edit button:

Editable WebGrid in Asp.Net MVC

Change the value according to your need and click on save button to save it:

Editable WebGrid in Asp.Net MVC

Editable WebGrid in Asp.Net MVC


Don't want to miss updates? Please click the below button!

Follow MindStick