---
title: "Editable WebGrid in Asp.Net MVC"  
description: "In this article, I’m explaining how to create an editable webgrid in asp.net mvc."  
author: "Sumit Kesarwani"  
published: 2014-06-04  
updated: 2020-09-13  
canonical: https://www.mindstick.com/articles/1411/editable-webgrid-in-asp-dot-net-mvc  
category: "asp.net"  
tags: ["asp.net"]  
reading_time: 1 minute  

---

# 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](http://www.mindstick.com/MindStickArticle/5c9087fd-7c83-4358-a972-09aff67fc416/Images/image001.png)

Now create a model named “UserModel” like this:

```
public class UserModel    {        public int ID { get; set; }        public string Name { get; set; }        public string SurName { get; set; }         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-family: Arial,Helvetica,sans-serif;        font-size: 14px;        font-weight: normal;        width: 650px;        display: table;        border-collapse: collapse;        border: solid px #C5C5C5;        background-color: white;    }    .webgrid-table td, th    {        border: 1px solid #C5C5C5;        padding: 3px 7px 2px;    }    .webgrid-header, .webgrid-header a    {        background-color: #E3E3E3;        color: black;        text-align: left;        text-decoration:none;    }    .webgrid-footer    {    }    .webgrid-row-style    {        padding: 3px 7px 2px;    }    .webgrid-alternating-row    {        background-color: #F5F5F5;        padding: 3px 7px 2px;    }    .col1Width    {        width: 50px;    }    .col2Width    {        width: 200px;    }</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](http://www.mindstick.com/MindStickArticle/5c9087fd-7c83-4358-a972-09aff67fc416/Images/image003.png)

When you click on the edit button:

![Editable WebGrid in Asp.Net MVC](http://www.mindstick.com/MindStickArticle/5c9087fd-7c83-4358-a972-09aff67fc416/Images/image005.png)

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

![Editable WebGrid in Asp.Net MVC](http://www.mindstick.com/MindStickArticle/5c9087fd-7c83-4358-a972-09aff67fc416/Images/image007.png)

![Editable WebGrid in Asp.Net MVC](http://www.mindstick.com/MindStickArticle/5c9087fd-7c83-4358-a972-09aff67fc416/Images/image009.png)

---

Original Source: https://www.mindstick.com/articles/1411/editable-webgrid-in-asp-dot-net-mvc

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.