MVC3 Ajax ChildAction - ajax

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.