Inline-Bearbeitung von WebGrid Reihe in 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; } 
    } 

Controller:

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

Ich habe mit dem Löschvorgang erfolgt. Wie kann ich eine Zeile auf derselben Seite bearbeiten und die Änderungen in der Datenbank speichern?

Dort wird Schaltfläche bearbeiten. Wenn Sie darauf klicken, kann die Zeile bearbeitet werden. In der Zwischenzeit bearbeiten Sie den Link-Text als Link speichern. Wenn Sie jetzt auf Speichern klicken, muss die Zeile aktualisiert werden.

Ich möchte Inline-Bearbeitung machen. Kannst du mir bitte dabei helfen?

Answer 1

Sie könnten AJAX verwenden. Beginnen Sie mit der WebGrid in ein HTML-Formular Verpackung, die für die Bearbeitung des Datensatzes ermöglicht:

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

Dann Sie 2 partials haben könnte, eine für die Bearbeitung und eine für einen einzelnen Datensatz angezeigt wird.

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> 

und dann könnten wir die entsprechenden Controller-Aktionen haben:

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

und schließlich das Javascript, um diese am Leben:

Answer 2

Die answer using ajax funktioniert gut - aber Sie müssen beachten, dass hier mehrere Zeilen gleichzeitig im Bearbeitungsmodus sein können.

Eine Lösung nur die Bearbeitung einer Zeile (mit weniger AJAX-Anfragen) erlaubt ist: http://www.c-sharpcorner.com/UploadFile/cd7c2e/create-an-editable-webgrid-in-mvc4-to-implement-crud-operati/