C# 使用JQuery重新加载局部视图

我有一个页面，上面有一个视频，还有一个视频列表，你可以从中选择。当前，单击视频列表中的链接将重新加载整个页面。我需要它只刷新我在页面顶部包含视频的部分视图

我在这里看到了几篇文章，展示了如何使用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
@{Html.RenderPartial（“StatsVideo”，Model.TopVideo）；}

@foreach（Model.Videos中的var项）
{

@item.Title

}

---

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

我认为这里可能有一些混乱和不一致的内容

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

其次，您使用的是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>

@item.Title

尝试更现代的解决方案

<div class="videoList">
@Ajax.ActionLink(
"Videos", 
"Home", 
"new { topVideo = item.StatsVideoId }, 
new AjaxOptions {  
    HttpMethod = "GET", 
    OnSuccess = "handleSuccess" 
}
)
</div>

@Ajax.ActionLink(
“视频”，
“家”，
“新建{topVideo=item.StatsVideoId}，
新的AjaxOptions{
HttpMethod=“GET”，
OnSuccess=“handleSuccess”
}
)

---

通过这种方式，您可以非常具体地说明希望每个链接执行的操作，并且可以传递多个参数以及定义回调函数“在ajax选项中，将新刷新的局部视图加载到DOM元素中。

您可以删除图像周围的内容，只需将

url.Action

生成的url存储在data href属性中即可

然后可以使用jquery加载方法加载数据：

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

---

我在这里创建了一个可以动态加载内容的小提琴，如果你愿意，你可以玩它：

在我的头撞了几个小时后，我让它开始工作了！作为将来阅读本文的其他人的参考，以下是我如何使其工作的：

我将链接的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>
    }

这段代码应该相当容易理解。基本上，onclick调用第一个javascript方法，然后该方法调用控制器。控制器生成局部视图并返回它。第一个javascript方法将其传递给第二个javascript方法，后者将div“top_video”的html设置为返回的部分视图

---

如果有什么不合理的地方，或者将来有人在这方面遇到困难，请告诉我，我会尽力提供帮助。

我理解这一点。我知道我需要在控制器中使用一种新方法来返回新视频的部分视图。我不知道如何通过jquery调用它，并让结果覆盖当前“top_videos”部分中的内容。我不确定我是否100%理解您的问题。你是说你需要知道jquery与Ajax.ActionLink的等价物是什么？或者你在问如何用控制器方法的结果覆盖“top_videos”div？好的，我在链接中添加了一个onclick：

onclick=“updateTopVideo（@item.StatsVideoId）”

，然后我创建了一个main.js文件并将其包含在视图中。这个脚本文件的内容是：

var updateTopVideo=function（itemId）{$.get（'/Home/StatsVideo/'+itemId'，callBack）}；var callBack=function（response）{$（'#top_video'）.html（response）}最后，我向控制器添加了一个名为StatsVideo的新方法，以返回带有所选视频id参数的部分视图。这似乎应该可以工作，但我没有在控制器中遇到断点。嗯，应该可以。你在《费德勒》中看到了这个请求吗？如果是这样，您是否用HttpGet标记装饰了控制器？这将指示路由查找传入的get呼叫。我将控制器中的方法从
public-ActionResult-StatsVideo（int-StatsVideo Id）
更改为
public-ActionResult-StatsVideo（int-Id）
，它现在可以工作了。我不知道参数名必须是特定于工作的！你好，Eric，$（'top#u video'）.html（回复）；这对我不起作用。
    @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);
    }