Example of inline Edit and update in Gridview or WebGid in Mvc4.

Description:-

            In this Example we Explain that How to Create an inline Editable Gridview in MVC.we provide same facility like we create in simple Gridview inline Edit in Asp.Net. 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.

fill or checked checkbox when click on edit button button of gridview fill the checkbox at Edit time 

Dynamically create table in database with same as user insert in TextBox Dynamic creation of sqlserver table using c#

to Show Example of Three Tier Architecture click here Three Tier Architecture with insert,update,Delete operation

To DownLoad Complete Project Click the below Download Image Link

Here is Step to Edit in Gridview in mvc4 as follow.

create Table poll.

Create a DataClasses1 in Model Folder. and Drag and Drop the Table.

Step 1:- First Create UserModel Class in Model Folder with Following Code.

UserModel.cs:-

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using deletemultiple.Models;

namespace deletemultiple.Models

{

    public class UserModel

    {

      

     

      

        public static List<poll> getUsers()

        {

              DataClasses1DataContext dc = new DataClasses1DataContext();

            List<poll> users = new List<poll>();

            users = (from p in dc.polls select p).ToList();

         return  users;

        }

    }

}

 

Step 2:- Create Controller in Controller Folder with name multipleController with Following Code.

multipleController.cs:-

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using deletemultiple.Models;

namespace deletemultiple.Controllers

{

    public class multipleController : Controller

    {

         List<poll> users=null;

        DataClasses1DataContext dc = new DataClasses1DataContext();

        //

        // GET: /multiple/

        public ActionResult Index()

        {

            users = (from p in dc.polls select p).ToList();

            return View(users);

        }

        public JsonResult UpdateUser(UserModel model)

        {

            // Update model to your db

            string message = "Success";

            return Json(message, JsonRequestBehavior.AllowGet);

        }

        public JsonResult DeleteStudent(int ID)

        {

            // delete the record from ID and return true else false

            return Json(true, JsonRequestBehavior.AllowGet);

        }

        //

        // GET: /multiple/Details/5

        public ActionResult Details(int id)

        {

            return View();

        }

        //

        // GET: /multiple/Create

        public ActionResult Create()

        {

            return View();

        }

        //

        // POST: /multiple/Create

        [HttpPost]

        public ActionResult Create(FormCollection collection)

        {

            try

            {

                // TODO: Add insert logic here

                return RedirectToAction("Index");

            }

            catch

            {

                return View();

            }

        }

        //

        // GET: /multiple/Edit/5

        public ActionResult Edit(int id)

        {

            return View();

        }

        //

        // POST: /multiple/Edit/5

        [HttpPost]

        public ActionResult Edit(int id, FormCollection collection)

        {

            try

            {

                // TODO: Add update logic here

                return RedirectToAction("Index");

            }

            catch

            {

                return View();

            }

        }

        //

        // GET: /multiple/Delete/5

        public ActionResult Delete(int id)

        {

            return View();

        }

        //

        // POST: /multiple/Delete/5

        [HttpPost]

        public ActionResult Delete(int id, FormCollection collection)

        {

            try

            {

                // TODO: Add delete logic here

                return RedirectToAction("Index");

            }

            catch

            {

                return View();

            }

        }

    }

}

Step 3:- Create view with name is Index.cshtml in multiple Folder with following code.

Index.cshtml:-

@model IEnumerable<deletemultiple.Models.poll>

 <html>

<head>

    <title>WebgridSample</title>

    <script src="../../Scripts/jquery-1.7.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 Name = tr.find("#Name").val();

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

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

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

              tr.find("#lblQuestion").text(Question);

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

              var UserModel =

              {

                  "Id": Id,

                  "Name": Name,

                  "Question": Question

              };

              $.ajax({

                  url: '/multiple/UpdateUser/',

                  data: JSON.stringify(UserModel),

                  type: 'POST',

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

                  success: function (data) {

                      alert(data);

                  }

              });

          });

      })

</script>

    </head>

     <body>

<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("FirstName", "First 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("LastName", "Last Name", format: @<text> <span class="display-mode"><label id="lblQuestion">@item.Question</label></span>

                    <input type="text" id="Question" value="@item.Question" 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)

    ))

    </div>     <input type="button" onclick="DeleteStudent()" id="btn" />

         </body>

  

     </html>

 

Step 4:- Add this one line code in Site.Master like.

<li><%: Html.ActionLink("Index", "Index", "multiple") %></li>