Question

I am having a difficult time figuring out how to get AJAX working with child actions in MVC3. I have a View that contains a section rendered by a child action. That child action renders a partial view which has a paged list on it. I need to make it so that when a user clicks on another page number on the page list pager only the bottem part of the view containing a list of videos will be updated. I have included my code and would really appreciate some help as I am still confused on some of the ways MVC3 works with AJAX. Thanks in advance.

My View:

    @model UltimateGameDB.Domain.Entities.Video
    @{
        ViewBag.Title = "Video Home";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    @using PagedList
    @using PagedList.Mvc

    @section MainBanner {
        <section id="videos-featured">
            @Html.Partial("_Video", Model)

            <div id="videos-featured-detail">
                @Html.Partial("_VideoDetail", Model)

                @Html.Action("MiniFeaturedVideo", "Video") 
            </div>
        </section>
    }

    @Html.Action("RecentVideos", "Video", new { page = ViewBag.page })

My Controller Methods:

  public ActionResult VideoHome(Guid? selectedVideoId, int? page)
  {
     var pageIndex = page ?? 1;
     ViewBag.page = pageIndex;

     if (selectedVideoId == null)
     {
        selectedVideoId = ugdb.Videos.Where(v => v.IsFeatured == true).OrderBy(v => v.Timestamp).FirstOrDefault().VideoID;
        ViewBag.Autoplay = 0;
     }
     else
     {
        ViewBag.Autoplay = 1;
     }

     return View(ugdb.Videos.Find(selectedVideoId));
  }

  [ChildActionOnly]
  public ActionResult RecentVideos(int? page)
  {
     IQueryable<Video> videoList = ugdb.Videos.OrderBy(v => v.Timestamp);

     var pageIndex = page ?? 1;
     var onePageOfVideos = videoList.ToPagedList(pageIndex, 8);
     ViewBag.OnePageOfVideos = onePageOfVideos;

     return PartialView("_RecentVideos");
  }

My Partial View:

    @using PagedList
    @using PagedList.Mvc

    <div id="main-content" class="videos">
        <section>
            <a class="body-title"><span>RECENT VIDEOS</span><span class="title-arrow"></span></a>
            <div class="main-hr"></div>
            @foreach (var video in ViewBag.OnePageOfVideos)
            {
                <a class="video-entry" href="@Url.Action("VideoHome", "Video", new { selectedVideoId = video.VideoID })">
                    <img src="http://img.youtube.com/vi/@video.YouTubeID/default.jpg" alt="@video.VideoName" />
                    <div class="video-details">
                        <h2>@video.VideoName</h2>
                        <p>@video.VideoType</p>
                    </div>
                </a>
            }        
        </section>
        <div class="pagination">
            @Html.PagedListPager((IPagedList)ViewBag.OnePageOfVideos, page => Url.Action("VideoHome", "Video", new { page = page }), PagedListRenderOptions.OnlyShowFivePagesAtATime)
        </div>
    </div>

Answer 1

What you’re probably gonna want to do is insert an AjaxForm after the main-content div and end it before the main-content div closes.

Then the PagedListPager can submit to a Json Method in your controller which will return the content (e.g. list of videos) for the Ajax form to update.