Web grid closing on paging

Question

I have a page with modal window(popup) in which I would like to have webgrid with paging.

It works fine, but when I try to page it (paging it self works too), popup is closed. When I open popup again it shows the page I wanted him to show before closing.

Markup:

WebGrid grid = new WebGrid(db.HarmingFactors, canPage: true, canSort: false, rowsPerPage: 5);

@if (db.HarmingFactors.Any())
{
@grid.GetHtml(
tableStyle: "table",
//some params 
columns: grid.Columns(

    grid.Column("Nr", @Resources.Localization.nr, format: @<text>
                  @{ row = row + 1;} @item.Nr
            </text>, style: "p13"),

    grid.Column("Description", @Resources.Localization.description, format: @<text>
                 @{ row = row + 1;} @item.Description
            </text>),


    grid.Column("", "", format: @<text>
            <input id="select_bttn" style="width:78px" type="submit" value=@Resources.Localization.select />
            </text>)
        )
    )
 }

Answer 1

That's a very nice question.I really enjoyed solving it!

1.When you instantiate your grid you need to pass through an extra parameter called ajaxUpdateContainerId:

WebGrid grid = new WebGrid(db.HarmingFactors, canPage: true, canSort: false, rowsPerPage: 5,ajaxUpdateContainerId: "deploymentsGrid");

2.You need to wrap the grid inside a div which has an id that matches ajaxUpdateContainerId:

<div id="deploymentsGrid">
@if (db.HarmingFactors.Any())
{
@grid.GetHtml(
tableStyle: "table",
//some params 
columns: grid.Columns(

    grid.Column("Nr", @Resources.Localization.nr, format: @<text>
                  @{ row = row + 1;} @item.Nr
            </text>, style: "p13"),

    grid.Column("Description", @Resources.Localization.description, format: @<text>
                 @{ row = row + 1;} @item.Description
            </text>),


    grid.Column("", "", format: @<text>
            <input id="select_bttn" style="width:78px" type="submit" value=@Resources.Localization.select />
            </text>)
        )
    )
 }
</div>

3.The action method in the controller which calls the page where the modal popup is displayed needs to be changed as follows:

public ActionResult ModalPopup()
{
    if (Request.IsAjaxRequest())
        return PartialView("~/Views/Home/_GetPartial.cshtml", GetItems());
    else
        return View();
}

Here's a complete working example, obviously I don't have access to you specific object so I created my own to be able to replicate the issue, but I'm sure you will be able to understand it and apply to your solution:

Home Controller:

public class Item2
{
    public string Number { get; set; }
    public string Description { get; set; }
}

public class HomeController : Controller
{
    public ActionResult ModalPopup()
    {
        if (Request.IsAjaxRequest())
            return PartialView("~/Views/Home/_GetPartial.cshtml", GetItems());
        else
            return View();
    }

    public PartialViewResult _GetPartial()
    {
        return PartialView("~/Views/Home/_GetPartial.cshtml",GetItems());
    }

    private List<Item2> GetItems()
    {
        var item1 = new Item2 { Description = "Item 1", Number = "1" };
        var item2 = new Item2 { Description = "Item 2", Number = "2" };
        var item3 = new Item2 { Description = "Item 3", Number = "3" };

        var item4 = new Item2 { Description = "Item 4", Number = "4" };
        var item5 = new Item2 { Description = "Item 5", Number = "5" };
        var item6 = new Item2 { Description = "Item 6", Number = "6" };

        var item7 = new Item2 { Description = "Item 7", Number = "7" };
        var item8 = new Item2 { Description = "Item 8", Number = "8" };
        var item9 = new Item2 { Description = "Item 9", Number = "9" };

        return new List<Item2> { item1, item2, item3, item4, item5, item6, item7, item8, item9 };
    }
}

Partial View:

@model IEnumerable<WebApplication7.Controllers.Item2>


@{

    WebGrid grid = new WebGrid(Model, canPage: true, canSort: false, rowsPerPage: 3, ajaxUpdateContainerId: "deploymentsGrid");

}

<div id="deploymentsGrid">

    @if (Model.Any())
    {
        @grid.GetHtml(
tableStyle: "table",
columns: grid.Columns(

    grid.Column("Nr", "Nr", format: @<text> @item.Number
    </text>, style: "p13"),

    grid.Column("Description","Description", format: @<text> @item.Description</text>),

    grid.Column("", "", format: @<text>
            <input id="select_bttn" style="width:78px" type="submit" value="select" />
    </text>)
                         )
                     )
    }

</div>

Main View:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<script type="text/javascript">
    $(function () {
        $("#showModal").click(function () {
            $('#myModal').modal('show');
        });
    });
</script>
<input type="button" value="Show Modal" id="showModal" />
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Header</h4>
            </div>
            <div class="modal-body">
                @Html.Action("_GetPartial","Home")
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>