将锚标记id传递给MVC中的javascript

Question

嗨，这可能是一个空问题，但希望可以找到一些帮助。

我目前有一个网站，我使用隐藏的div来隐藏视频，直到用户希望查看它。我已经开始改变编码并转移到MVC但我现在遇到了一个问题，我无法再在页面加载时设置所需的div。

这是我刚才的菜单

<section id="menu">
                <ul id="main">
                    <li id="first">@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("League Table", "Tables", "Home")</li>
                    <li>@Html.ActionLink("Fixtures/Results", "Fixtures", "Home")</li>
                    <li>@Html.ActionLink("Clubs", "Clubs", "Home")</li>
                    <li>@Html.ActionLink("Talkin' Baws", "TBVideoPlayer", "Home")
                    <ul>
                        <li><a href="TalkiBaw.html?id='ep1'">Episode 1</a></li>
                        <li><a href="TalkiBaw.html?id='ep2'">Episode 2</a></li>
                        <li><a href="TalkiBaw.html?id='ep3'">Episode 3</a></li>
                        <li><a href="TalkiBaw.html?id='ep4'">Episode 4</a></li>
                        <li><a href="TalkiBaw.html?id='ep5'">Episode 5</a></li>
                   </ul>
                   </li>
                    <li>@Html.ActionLink("Contact Us", "Contactus", "Home")</li>
                </ul>
            </section>

这是我想要使用的菜单，并且在仅使用HTML进行硬编码时使用了类似的菜单。

<section id="epsList">
            <h3>Episode List</h3>
            <div id="episodes">
                <ul>
                    @foreach (var item in Model)
                    {
                        var temp = "showEp" + @item.Episode_Number;
                        <li><a href="#" id=@temp>Episode @item.Episode_Number</a></li>
                    }
                </ul>
            </div>
            <section class="ads">
                <img src="../Pictures/Logo.png" alt="Sunday Central AFL" />
            </section>
            <section class="ads">
                <img src="../Pictures/Logo.png" alt="Sunday Central AFL" />
            </section>
        </section>
        <section id="videoPlayer">
            @foreach (var item in Model)
            {
                var epId = "ep" + @item.Episode_Number;
                <div id = @epId>
                    <h3>Talkin Baws - Episode @epId </h3>
                    <iframe src=@item.Link frameborder="0" allowfullscreen></iframe>
                </div>
            }                
        </section>
    </section>

以下是视频页面视图的主体

$("document").ready(function()
{
    function getUrlParameter(sParam){
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('?'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
    };

    var id = getUrlParameter('id');

    $('#ep1').hide();
    $('#ep2').hide();
    $('#ep3').hide();
    $('#ep4').hide();
    $('#ep5').hide();
    $('#ep6').hide();
    $('#ep7').hide();
    $('#ep8').hide();
    $('#ep9').hide();
    $('#ep10').show();

    $('#showEp1').click(function()
    {
        $('#ep1').show();
        $('#ep2').hide();
        $('#ep3').hide();
        $('#ep4').hide();
        $('#ep5').hide();
        $('#ep6').hide();
        $('#ep7').hide();
        $('#ep8').hide();
        $('#ep9').hide();
        $('#ep10').hide();
    });

    $('#showEp2').click(function()
    {
        $('#ep1').hide();
        $('#ep2').show();
        $('#ep3').hide();
        $('#ep4').hide();
        $('#ep5').hide();
        $('#ep6').hide();
        $('#ep7').hide();
        $('#ep8').hide();
        $('#ep9').hide();
        $('#ep10').hide();
    });

    $('#showEp3').click(function()
    {
        $('#ep1').hide();
        $('#ep2').hide();
        $('#ep3').show();
        $('#ep4').hide();
        $('#ep5').hide();
        $('#ep6').hide();
        $('#ep7').hide();
        $('#ep8').hide();
        $('#ep9').hide();
        $('#ep10').hide();
    });

    $('#showEp4').click(function()
    {
        $('#ep1').hide();
        $('#ep2').hide();
        $('#ep3').hide();
        $('#ep4').show();
        $('#ep5').hide();
        $('#ep6').hide();
        $('#ep7').hide();
        $('#ep8').hide();
        $('#ep9').hide();
        $('#ep10').hide();
    });

    $('#showEp5').click(function()
    {
        $('#ep1').hide();
        $('#ep2').hide();
        $('#ep3').hide();
        $('#ep4').hide();
        $('#ep5').show();
        $('#ep6').hide();
        $('#ep7').hide();
        $('#ep8').hide();
        $('#ep9').hide();
        $('#ep10').hide();
    });

    $('#show' + id).trigger('click');
}); 

还有第二集列表，用户可以选择他们希望的所需剧集，并隐藏当前显示的div，并显示所需的div和视频，这是通过javascript完成的，并且一旦页面加载就可以工作。

以下是使用的JavaScript

@model SundayCentralAFL.Models.TBVideoLink
//@model IEnumberable<SundayCentralAFL.Models.TBVideoLink> this is what  i used to have
@{
    ViewBag.title = "Talkin' Baws";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <section id="bodyWrapper">
        <section id="leftBody">
            <section id="epsList">
                <h3>Episode List</h3>
                <div id="episodes">
                    <ul>
                        @for (int i = 1; i <= ViewBag.TotalEpisodes; i++)
                        {
                            <li>@Html.ActionLink("Talkin' Baws", "TBVideoPlayer", "Home", new { id = i }, null)</li>
                        }
                    </ul>
                </div>
                <section class="ads">
                    <img src="../Pictures/Logo.png" alt="Sunday Central AFL" />
                </section>
                <section class="ads">
                    <img src="../Pictures/Logo.png" alt="Sunday Central AFL" />
                </section>
            </section>
            <section id="videoPlayer">
                <h3>Talkin Baws - Episode @Model.Episode_Number </h3>
                <iframe src=@Model.Link frameborder="0" allowfullscreen></iframe>

            </section>
        </section>
        <section id="rightBody">
            <section class="ads">
                <a href="https://www.facebook.com/sundaycentralmedia" alt="Sunday Central AFL" title="Sunday Central AFL" target="_blank"><img src="../Pictures/Logo.png" alt="Sunday Central AFL" /></a>
            </section>
            <section class="ads">
                <img src="../Pictures/Logo.png" alt="Sunday Central AFL" />
            </section>
            <section class="ads">
                <a href="https://www.facebook.com/sundaycentralmedia" alt="Sunday Central AFL" title="Sunday Central AFL" target="_blank"><img src="../Pictures/Logo.png" alt="Sunday Central AFL" /></a>
            </section>
            <section class="ads">
                <img src="../Pictures/Logo.png" alt="Sunday Central AFL" />
            </section>
        </section>
    </section>

我对MVC广告是全新的一些代码可能很乱我的道歉但希望可以找到答案我可以理解我是如何让这个工作。

修改

全视图页面

namespace SundayCentralAFL.Models
{
    using System;
    using System.Collections.Generic;

    public partial class TBVideoLink
    {
        public int Series { get; set; }
        public int Episode_Number { get; set; }
        public string Link { get; set; }
        public string Date { get; set; }
    }
}

TBVideoLink类

namespace SundayCentralAFL
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

RouteConfig - 虽然没有触及，但有助于创建应用程序

public ActionResult TBVideoPlayer(int id)
        {
                TBVideoLink episode = db.TBVideoLinks.Where(ep => ep.Episode_Number == id).FirstOrDefault();

                ViewBag.TotalEpisodes = db.TBVideoLinks.Count();


            return View(episode);
            //var query = db.TBVideoLinks;
            //return View(query.ToList());
        }

来自Controller的ActionResult

(resp) ->
  $scope.myName = resp.data.name
  $timeout ->
    $('#myName').val()

Answer 1

我猜测你正在尝试每个网址只显示一个视频，避免使用javascript来显示/隐藏其他视频。如果是这种情况，您需要更改以下内容：

1）控制器内的动作

我无法看到所调用的动作，但似乎您将整个视频列表作为模型传递。因为您将id作为参数传递，所以您可以在操作中使用它：

public TBVideoPlayer(string id)
{
    ...retrieve your episode
    SingleEpisode episode = listOfEpisodes.Where(ep => ep.Episode_Number == id).FirstOrDefault();

  ...you can still pass the number of total episodes to create the links in the ViewBag

  ViewBag.TotalEpisodes = listOfEpisodes.Count();


   return View(episode);
}

2）观点

现在，在视图中

需要将类型从List更改为SingleEpisode。因为你只是渲染一集，所以不需要javascript和foreach循环

    <section id="epsList">
            <h3>Episode List</h3>
            <div id="episodes">
                <ul>
                    @for(int i = 1; i <= ViewBag.TotalEpisodes; i++)
                    {
                        <li>@Html.ActionLink("Talkin' Baws", "TBVideoPlayer", "Home", new { id = i },null)</li>
                    }
                </ul>
            </div>
            <section class="ads">
                <img src="../Pictures/Logo.png" alt="Sunday Central AFL" />
            </section>
            <section class="ads">
                <img src="../Pictures/Logo.png" alt="Sunday Central AFL" />
            </section>
        </section>
        <section id="videoPlayer">
            <h3>Talkin Baws - Episode @Model.Episode_Number</h3>
            <iframe src="@Model.Link" frameborder="0" allowfullscreen></iframe>          
        </section>
    </section>