ASP.. NET MVC 4 - WebGrid.如何保留页面后的编辑

Question

我在我的项目中使用WebGrid，我已经实现了分页/编辑和删除选项。现在，当我在删除和编辑一个项目时，我会回到第一页。

但是，我想返回(回到列表)在同一页。你知道我该怎么做吗?

视图代码

    <div id="grid">
@{
    var grid = Html.Grid(Model, rowsPerPage: 20, defaultSort: "LanguageID");
  }
@grid.GetHtml(
tableStyle:"table",
alternatingRowStyle:"alternate",
selectedRowStyle:"selected",
headerStyle:"header",
columns:grid.Columns(
grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { localizationID = item.ID, languageID = item.LanguageID })),
grid.Column("Description",header:"Language"),
grid.Column("ParameterName", header:"Parameter name"),
grid.Column("Name",header:"Original (English)", format: item => Html.Raw(item.Name)),
grid.Column("TranslationText",
header:"Translation", format: item => Html.Raw(item.TranslationText))))

</div>

控制器

public ActionResult Index()
{
    translations = _translationService.GetByCulture(valueLanguage);
    return View(translations);
}
[HttpPost]
public ActionResult Edit(Translation model)
{
    if (ModelState.IsValid)
    {
        _translationService.Update(model);
        return RedirectToAction("Index","Translation");     
    }
    retrun View(model);
}

比你

。

Answer 1

这是一个迟来的答案，但它可能对某些人有帮助。

不返回ActionResult，如果ajax调用成功，那么我们可以将文本框或输入控件值绑定到网格

例如

WebGrid companyGrid = new WebGrid(Model, rowsPerPage: 5, ajaxUpdateContainerId: "companyGrid");
   @companyGrid.GetHtml(columns: companyGrid.Columns(companyGrid.Column("CompanyID", "Company ID"),
    companyGrid.Column("CompanyName", "Company Name", format: @<text><input id="companyNameTxt" type="text" class="edit-mode" value="@item.CompanyName" /><span class="display-mode" id="companyNameLbl">@item.CompanyName</span></text>),
    companyGrid.Column("Action", format: @<text><button class="edit-user display-mode">Edit</button> <button class="save-user edit-mode">Save</button><button class="cancel-user edit-mode">Cancel</button></text>)))

在webgrid中，公司名称列有2个元素，一个是companyNameTxt文本框，另一个是companyNameLbl span

Ajax保存按钮功能

    $('.save-user').on('click', function () {
        var tr = $(this).parents('tr:first');
        var companyName = tr.find("#companyNameTxt").val();
        var UserModel =
        {
            "ID": 1,
            "companyName": companyName,
        };
        $.ajax({
            url: '/Home/EditGrid',
            data: JSON.stringify(UserModel),
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            success: function () {
                tr.find("#companyNameLbl").html(companyName);
                tr.find('.edit-mode, .display-mode').toggle();
            }
        });
    });

编辑完成后，只需将文本框值赋给标签即可。然后它将保留在同一页中。如果结果是成功，那么数据肯定会保存到数据库

控制器

public void EditGrid(int ID, string companyName)
{
   // Code for editing
}

Answer 2

我有同样的问题，我试了这个:

我在ViewBag中添加了一个参数来保存页面，我将页面值发送给编辑方法，所以当我返回时，页码会持续存在。就像这样:

1)在索引方法中，您必须保存当前页面:

public ActionResult Index(string page)
{
    ViewBag.Page=page;
    translations = _translationService.GetByCulture(valueLanguage);
    return View(translations);
}

2所以当你点击编辑时，页面会随着数据移动:

grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { 
localizationID = item.ID, languageID = item.LanguageID, page=ViewBag.page })),

3然后在编辑方法上放入控制器集ViewBag。

[HttpPost]
public ActionResult Edit(Translation model, string page)
{
    ViewBag.lst = page;
    if (ModelState.IsValid)
    {
        _translationService.Update(model);
        return RedirectToAction("Index","Translation");     
    }
    retrun View(model);
}

，这就是全部如果你需要在其他视图中这样做只需在其他控制器方法中重复编辑步骤