インライン編集

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

コントローラー：

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が削除操作で行っています。 同じページの行を編集し、その変更をデータベースに保存するにはどうすればよいですか？

編集ボタンがあります。クリックすると、行が編集可能になります。 一方、編集リンクのテキストは保存リンクとして変更されます。 保存をクリックすると、行を更新する必要があります。

私はインライン編集をしたいと思います。 これで私を助けてもらえますか？

Answer 1

AJAXを使用できます。レコードの編集を可能にするHTMLフォームへのWebGridをラップすることによって起動します。

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

その後、あなたは2つのパーシャル、編集用と単一のレコードを表示するための1つを持つことができます。

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> 

し、我々が持っている可能性があり、対応するコントローラアクション：

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

、最終的にはJavascriptをこれが生き作るために：

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

Answer 2

answer using ajaxはうまくいきますが、複数の行を同時に編集モードにすることができます。 （以下AJAX要求で）1行の唯一の編集を可能

解決策は以下のとおりです。 http://www.c-sharpcorner.com/UploadFile/cd7c2e/create-an-editable-webgrid-in-mvc4-to-implement-crud-operati/