Passing Anchor-Tag-ID zu Javascript in MVC

Question

Hallo dies vielleicht eine Null-Frage, aber hoffentlich kann einige Hilfe gefunden werden.

Ich habe derzeit eine Website, wo ich versteckte divs verwenden, um ein Video zu verbergen, bis der Benutzer es anzeigen möchte. Ich habe seitdem begonnen, die Kodierung zu ändern und zu MVC zu wechseln, aber ich bin jetzt auf das Problem gestoßen, wo ich das erforderliche Div nicht mehr einstellen kann, wenn die Seite geladen wird.

Dies ist Menü ich gerade jetzt haben

<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")</li> 
        <li>@Html.ActionLink("Contact Us", "Contactus", "Home")</li> 
       </ul> 
      </section> 

und das ist das Menü i verwenden möchten und verwendet haben ähnliche, wenn harte nur HTML-Codierung verwenden.

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

Hier ist der Hauptkörper aus dem Blick für die Videos Seite

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

Es gibt wieder eine zweite Folge Liste, wo der Benutzer die gewünschte Folge sie wollen und die div angezeigt können wählen zur Zeit ausgeblendet ist und Das benötigte div und Video wird angezeigt, dies geschieht über Javascript und funktioniert sobald die Seite geladen ist.

Hier ist das JavaScript, das meine Entschuldigung sehr gut

$("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'); 
}); 

Ich bin komplett neu zu MVC Anzeige verwendet wird, einen Teil des Codes kann chaotisch, aber hoffentlich kann eine Antwort zu finden, ich kann verstehen, wie ich gemeint bin um das zur Arbeit zu bringen.

EDIT

Vollansicht Seite

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

TBVideoLink Klasse

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

RouteConfig - einhüllen, dass dies hilft, obwohl nicht berührt wurde und ist die gleiche wie bei

Erstellen der Anwendung

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 } 
      ); 
     } 
    } 
} 

Action von Controller-

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()); 
     } 

Answer 1

Ich vermute, Sie versuchen, nur ein Video pro URL angezeigt werden, mit Hilfe von Javascript zu vermeiden, die anderen Videos zeigen/verstecken. wenn dies der Fall ist, müssen Sie die folgenden Änderungen:

1) DIE KLAGE INNERHALB DER REGLER

kann ich die Aktion aufgerufen nicht sehen, aber es scheint, dass Sie die ganze Liste von Videos vorbei sind als Modell. da Sie die ID als Parameter übergeben haben, können Sie, dass innerhalb der Aktion verwenden:

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) THE VIEW

in der Ansicht jetzt müssen Sie die Art von Liste zu SingleEpisode ändern.es gibt keine Notwendigkeit für Javascript und die foreach-Schleife, wie Sie nur eine einzige Folge sind Rendering

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