Встроенное редактирование строки Webgrid в 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; }
    }

контроллер:

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

Я сделал с операцией удаления. Как я могу отредактировать строку на той же странице и сохранить изменения в базе данных?

Там будет кнопка редактирования. Когда вы нажмете на нее, строка будет редактируемой. В то же время редактировать текст ссылки изменяется как Сохранить ссылку. Теперь, когда вы нажимаете Сохранить, строка должна быть обновлена.

Я хочу сделать встроенное редактирование. Можете ли вы помочь мне с этим?

Answer 1

Вы могли бы использовать AJAX. Начните с обертывания webGrid в html-форму, которая позволит редактировать запись:

@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 партиала, одна для редактирования и одна для отображения одной записи.

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

Ответ с использованием ajax работает нормально, но вы должны знать, что здесь несколько строк могут быть одновременно в режиме редактирования.

Решение, позволяющее редактировать только одну строку (с меньшим количеством запросов ajax): http://www.c-sharpcorner.com/UploadFile/cd7c2e/create-an-editable-webgrid-in-mvc4-to-implement-crud-operati/