ASP.NET MVC 4 - WebGrid. How retaining page after the Edit

Question

I'm using WebGrid on my project, I have implemented the paging / Edit and Delete option. At the moment, when I'm deleting and editing an item, I'm going back to the first page.

But, I would like to return (Back to list) at the same page. Do you have any idea on how can i do that ?

View code

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

Controller

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

Than you.

Answer 1

This one is a late answer but it may help to someone.

Instead of returning ActionResult, if the ajax call is success, then we can bind the Text box or input control value to grid

For example

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

In the webgrid, the company name column has 2 elements, one is companyNameTxt text box and another one is companyNameLbl span

Ajax save button function

    $('.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();
            }
        });
    });

After editing, just assign the text box value to the label. Then it will retain in the same page. If the result is success then surly the data will save into database

Controller

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