asp.net MVC active menu

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

Hey buzzzz

håber lidt på at du evt. kunne hjælpe mig med noget kode til det ?

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

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

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

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.

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 ?

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.

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.

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.

står som <li class="selected"><a href="/Home/Test2">Test2</a></li>

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

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 ?

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

Velbekomme :-)

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. :-/

virker nu :-) .menu li.selected a


tak for hjælpen platik. fandme glad for! smider du et svar!?!