用JQuery重新加载部分视图 [英] Reloading Partial View with JQuery

问题描述

我有一个页面，该页面的顶部有一个视频，并提供了可供选择的视频列表.当前，单击视频列表中的链接将重新加载整个页面.我只需要刷新页面顶部包含视频的局部视图即可.

I have a page with a video at the top and a list of videos you can choose from. Currently, clicking a link in the video list will reload the entire page. I need it to only refresh the partial view I have containing the video at the top of the page.

我在SO上看到了几篇文章，它们展示了如何使用JQuery重新加载部分视图，但是在我的情况下无法使其正常工作.我不确定如何传递正确的视频ID.

I saw several posts here on SO showing how to reload partial views with JQuery, but couldn't get it to work correctly in my situation. I'm unsure how to pass the correct id of the video along.

控制器:

    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>

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

If there's any more information needed, please let me know.

推荐答案

在将我的头撞在墙上几个小时之后，我开始工作了！就像以后查看本文的其他人的参考一样，这就是我如何使其工作的方法:

After several hours of bashing my head against the wall, I got it to work! Just as a reference to anyone else in the future who's viewing this article, here's how I got it to work:

我将链接的onclick设置为指向javascript方法，并将视频的id作为参数传递:

I set the onclick of the link to point to a javascript method, passing in the id of the video as a parameter:

    @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>
    }

然后，我将该脚本包含在底部的视图中:

And then I included this script in the view at the bottom:

<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>

最后，我向控制器添加了一个方法，该方法将在屏幕顶部返回视频所需的部分视图:

Finally, I added a method to my controller that would return the partial view needed for the video at the top of the screen:

    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设置为返回的局部视图.

This code should be fairly easy to understand. Basically, the onclick calls the first javascript method, which then calls the controller. The controller builds the partial view and returns it. The first javascript method passes it to the second javascript method which sets the html of the div "top_video" to be the returned partial view.

如果没有任何意义，或者将来有人遇到麻烦，请告诉我，我会尽力提供一些帮助.

If anything doesn't make sense, or anyone's having trouble with this in the future, let me know and I'll do my best to offer some help.

这篇关于用JQuery重新加载部分视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！