在MVC3中内联编辑Webgrid行

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