Pass webgrid data back to controller via post asp.net mvc

Question

I am new to MVC and would like to know, how to submit whole grid data on submit button click to controller at once using viewmodel.

In View

@model prjMVC4Training.Models.BookViewModel
@{
    ViewBag.Title = "Index";
    var categories = ViewBag.BookCategories;
    var authors = ViewBag.BookAuthors;
    var grid = new WebGrid(source: Model.BookData, canSort: true, canPage:true);    
}

@using (Html.BeginForm("BookPost", "Book", FormMethod.Post, new { @id = "grid" }))
{
    <h2>Book Index Page</h2>    
    @Html.HiddenFor(m => m.PrimaryKeyID)

    @grid.GetHtml(
        tableStyle: "table",
        alternatingRowStyle: "alternate",
        selectedRowStyle: "selected",
        headerStyle: "header",
        columns: grid.Columns(
            grid.Column("Actions",
                style: "col1",
                canSort: false,
                format: @<text>
                    <button type="button"  class="edit-book display-mode" id="@item.BookID">Edit</button>
                    <button type="button" class="save-book edit-mode" id="@item.BookID">Save</button>
                    <button type="button" class="cancel-book edit-mode" id="@item.BookID">Cancel</button>
                    </text>),
                grid.Column("BookTitle",
                    style: "col2",
                    canSort: true,
                    format: @<text>
                        <span id="dBookTitle" class="display-mode">@item.BookTitle</span>
                        @Html.TextBox("BookData_" + (int)item.BookID + "__BookID", (string)item.BookTitle, new { @class = "edit-mode", size = 45 })
                        </text>),
                grid.Column("AuthorName",
                    header: "Author",
                    style: "col3",
                    canSort: true,
                    format: @<text>
                        <span id="dAuthorName" class="display-mode">@item.AuthorName</span>
                        @Html.DropDownList("AuthorID_" + (int)item.BookID, (ViewBag.BookAuthors as SelectList).Select(option => new SelectListItem
                        {
                            Text = option.Text,
                            Value = option.Value,
                            Selected = option.Value == @item.AuthorID
                        }), new { @class = "edit-mode" })
                        </text>),
                grid.Column("CategoryName",
                style: "col4",
                canSort: true,
                    format: @<text>
                        <span id="dCategoryName" class="display-mode">@item.CategoryName</span>
                        @Html.DropDownList("CategoryID_" + (int)item.BookID, (ViewBag.BookCategories as SelectList).Select(option => new SelectListItem
                        {
                            Text = option.Text,
                            Value = option.Value,
                            Selected = option.Value == @item.CategoryID
                        }), new { @class = "edit-mode" })
                        </text>),
                grid.Column("BookISBN",
                    style: "col5",
                    format: @<text>
                        <span id="dBookISBN" class="display-mode">@item.BookISBN</span>
                        @Html.TextBox("BookISBN_" + (int)item.BookID, (string)item.BookISBN, new { @class = "edit-mode", size = 20 })
                        </text>),
                grid.Column("IsMember",
                    style: "",
                    format: @<text>
                        <span id="dMember" class="display-mode">@item.IsMember</span>
                        <input type="checkbox" id="MemberID_" + (int)item.BookID name="MemberID" @(item.IsMember == true ? "Checked" : null) class="edit-mode"/>
                        </text>)))    
    <button type="submit" value="Save Book Data">Save Book Data</button>
}

On submit button, I want to pass the value to controller

[HttpPost]
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult BookPost(BookViewModel obj)
{
    ViewBag.BookCategories = new SelectList(BookHelperData.GetBookCategories(), "CategoryID", "CategoryName", "20");
    ViewBag.BookAuthors = new SelectList(BookHelperData.GetAuthors(), "AuthorID", "AuthorName");
    //ViewBag.BookAuthors = BookHelperData.GetAuthorsList();
    var Book = BookHelperData.GetBooks();
    return View(Book);

}

My ViewModel Class is like this-

public class BookViewModel
{
    public int PrimaryKeyID { get; set; }
    public List<Book> BookData { get; set; }
}

Answer 1

You can write a generic method which loops all the data in grid and transform it to json structure.

function gridTojson() {
        var json = '{';
        var otArr = [];
        var tbl2 = $('#employeeGrid tbody tr').each(function (i) {
            if ($(this)[0].rowIndex != 0) {
                x = $(this).children();
                var itArr = [];
                x.each(function () {
                    if ($(this).children('input').length > 0) {
                        itArr.push('"' + $(this).children('input').val() + '"');
                    }
                    else {
                        itArr.push('"' + $(this).text() + '"');
                    }
                });
                otArr.push('"' + i + '": [' + itArr.join(',') + ']');
            }
        })
        json += otArr.join(",") + '}'
        return json;
    }

Now on submit button click you need to pass the data to controller.

$('#btnsave').click(function (e) {
        //debugger;
        var _griddata = gridTojson();
        var url = '@Url.Action("UpdateGridData")';
            $.ajax({
                url: url,
                type: 'POST',
                data: { gridData: _griddata }
            }).done(function (data) {
                if (data != "") {
                    $('#message').html(data);
                }
            });
     });

Now on controller serialize the data back

public ActionResult UpdateGridData(string gridData)
        {
            var log = Newtonsoft.Json.JsonConvert.DeserializeObject<Dictionary<string, string[]>>(gridData);     
            return Json("Update Successfully");
        }

Here is the post regarding this.