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.

After updating the data, just load all the data to your Edit and return to the View — Karthik Chintala, Mar 01 '13 at 10:14
What do you mean by "Load the Data" ? Do I still need to Get the Data from my DB ? How is that will return to the page ? Maybe it was not clear, for example I'm on the Index.chtml?page=5 and after Editing, i would return to the Page=5 and not at the Index page. — fix105, Mar 01 '13 at 10:54
Get the value of your page when you edit and On redirection pass in the querystring as `return RedirectToAction("Index","Translation",new {page=5});` in the Edit action — Karthik Chintala, Mar 01 '13 at 10:59
Sorry, do you have an example. I'm really new here, and I don't know how do i have to manage with the Page number. Do I have to pass as a parameter the page number in the HTTPGet Edit call ? And be able to retrieve it in the HTTPPost Edit ? — fix105, Mar 04 '13 at 10:19
I'm not sure that was the best solution, but to solve my issue, I have created a specific Viewmodel for my Index and Edit page. In the model, there is a property called int page {get;set;} As that's part of my model, i can easily find the value. If somebody has a better solution, thanks for sharing. — fix105, Mar 05 '13 at 13:35

score 1 · Answer 1 · answered Feb 10 '16 at 13:00

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
}

score 0 · Answer 2 · edited Aug 03 '15 at 13:44

I had the same problem and I tried this:

I added a param in the ViewBag to save the page and I send page value to edit method so when I go back the page number persist. It something like that:

1) In the index method you have to save the current page:

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

    return View(translations);
}

2 So when you click on edit the page will travel with the data:

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

3 Then on the edit method into the controller set ViewBag.page with the current page again like that:

[HttpPost]
public ActionResult Edit(Translation model, string page)
{

    ViewBag.lst = page;
    if (ModelState.IsValid)
    {
        _translationService.Update(model);
        return RedirectToAction("Index","Translation");     
    }

    retrun View(model);
}

and that's all if you need to do it in other view just repeat the edit step in other controller methods.

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

2 Answers2