2

上部にビデオがあり、選択できるビデオのリストがあるページがあります。現在、ビデオリストのリンクをクリックすると、ページ全体がリロードされます。ページ上部のビデオを含む部分的なビューのみを更新するために必要です。

ここで、JQueryを使用して部分ビューをリロードする方法を示すいくつかの投稿をSOで見ましたが、私の状況では正しく機能させることができませんでした。動画の正しい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メソッドはそれを2番目のjavascriptメソッドに渡し、div"top_video"のhtmlを返される部分ビューに設定します。

何か意味がない場合、または将来誰かがこれに問題を抱えている場合は、私に知らせてください。私はいくつかの助けを提供するために最善を尽くします。

于 2013-01-21T16:47:26.537 に答える
1

ここには、紛らわしく一貫性のない要素がいくつかあると思います。

まず、部分的なビューではなく、完全なビューを返します。これにより、部分ビューに関連する部分だけでなく、含まれているすべての要素が再読み込みされます。

次に、URLのみを生成する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要素にロードすることもできます。

于 2013-01-19T22:24:18.293 に答える
1

画像の周囲を削除して、によって生成されたURLをUrl.Actiondata-href属性に保存することができます。

次に、jqueryloadメソッドを使用してデータをロードできます。

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

ここでコンテンツを動的にロードするフィドルを作成したので、必要に応じて試してみることができます：http: //jsfiddle.net/bTsLV/1/

于 2013-01-19T22:30:28.640 に答える