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