2

我有一个页面，顶部有一个视频，还有一个可供您选择的视频列表。目前，单击视频列表中的链接将重新加载整个页面。我需要它来仅刷新我在页面顶部包含视频的部分视图。

我在 SO 上看到了几篇文章，展示了如何使用 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>

如果需要更多信息，请告诉我。

4

3 回答 3

3

在把我的头撞在墙上几个小时后，我让它工作了！作为对将来查看本文的任何其他人的参考，以下是我如何使它工作的：

我将链接的 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 设置为返回的部分视图。

如果有任何不合理的地方，或者将来有人遇到问题，请告诉我，我会尽力提供一些帮助。

于 2013-01-21T16:47:26.537 回答
1

我认为这里可能有几个令人困惑和不一致的元素。

首先，您返回的是完整视图而不是部分视图。这会重新加载所有包含的元素，而不仅仅是与您的局部视图相关的部分。

其次，您使用的是 Url.Action，它只生成 url。我建议使用 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 元素中。

于 2013-01-19T22:24:18.293 回答
1

You can remove the around the image and just store the url generated by the Url.Action in a data-href attribute.

Then you can use the jquery load method to load the data:

$(".videolist>img").click(function () {
    $("#content").load($(this).data("href"));
});

I created a fiddle that loads content dynamically here, so you can play with it if you want: http://jsfiddle.net/bTsLV/1/

于 2013-01-19T22:30:28.640 回答