Inline chỉnh sửa các Webgrid hàng trong 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; } 
    } 

Bộ điều khiển:

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

tôi đã thực hiện với các hoạt động xóa. Làm cách nào để chỉnh sửa hàng trên cùng một trang và lưu các thay đổi vào cơ sở dữ liệu?

Sẽ có nút chỉnh sửa. Khi bạn nhấp vào nó, hàng sẽ có thể chỉnh sửa được. Trong khi đó, văn bản liên kết chỉnh sửa được thay đổi thành liên kết Lưu. Bây giờ, khi bạn nhấp vào Lưu, hàng cần được cập nhật.

Tôi muốn chỉnh sửa nội tuyến. Bạn có thể giúp tôi với điều này không?

Answer 1

Bạn có thể sử dụng AJAX. Bắt đầu bằng cách gói webGrid vào biểu mẫu html cho phép chỉnh sửa bản ghi:

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

Sau đó, bạn có thể có 2 partials, một để chỉnh sửa và một để hiển thị một bản ghi.

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> 

và sau đó chúng ta có thể có những hành động điều khiển tương ứng:

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

và cuối cùng là javascript để làm điều này còn sống:

$('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 hoạt động tốt - nhưng bạn phải lưu ý rằng ở đây nhiều dòng có thể đồng thời ở chế độ chỉnh sửa.

Một giải pháp cho phép chỉ chỉnh sửa một dòng (với yêu cầu ít ajax) là: http://www.c-sharpcorner.com/UploadFile/cd7c2e/create-an-editable-webgrid-in-mvc4-to-implement-crud-operati/