jqueryを使用してMVCのグリッドの表示列を非表示

Question

私はasp.net MVCでWebグリッドを使用しており、いくつかの列と[編集]ボタンがあります。 編集ボタンをクリックすると、特定の列が非表示になります。私はこれをjqueryを使って実現したいと思います。どうしたらいいですか？

grid1.Column("Name", "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"), 

Answer 1

ビュー：

@model List<object> 

@{ 
    ViewBag.Title = "MvcGrid"; 
    WebGrid grid = new WebGrid(Model, defaultSort: "Name", rowsPerPage: 5, columnNames: new[] { "Name", "Surname" }); 
} 
<script src="~/Scripts/jquery-1.10.2.js"></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 FirstName = tr.find("#FirstName").val(); 
      var LastName = tr.find("#LastName").val(); 
      var UserID = tr.find("#UserID").html(); 
      tr.find("#lblFirstName").text(FirstName); 
      tr.find("#lblLastName").text(LastName); 
      tr.find('.edit-mode, .display-mode').toggle(); 
      var UserModel = 
      { 
       "ID": UserID, 
       "FirstName": FirstName, 
       "LastName": LastName 
      }; 
      $.ajax({ 
       url: '/User/UpdateUser/', 
       data: JSON.stringify(UserModel), 
       type: 'POST', 
       contentType: 'application/json; charset=utf-8', 
       success: function (data) { 
        alert(data); 
       } 
      }); 

     }); 
    }) 
</script> 

@grid.GetHtml(
    tableStyle: "table", 
    fillEmptyRows: true, 
    headerStyle: "header", 
    footerStyle: "grid-footer", 
    mode: WebGridPagerModes.All, 
    firstText: "<< First", 
    previousText: "< Prev", 
    nextText: "Next >", 
    lastText: "Last >>", 

    columns: new[] 
    { 
     grid.Column("Name", "Name", format: @<text><span class="display-mode"><label id="lblFirstName">@item.Name</label></span> 
     <input type="text" id="FirstName" value="@item.Name" class="edit-mode" /></text>, style: "col2Width"), 
     grid.Column("Surname", "Surname", format: @<text> <span class="display-mode"><label id="lblLastName">@item.Surname</label></span> 
     <label type="button" id="LastName" class="edit-mode" />@item.Surname</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) 

    }) 

そして、ここでは、[編集]をクリックしたときに、それがどのように見えるかです：