First create an asp.net mvc 4 web application:

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:

When you click on the edit button:

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