我的页面顶部有一个视频,您可以从中选择一个视频列表。目前,单击视频列表中的链接将重新加载整个页面。我需要它只刷新我在页面顶部包含视频的部分视图。
我在这里看到了几篇帖子,展示了如何使用JQuery重新加载部分视图,但是在我的情况下无法使其正常工作。我不确定如何传递正确的视频ID。
控制器:
public ActionResult Videos(int topVideo = 0)
{
VideosModel model = new VideosModel();
model.Videos = StatsVideoService.GetEntityList(new Lookup(TableStatsVideo.IsDeleted, false)).OrderByDescending(x => x.DateCreated).ToList();
if (topVideo == 0)
model.TopVideo = model.Videos.First();
else
{
model.TopVideo = model.Videos.Where(x => x.StatsVideoId == topVideo).FirstOrDefault();
if (model.TopVideo == null)
model.TopVideo = model.Videos.First();
}
return View(model);
}
查看:
@model Project.Models.VideosModel
<section class="videos">
<div id="top_video">
@{Html.RenderPartial("StatsVideo", Model.TopVideo);}
</div>
<ul>
@foreach (var item in Model.Videos)
{
<li>
<div class="videoList">
<a href ="@Url.Action("Videos", "Home", new { topVideo = item.StatsVideoId })">
<img src="@Url.Content("~/Content/img/video-ph.png")" />
</a>
<p class="videoTitle">@item.Title</p>
</div>
</li>
}
</ul>
</section>
如果需要更多信息,请告诉我。
答案 0 :(得分:2)
经过几个小时的猛击我的头撞墙,我开始工作了!正如以后任何正在查看本文的人的参考一样,以下是我如何使用它:
我将链接的onclick设置为指向javascript方法,将视频的id作为参数传递:
@foreach (var item in Model.Videos)
{
<li>
<div class="videoList">
<a href ="#" onclick="updateTopVideo(@item.StatsVideoId)">
<img src="@Url.Content("~/Content/img/video-ph.png")" />
</a>
<p class="videoTitle">@item.Title</p>
</div>
</li>
}
然后我将此脚本包含在底部的视图中:
<script>
var updateTopVideo = function (itemId) {
var url = '@Url.Content("~/Home/StatsVideo/")';
url = url + itemId;
$.get(url, "", callBack, "html");
};
var callBack = function (response) {
$('#top_video').html(response);
};
</script>
最后,我向我的控制器添加了一个方法,该方法将返回屏幕顶部视频所需的局部视图:
public ActionResult StatsVideo(int Id)
{
IStatsVideo vid = StatsVideoService.GetEntity(new Lookup(TableStatsVideo.StatsVideoId, Id));
if (vid == null)
vid = StatsVideoService.GetEntityList(new Lookup(TableStatsVideo.IsDeleted, false)).OrderByDescending(x => x.DateCreated).FirstOrDefault();
return PartialView(vid);
}
这段代码应该很容易理解。基本上,onclick调用第一个javascript方法,然后调用控制器。控制器构建局部视图并返回它。第一个javascript方法将它传递给第二个javascript方法,该方法将div“top_video”的html设置为返回的部分视图。
如果有什么事情没有意义,或者将来有人遇到麻烦,请告诉我,我会尽力提供帮助。
答案 1 :(得分:1)
我认为这里可能存在一些令人困惑和不一致的因素。
首先,您将返回完整视图而不是部分视图。这将重新加载所有包含元素,而不仅仅是与部分视图相关的部分。
其次,您使用的是Url.Action,它只生成网址。我建议使用Ajax.ActionLink,它允许你完全执行ajax调用,刷新部分div的内容并更新目标div元素。
而不是:
<div class="videoList">
<a href ="@Url.Action("Videos", "Home", new { topVideo = item.StatsVideoId })">
<img src="@Url.Content("~/Content/img/video-ph.png")" />
</a>
<p class="videoTitle">@item.Title</p>
</div>
尝试更现代的解决方案
<div class="videoList">
@Ajax.ActionLink(
"Videos",
"Home",
"new { topVideo = item.StatsVideoId },
new AjaxOptions {
HttpMethod = "GET",
OnSuccess = "handleSuccess"
}
)
</div>
通过这种方式,您可以非常具体地了解每个链接要执行的操作,并且可以传递多个参数以及定义回调函数。您还可以在ajax选项中使用“UpdateTargetId”将新刷新的局部视图加载到DOM元素中。
答案 2 :(得分:1)
您可以删除图片周围的内容,只需将Url.Action
生成的网址存储在data-href属性中。
然后您可以使用jquery load方法加载数据:
$(".videolist>img").click(function () {
$("#content").load($(this).data("href"));
});
我创建了一个在此处动态加载内容的小提琴,因此您可以根据需要使用它:http://jsfiddle.net/bTsLV/1/