Inline editing of Webgrid row in MVC3

Question

 public class UserDetailsModel
    {
        public int ID { get; set; }
        public string LoginID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string IsDeleted { get; set; }
        public DateTime CreatedOn { get; set; }
    }

Controller:

public ActionResult Index()
        {
           object  model = obj.getUserList();
            return View(model);
        }

        public ActionResult Delete(int id)
        {
            BAL_obj.deleteUser(id);
            object model = obj.getUserList();
            return View("Index",model);
        }

Index.cshtml:

@model IEnumerable<WebGrid1App.Models.UserDetailsModel>

@{
     WebGrid grid = new WebGrid(Model);

}
<h2>People</h2>

@grid.GetHtml(
    headerStyle: "headerStyle",
    tableStyle: "tableStyle",
    alternatingRowStyle: "alternateStyle", 

    fillEmptyRows: true,

    mode: WebGridPagerModes.All,
    firstText: "<< First",
    previousText: "< Prev",
    nextText: "Next >",
    lastText: "Last >>",
    columns: new [] {


        grid.Column("ID",header: "ID"),
        grid.Column("LoginId",header:"LoginID"),

        grid.Column("FirstName", canSort: false),
        grid.Column("LastName"),

        grid.Column("CreatedOn", 
                    header: "CreatedOn",
                    format: p=>p.CreatedOn.ToShortDateString()
        ),

        grid.Column("", 
                    header: "Actions",
                    format: @<text>
                                @Html.ActionLink("Edit",   "Edit",   new { id=item.ID} )
                                |
                                @Html.ActionLink("Delete", "Delete", new { id=item.ID} )
                            </text>
        )
})

I have done with the delete operation. How can I edit a row on same page and save the changes into database?

There will edit button. When you click on it, row will be editable. Meanwhile edit link text is changed as Save link. Now when you click on Save, row needs to be updated.

I want to do Inline editing. Can you please help me out with this?

Leukas

Answer 1

You could use AJAX. Start by wrapping the webGrid into an html form which will allow for editing the record:

@using (Html.BeginForm("Update", null, FormMethod.Post, new { @class = "updateForm" }))
{
    @grid.GetHtml(
        headerStyle: "headerStyle",
        tableStyle: "tableStyle",
        alternatingRowStyle: "alternateStyle",
        fillEmptyRows: true,
        mode: WebGridPagerModes.All,
        firstText: "<< First",
        previousText: "< Prev",
        nextText: "Next >",
        lastText: "Last >>",
        columns: new[] 
        {
            grid.Column("ID",header: "ID"),
            grid.Column("LoginId",header:"LoginID"),
            grid.Column("FirstName", canSort: false),
            grid.Column("LastName"),
            grid.Column("CreatedOn", 
                header: "CreatedOn",
                format: p=>p.CreatedOn.ToShortDateString()
            ),
            grid.Column("", 
                header: "Actions",
                format: @<text>
                    @Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { @class = "edit" })
                    |
                    @Html.ActionLink("Delete", "Delete", new { id = item.ID })
                </text>
            )
        }
    )
}

Then you could have 2 partials, one for editing and one for displaying a single record.

EditUserDetailsModel.cshtml:

@model UserDetailsModel

<td>@Html.EditorFor(x => x.ID)</td>
<td>@Html.EditorFor(x => x.LoginID)</td>
<td>@Html.EditorFor(x => x.FirstName)</td>
<td>@Html.EditorFor(x => x.LastName)</td>
<td>@Html.EditorFor(x => x.CreatedOn)</td>
<td> 
    <button type="submit">Update</button>
</td>

DisplayUserDetailsModel:

@model UserDetailsModel

<td>@Html.DisplayFor(x => x.ID)</td>
<td>@Html.DisplayFor(x => x.LoginID)</td>
<td>@Html.DisplayFor(x => x.FirstName)</td>
<td>@Html.DisplayFor(x => x.LastName)</td>
<td>@Html.DisplayFor(x => x.CreatedOn)</td>
<td> 
    @Html.ActionLink("Edit", "Edit", new { id = Model.ID }, new { @class = "edit" })
    |
    @Html.ActionLink("Delete", "Delete", new { id = Model.ID })
</td>

and then we could have the corresponding controller actions:

public ActionResult Edit(int id)
{
    UserDetailsModel model = repository.Get(id);
    return PartialView("EditUserDetailsModel", model);
}

[HttpPost]
public ActionResult Update(UserDetailsModel model)
{
    repository.Update(model);
    return PartialView("DisplayUserDetailsModel", model);
}

and finally the javascript to make this alive:

$('table').on('click', '.edit', function () {
    $.ajax({
        url: this.href,
        type: 'GET',
        cache: false,
        context: $(this).closest('tr'),
        success: function (result) {
            $(this).html(result);
        }
    });
    return false;
});

$('.updateForm').on('submit', function () {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        context: $('input', this).closest('tr'),
        success: function (result) {
            $(this).html(result);
        }
    });
    return false;
});

Yippie

Thank you. The solution worked. Can't I have edit functionality in the same view in which Grid is displayed? I want to do all edit and add functionality in same view. – Leukas

Otherwise Can I add some pop-up to edit the current row when I click on Edit ActionLink? How to do it with AJAX? – Leukas

It is not able to update the record. It doesn't go to update Action in Home controller. What will be reason behind this? – Leukas

Yes, you could have the edit functionality in a popup. You could use for example jQuery UI dialog. – Yippie

This code is great, however inline editing fails after paging or sorting the grid. For instance, if i sort a column in the grid, and then edit any row, then "$('table').on('click', '.edit', function ()" on postback. Any help? – Edgebone

Answer 2

The answer using ajax works fine - but you have to be aware that here multiple lines can be simultaneuously in edit mode.

A solution allowing only editing of one line (with less ajax requests) is: http://www.c-sharpcorner.com/UploadFile/cd7c2e/create-an-editable-webgrid-in-mvc4-to-implement-crud-operati/

Rowen