게시물을 통해 webgrid 데이터를 다시 전달합니다. asp.net mvc

Question

저는 MVC를 처음 사용하고 있기 때문에 viewmodel을 사용하여 제출 버튼 버튼을 클릭하여 전체 그리드 데이터를 제출하는 방법을 알고 싶습니다. 보기에서

@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> 
} 

에 내가

[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); 

가}

내의 ViewModel 클래스 this-

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

처럼 컨트롤러에 값을 전달하려면, 버튼을 제출

Answer 1

그리드의 모든 데이터를 반복하고 json 구조로 변환하는 일반적인 방법을 쓸 수 있습니다.

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; 
    } 

이제 전송 버튼을 클릭하면 컨트롤러에 데이터를 전달해야합니다.

$('#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); 
       } 
      }); 
    }); 

지금 제어기 여기

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

이 post 관한 것이다 다시 데이터를 직렬화.