Inline editing di fila WebGrid 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> 
     ) 
}) 

ho fatto con l'operazione di eliminazione. Come posso modificare una riga sulla stessa pagina e salvare le modifiche nel database?

Ci sarà il pulsante di modifica. Quando fai clic su di esso, la riga sarà modificabile. Nel frattempo modifica il testo del link è cambiato come Salva collegamento. Ora, quando si fa clic su Salva, la riga deve essere aggiornata.

Desidero eseguire la modifica in linea. Puoi aiutarmi per favore con questo?

Answer 1

È possibile utilizzare AJAX. Inizia avvolgendo il WebGrid in una form html che consentirà la modifica del record:

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

allora si potrebbe avere 2 parziali, uno per l'editing e uno per la visualizzazione di un singolo record.

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> 

e quindi potremmo avere corrispondenti azioni di controllo:

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

ed infine il JavaScript per rendere questo vivo:

Answer 2

Il answer using ajax funziona correttamente, ma è necessario essere consapevoli del fatto che qui più righe possono essere simultaneamente in modalità di modifica.

Una soluzione che consente solo la modifica di una riga (con richieste meno Ajax): http://www.c-sharpcorner.com/UploadFile/cd7c2e/create-an-editable-webgrid-in-mvc4-to-implement-crud-operati/