asp.net-mvc-3 – 在MVC3中对Webgrid行进行内联编辑

发布时间：2020-12-16 04:29:48 所属栏目：asp.Net 来源：网络整理

导读：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 { ge

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

我已经完成了删除操作.
如何编辑同一页面上的行并将更改保存到数据库中？

会有编辑按钮.单击它时,行将是可编辑的.
同时编辑链接文本更改为保存链接.
现在,当您单击“保存”时,需要更新行.

我想做内联编辑.
你能帮我解决这个问题吗？

解决方法

你可以使用AJAX.首先将webGrid包装成一个html表单,以便编辑记录：

@using (Html.BeginForm("Update",null,FormMethod.Post,new { @class = "updateForm" }))
{
    @grid.GetHtml(
        headerStyle: "headerStyle",columns: new[] 
        {
            grid.Column("ID",format: p=>p.CreatedOn.ToShortDateString()
            ),format: @<text>
                    @Html.ActionLink("Edit",new { id = item.ID },new { @class = "edit" })
                    |
                    @Html.ActionLink("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",new { id = Model.ID },new { @class = "edit" })
    |
    @Html.ActionLink("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;
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!