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

Контроллер:

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

Индекс.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>
        )
})

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

Там будет кнопка редактирования. Когда вы нажмете на нее, строка будет доступна для редактирования. При этом текст ссылки редактирования меняется на ссылку «Сохранить». Теперь, когда вы нажимаете «Сохранить», строку необходимо обновить.

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


asp.net-mvc-3 add save inline-editing webgrid
person user1120418    schedule 19.04.2013    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Вы можете использовать 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;
});
person Darin Dimitrov    schedule 21.04.2013
comment
Спасибо. Решение сработало. Могу ли я иметь функции редактирования в том же представлении, в котором отображается сетка? Я хочу делать все изменения и добавлять функциональные возможности в одном и том же представлении. - person user1120418; 21.04.2013
comment
В противном случае Могу ли я добавить всплывающее окно для редактирования текущей строки, когда я нажимаю «Изменить ссылку на действие»? Как это сделать с помощью AJAX? - person user1120418; 21.04.2013
comment
Не получается обновить запись. Обновить действие в домашнем контроллере не получается. Что будет причиной этого? - person user1120418; 21.04.2013
comment
Да, у вас может быть функция редактирования во всплывающем окне. Вы можете использовать, например, jQuery UI dialog. - person Darin Dimitrov; 22.04.2013
comment
Этот код великолепен, однако встроенное редактирование не работает после разбиения по страницам или сортировки сетки. Например, если я сортирую столбец в сетке, а затем редактирую любую строку, то $('table').on('click', '.edit', function() при обратной передаче. Любая помощь? - person jre247; 22.10.2013

arrow_upward
0
arrow_downward

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

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

person Dirkr    schedule 27.02.2014