Solution to Ajax Paging with Ajax Details Display

Mar 5, 2015 at 8:29 AM
This took me a little while to figure out, and I couldn't find the solution on here, so I thought I would share it.

PAGE
<div id="mainBody">
    <div class="inner">
        <div class="inner-left">
            <div id="mylists" data-source-url="@Url.Action("_ListMain")">
                @{ Html.RenderAction("_ListMain", this.ViewData.Model); }
            </div>
        </div>
        <h3 class="column-header">Details</h3>
        <div id="details" class="inner-right">
            @{ Html.RenderAction("_ListDetails", this.ViewData.Model); }
        </div>
    </div>
</div>
CONTROLLER
public ActionResult _ListMain()
        {
            PageModels viewdata = new PageModels();
            viewdata.Main = repository.GetMain();

            return PartialView(viewdata);
        }

        [HttpPost]
        public ActionResult _ListMain(Models.PageModels viewdata)
        {
            return PartialView(viewdata);
        }

        public ActionResult _ListDetails()
        {
            PageModels viewdata = new PageModels();
            viewdata.MainDetails = repository.GetEmptyMain();

            return PartialView(viewdata);
        }

        [HttpPost]
        public ActionResult _ListDetails(int MainID)
        {
            PageModels viewdata = new PageModels();
            viewdata.MainDetails = repository.GetMain(MainID);

            return PartialView(viewdata);
        }
SCRIPT
var detailsUrl = '@Url.Action("_ListDetails", "*Controller*")';

         $(function () {
             ajaxifyGridMvc("#mylists");
             readyGridSelect();
         })
         function readyGridSelect() {
             var grid = $(".grid-mvc").gridmvc();
             grid.onRowSelect(function (e) {
                 $.ajax({
                     url: detailsUrl,
                     dataType: 'html',
                     data: { rowID: e.row.RowID },
                     traditional: true,
                     type: 'POST',
                     success: function (content) {
                         success(content);
                     }
                 })
                 function success(content) {
                     $("#details").html(content);
                 }
             });
         }
         function ajaxifyGridMvc(gridContainerSelector, successCallback) {
             $(gridContainerSelector).on("click", ".grid-header a, .grid-pager li a",
                 function (event) {
                     var $grid_container = $(event.delegateTarget);
                     var baseUrl = $grid_container.attr("data-source-url");
                     var link = $(this).attr("href");
                     $.get(baseUrl + link, function (data) {
                         if (data.Status <= 0) {
                             alert(data.Message);
                             return;
                         }
                         $grid_container.html(data);
                         $grid_container.ajaxComplete(function() {
                             readyGridSelect();
                         });
                         if ($.isFunction(successCallback))
                             successCallback();
                     });

                     return false;
                 });
         }
This way you can page and keep the command to click the row that will access your details.

Happy coding.