Part 1 - Basic Inplace editing in asp.net MVC webgrid

Previously we have seen many articles about Webgrid in asp.net MVC application.
Today in this article I am going to show you, how to implement basic In-place editing in asp.net MVC Webgrid. 
Most of the developers familiar with the term Inline editing in webgrid but What is in-place editing?  In-place edit allows the user to edit text directly on the page without requiring going to a separate page or open a modal popup. It makes the interaction more direct and intuitive as the user can edit the text in the same place where it is shown.
Inplace editing in webgrid

First Name Last Name Role DOB
shena
garcia
User
12-Dec-1988
double enter
garica marol
Admin
02-May-1990
Part 1 - Basic Inplace editing in asp.net MVC webgrid
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    @RenderSection("scripts", false)
</body>
</html>
Posted By :