我很难弄清楚如何让 AJAX 在 MVC3 中处理子操作。我有一个视图,其中包含由子操作呈现的部分。该子操作呈现一个局部视图,其中包含一个分页列表。我需要这样做,以便当用户单击页面列表寻呼机上的另一个页码时,只会更新包含视频列表的视图的底部部分。我已经包含了我的代码,并且非常感谢一些帮助,因为我仍然对 MVC3 与 AJAX 一起使用的某些方式感到困惑。提前致谢。
我的观点:
@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 })
我的控制器方法:
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");
}
我的部分观点:
@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>