Hejsa
Jeg forsøger at lære lidt mere omkring MVC og har derfor kastet mig over MVC 4. Syntaksen er lidt anderledes end det jeg kan finde om MVC 3 og bruger "@" langt mere end "<%" så kan være svært at finde rette og brugbare synes jeg, men ellers meget smart.
Det er lidt anderledes end jeg er vant til og også meget anderledes end det jeg har prøvet fra webforms (ASP.NET C#).
Indtil videre har jeg lavet mig selv en menu til at navigere, men ikke selve siderne endnu.
Det jeg forsøger nu at lave er at lave en menu der viser den aktive side, og ville gerne forsøge at holde det i rent c#, ASP.NET og MVC så vidt muligt.
Så kan jeg altid begynde at forbedre mine evner til javascript senere, men til at starte med vil jeg gerne holde mig til en ting af gangen.
Hvis jeg har:
LINK1
LINK2
LINK3
LINK4
Så vil jeg gerne have at LINK1 har en anden class sat i sit actionlink eller a-tag, således at det bliver fremhævet at det er dette der er valgt. Og såldes når man trykker på LINK2 så markeres denne og de andre bliver almindelige.
Min umiddelbare tanke er at holde en variabel der siger hvilket link der er trykket på.
Således at når man trykker på linket aktiveres min server-side og modtager dermed denne post-back hvor jeg kan sætte id'et på den valgte. Og i hver link kan jeg så lave et inline-script der ser om id'et på dette link er lig med navnet i variablen og ud fra dette sætter om der skal bruges klasse1 eller 2 (aktive).
Det hele laves i
_layout.cshtml og har lidt kodestumper her:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <link rel="stylesheet" type="text/css" href="../../Content/MainPage.css" />
- @{
- var activeClass = "";
- var linkActiveClass = "";
- }
- </head>
- <body style="padding: 0px; margin: 0px;">
- <div class="center-box">
- <header id="header">
- <div class="header-logo">
- <img src="../../Images/Icon.jpg" class="small-header-logo" />
- </div>
- <div class="header-title">
- <h1 class="top-title">PAGE TITLE HERE</h1>
- </div>
- <div class="top-menu-holder">
- <div runat="server" class="top-menu-item @activeClass">
- <div class="top-menu-text">
- <h2 id="1" class="top-menu-text-h2">
- <a id="link_one" runat="server" href="@{Url.Action("Index", "Helloworld");}" class="top-menu-link" onclick="@{ activeClass = "top-menu-item-active"; linkActiveClass = "top-menu-link-active"; }">Home</a>
- </h2>
- </div>
- </div>
- <div class="top-menu-item @activeClass">
- <div class="top-menu-text">
- <h2 id="2" class="top-menu-text-h2">@Html.ActionLink("Side 2", "Index", "HelloWorld", null, new { @class = "top-menu-link " + @linkActiveClass })
- </h2>
- </div>
- </div>
Dog kan jeg ikke få den til at gøre det rigtigt da den altid blot sætter menupunkt 2 til det aktive efter at den første del sætter den
activeClass &
linkActiveClass.
Håber det er nogenlunde forståeligt og nogen har en ide om hvordan det kan løses.
Desværre har jeg ikke noget sted at ligge det og vise jer.