使用JQuery重新加载部分视图

我的页面顶部有video,您可以选择video列表。 目前,单击video列表中的链接将重新加载整个页面。 我需要它只刷新我在页面顶部包含video的局部视图。

我在这里看了几篇post,展示了如何用JQuery重新加载部分视图,但是在我的情况下无法正常工作。 我不确定如何传递video的正确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 (var item in Model.Videos) {
  • @item.Title

  • }

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

经过几个小时的抨击我的头靠在墙上,我得到了它的工作! 作为对未来观看本文的其他人的参考,以下是我如何使用它:

我将链接的onclick设置为指向javascript方法,将video的id作为参数传递:

  @foreach (var item in Model.Videos) { 
  • @item.Title

  • }

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

      

    最后,我向我的控制器添加了一个方法,它将返回屏幕顶部video所需的局部视图:

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

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

    我认为这里可能存在一些令人困惑和不一致的因素。

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

    其次,您使用的是Url.Action,它只生成url。 我建议使用Ajax.ActionLink,它允许您完全执行ajax调用,刷新部分div的内容并更新目标div元素。

    代替:

     

    @item.Title

    尝试更现代的解决方案

     
    @Ajax.ActionLink( "Videos", "Home", "new { topVideo = item.StatsVideoId }, new AjaxOptions { HttpMethod = "GET", OnSuccess = "handleSuccess" } )

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

    您可以删除图像周围的内容,只需将Url.Action生成的url存储在data-href属性中。

    然后您可以使用jquery load方法加载数据:

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

    我在这里创建了一个动态加载内容的小提琴,所以你可以随意使用它: http : //jsfiddle.net/bTsLV/1/