Inline-Bearbeitung von Webgrid Zeile in MVC3

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

Habe ich getan, mit der delete-operation.
Wie kann ich das Bearbeiten einer Zeile auf derselben Seite und speichern Sie die änderungen in die Datenbank?

Gibt es die Bearbeiten-Schaltfläche. Wenn Sie darauf klicken, wird die Zeile bearbeitet werden.
Mittlerweile Bearbeiten link-text geändert, als link Speichern.
Nun, wenn Sie auf Speichern klicken, Zeile aktualisiert werden muss.

Will ich tun, Inline-editing.
Können Sie mir bitte helfen mit diesem?

InformationsquelleAutor user1120418 | 2013-04-19
  1. 9

    Konnte man AJAX verwenden. Starten Sie durch das einwickeln der webGrid in ein html-Formular, das den Datensatz Bearbeiten:

    @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 hätte man 2 Teiltöne, eine für die Bearbeitung und einen für die Anzeige eines einzelnen Datensatzes.

    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 hätten wir noch die entsprechenden controller-Aktionen:

    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 die Sie javascript, um diese lebendig:

    $('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;
});
    • Danke. Die Lösung gearbeitet. Kann ich nicht haben, Bearbeiten Sie die Funktionalität in der gleichen Ansicht in der Grid angezeigt werden? Ich will alles tun, Bearbeiten und hinzufügen von Funktionalität, die in der gleichen Ansicht zu sein.
    • Ansonsten Kann ich fügen Sie einige pop-up zum Bearbeiten der aktuellen Zeile, wenn ich auf Edit klicke ActionLink? Wie es mit AJAX?
    • Es ist nicht in der Lage, um den Datensatz aktualisieren. Es geht nicht um die update-Aktion im Home controller. Was wird sein Grund dafür?
    • Ja, Sie können die Bearbeiten-Funktionalität in einem popup-Fenster. Sie könnten zum Beispiel benutzen jQuery UI dialog.
    • Dieser code ist Super, allerdings inline-Bearbeitung ein Fehler Auftritt, nachdem paging oder sorting grid. Wenn ich zum Beispiel Sortieren in einer Spalte im grid, und Bearbeiten Sie dann eine beliebige Zeile, dann auf "$('table').auf('click', '.Bearbeiten', function ()" postback. Keine Hilfe?
    InformationsquelleAutor Darin Dimitrov
  2. 0

    Den Antwort per ajax funktioniert - aber Sie müssen sich bewusst sein, dass hier mehrere Zeilen werden kann simultaneuously im Bearbeiten-Modus.

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

    InformationsquelleAutor Dirkr
Schreibe einen Kommentar