Avatar billede kongen72 Nybegynder
16. december 2010 - 21:50 Der er 16 kommentarer og
1 løsning

asp.net MVC active menu

Hej

Jeg er ny i MVC og er igang med at lave en menu på min masterpage. Når jeg klikker på en knap skal knappen være aktiv (ændre css class) på den valgte side.

Håber nogen kan hjælpe mig med dette problem.

Tak på forhånd ;-)
Avatar billede Syska Mester
16. december 2010 - 22:00 #1
Det skal du selv sørge for. MVC er lidt ligesom back to basics.

ASP.NET WebForms, som du måske er vandt til har ViewState(som holder styr på såden nogen ting for dig) ... some love it, some hate it.

Der må være en grund til at du er skiftet til MVC ?

mvh
Avatar billede kongen72 Nybegynder
16. december 2010 - 22:12 #2
Hey buzzzz

håber lidt på at du evt. kunne hjælpe mig med noget kode til det ?
Avatar billede Syska Mester
16. december 2010 - 22:28 #3
Jeg bruger selv MVC, da jeg ikke har brugt for alt det lir og viewstate.

Men en hurtig google gav: http://www.telerik.com/products/aspnet-mvc/menu.aspx men det koster penge.

Simpelt sagt, så skal du jo bare ændre det html som du generere til at tage en css class på det som nu er aktivt.

Hvordan udskriver du din menu nu?

mvh
Avatar billede kongen72 Nybegynder
17. december 2010 - 01:15 #4
<ul>
    <% foreach (string KategoriNavn in Model.Kategorier) { %>
        <li>
        <%: Html.ActionLink(KategoriNavn, "Kategori", new { kategori= kategoriNavn})%>
        </li>
    <% } %>
</ul>

kan du hjælpe med noget code til hvordan jeg får det på plads ?
Avatar billede Syska Mester
17. december 2010 - 01:30 #5
I overstående skal du bare have noget logik ind, som smider en css class på den kategory du står på ...

I din model kan du smider en "Selected" property på ...

if så:

if(Model.Selected == name)
Html.ActionLink(name, "Kategori", new { kategori= kategoriNavn}, new { @class = "selected" });
else
Html.ActionLink(name, "Kategori", new { kategori= kategoriNavn});

Mener 4 argument er HtmlAttributes, men kan tage fejl.

Overstående er kun tanke gangen, men burde virke, hvis du lige lavet det om til valid kode :-)
Avatar billede platik Nybegynder
17. december 2010 - 10:54 #6
Havde samme problem og fandt en helper på nettet.

Har derfor lagt følgende klasse i en mappe: helpers.

using System;
using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace ImflexMvc.Helpers
{
        /// <summary>
        /// This helper method renders a link within an HTML LI tag.
        /// A class="selected" attribute is added to the tag when
        /// the link being rendered corresponds to the current
        /// controller and action.
        ///
        /// This helper method is used in the Site.Master View
        /// Master Page to display the website menu.
        /// </summary>
        public static class MenuItemHelper
        {
            public static string MenuItem(this HtmlHelper helper, string linkText, string actionName, string controllerName)
            {
                string currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
                string currentActionName = (string)helper.ViewContext.RouteData.Values["action"];

                var builder = new TagBuilder("li");

                // Add selected class
                if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) && currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase))
                    builder.AddCssClass("active"); //bestem selv hvad den skal hede. active kan erstattes med hvad du nu selv synes.

                // Add link
                builder.InnerHtml = helper.ActionLink(linkText, actionName, controllerName).ToString();

                // Render Tag Builder
                return builder.ToString(TagRenderMode.Normal);
            }

        }

}

På den side hvor du ønsker dine menu punkter indsætter du
<%@ Import Namespace="ditnamespace.Helpers" %>

Og så bruger du i stedet:
<%= Html.MenuItem("Forside", "Index", "Home")%>
når du vil indsætte et menu punkt.

i din css skriver du så hvordan active skal styles.

Du kan jo evt. udvide metoden så den kan tage din kategori med.

Håber det giver mening og at det var det du søgte.
Avatar billede kongen72 Nybegynder
18. december 2010 - 18:05 #7
hej platik

Lige præcis det jeg har ledt efter. tak for det.
Får dog et lille problem med at den ikke kan finde mit namespace.

har smidt <%@ Import Namespace="www.minhjemmeside.dk.Helpers" %> ind på min masterpage eftersom min menu ligger der.

Kan det evt. være fordi jeg har punktumer i mit namespace ?
Avatar billede kongen72 Nybegynder
18. december 2010 - 19:01 #8
fik mit namespace til at virke.. men menu-knapperne bliver ikke "active", når jeg klikker på dem !

Noget jeg har glemt ??


Håber du kan hjælpe mig.
Avatar billede platik Nybegynder
19. december 2010 - 21:15 #9
Linker du med Html.MenuItem?

Skal nok se koden hvor du linker hvis jeg skal have en chance.

Og så kan jeg se i den kode jeg har pastet har jeg ikke fået rettet det namespace på helper klassen. Hvis du ikke selv har gjort det kan det give problemer.
Avatar billede kongen72 Nybegynder
19. december 2010 - 23:14 #10
hej platik

her er koden:


Helpers/MenuItemHelper.cs
using System;
using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace www.minhjemmeside.dk.Helpers
{
    /// <summary>
    /// This helper method renders a link within an HTML LI tag.
    /// A class="selected" attribute is added to the tag when
    /// the link being rendered corresponds to the current
    /// controller and action.
    ///
    /// This helper method is used in the Site.Master View
    /// Master Page to display the website menu.
    /// </summary>
    public static class MenuItemHelper
    {
        public static string MenuItem(this HtmlHelper helper, string linkText, string actionName, string controllerName)
        {
            string currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
            string currentActionName = (string)helper.ViewContext.RouteData.Values["action"];

            var builder = new TagBuilder("li");

            // Add selected class
            if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) && currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase))
                builder.AddCssClass("selected");

            // Add link
            builder.InnerHtml = helper.ActionLink(linkText, actionName, controllerName).ToString();

            // Render Tag Builder
            return builder.ToString(TagRenderMode.Normal);
        }
    }
}


Masterpage
<%@ Import Namespace="www.minhjemmeside.dk.Helpers" %>


                    <ul class="menu">
                        <%= Html.MenuItem("Test1", "Index", "Home") %>
                        <%= Html.MenuItem("Test2", "Index", "Home")%>
                        <%= Html.MenuItem("Test3", "Index", "Home")%>
                        <%= Html.MenuItem("Test4", "Index", "Home")%>
                    </ul>


Site.css

.menu li a:visited
{
    color: red;
}
.menu li a:hover, .menu li .selected
{
    background-color: green;
}






I min kildekode står den som:
                    <ul class="menu">

                        <li><a href="/">Test1</a></li>

                        <li class="current"><a href="/Home/Test2">Test2</a></li>

                        <li><a href="/Home/Test3">Test3</a></li>

                        <li><a href="/Home/Test4">Test4</a></li>

                    </ul>




Håber dette giver dig et lille overblik til, at finde fejlen. Tak på forhånd.
Avatar billede kongen72 Nybegynder
19. december 2010 - 23:17 #11
står som <li class="selected"><a href="/Home/Test2">Test2</a></li>
Avatar billede platik Nybegynder
19. december 2010 - 23:47 #12
<li class="selected"><a href="/Home/Test2">Test2</a></li>

Står det der når du viser sidens kildekode?

For så virker det tilsyneladende fint nok. Så er problemet din css?
Bliver baggrunden grøn når du holder musen over menupunkterne?
Avatar billede kongen72 Nybegynder
20. december 2010 - 04:47 #13
ja sådan ser min kildekode ud!

Når jeg hover musen over menupunkterne så bliver mine knapper grønne ja.

hvad kan problemet så være ?
Avatar billede platik Nybegynder
20. december 2010 - 17:30 #14
Er ikke så super skarp til css.

Kunne være:

.menu li a:hover, .menu li .selected
{
    background-color: green;
}

Er ret sikker på der må være mellemrum mellem li og .selected
Prøv evt. at fjerne det (.menu li.selected).
Avatar billede platik Nybegynder
20. december 2010 - 19:16 #15
Velbekomme :-)
Avatar billede kongen72 Nybegynder
20. december 2010 - 18:09 #16
hmm. virker heller ikke. som om den ikke kan skabe forbindelse. har lavet en css class som bare hedder .selected {background-color: green}. Den bliver heller ikke fundet noget. :-/
Avatar billede kongen72 Nybegynder
20. december 2010 - 18:14 #17
virker nu :-) .menu li.selected a


tak for hjælpen platik. fandme glad for! smider du et svar!?!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester