dotNETportal.cz

Dobrý den,

v masterpage mám komponentu menu, kterou načítám z databáze. V události MenuItemDataBound definuji každé položce ImageUrl. Chtěl bych, aby po najetí myši na položku se vždy změnil obrázek u jednotlivých položek. A ještě lepší by bylo, kdybych si mohl ke každé položce přidat imagebutton, je to možné nějak jednoduše udělat? Budu vděčný za jakékoliv nasměrování. Děkuji Martin

  protected void Menu1_MenuItemDataBound(object sender, MenuEventArgs e)
    {
        e.Item.ImageUrl = "~/App_Themes/Theme1/design/sipka.png";

    }

Toto půjde udělat pouze pomocí Javascriptu.Myslím,že už se tu něco podobného jednou řešilo

Představoval jsem si to tak, že si nějak nadefinuji MenuItem a přidám ji atribut onmouseover do události Page_Load, asi takto:

 Menu1.Attributes.Add("onmouseover", "src='" + "App_Themes/Theme1/design/sipka2.png" + "'"); 

Ale opravdu nevím, jak to nadefinovat. Děkuji za reakci, Martin

Opravdu nikdo neví?

Martin

Stačí trošku hledat;)

Řešil jsem tady na foru podobný problém: http://www.vbnet.cz/forum-tema--4129-zve...

Vás bude asi zajímat tento řádek:

<asp:image runat="server" id="hodnoceni1"  onmouseover="this.src='App_Themes/Default/Images/hodnoceni_plne.png'" onmouseout="this.src='App_Themes/Default/Images/hodnoceni_prazdne.png'" width="16px" height="16px" />

Jedná se o změnu obrázku v asp komponentě image. Kód bude v HTML tam kde máte danou komponentu vloženou.

Děkuji za reakci. Asi jsem se špatně vyjádřil, jak změnit imageurl po najetí myši na obrázek umím. Ale nevím jak to nadefinovat v komponente menu -> menuitem, kdyz celé menu načítám z databáze.

Rád bych přidal ke každé položce menu obrázek, jak jsem popsal v původním dotazu a po najetí myší na položku se obrázek změnil.

Děkuji Martin

Asi si budete muset pohrát se šablonami položky menu. Jinak tam obrázky s vlastními skripty, které je budou měnit, asi nedostanete.

http://weblogs.asp.net/dannychen/archive...

Děkuji, zkoušel jsem si pohrát se šablonami, ale mám trochu problém s javascriptem.

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" OnMenuItemDataBound="Menu1_MenuItemDataBound">
                        <StaticItemTemplate>
                            <asp:Image ID="Image1" ImageUrl="~/App_Themes/Theme1/design/sipka.png" onmouseover="src='App_Themes/Theme1/design/sipka2.png';" name="img"
                                onmouseout="src='App_Themes/Theme1/design/sipka.png';" runat="server"></asp:Image>
                            <asp:Label runat="server" ID="Label1" Text='<%# Eval("Text") %>' onmouseover="document.getElementById('Image1.ClientID').src = 'App_Themes/Theme1/design/sipka2.png';" />
                        </StaticItemTemplate>
                    </asp:Menu>

Když najedu myší na obrázek, tak onmouseover funguje, ale když najedu na text (label), tak zůstane obrázek stejný. Poradíte mi prosím jak po najetí myší na label změnit vždy obrázek u dané položky?

Děkuji Martin

Výraz Image1.ClientID je špatný název prvku ve stránce, nenajde ho to a proto se obrázek nezmění.

Jako parametr funkce getElementById musíte dát skutečné ID obrázku, které sice získáte přes ClientID, ale jde to jedině v kódu.

Menu bude mít určitě nějakou událost ItemCreating nebo ItemDataBound. V ní se dostanete na jednotlivé položky a v kódu můžete tuto vlastnost nastavit.

Děkuji za rychlou reakci. Po přidání atributu onmouseover labelu, hází label NullReferenceException. Kde dělám prosím chybu?

 
protected void Menu1_MenuItemDataBound(object sender, MenuEventArgs e)
    {

        Label lb = (Label)Menu1.FindControl("Label1");
        Image i = (Image)Menu1.NamingContainer.FindControl("Image1");
        lb.Attributes.Add("OnMouseOver", "document.getElementById('" + i.ClientID + "').src = 'App_Themes/Theme1/design/sipka2.png'");

    }

 <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" OnMenuItemDataBound="Menu1_MenuItemDataBound">
                        <StaticItemTemplate>
                            <asp:Image ID="Image1" ImageUrl="~/App_Themes/Theme1/design/sipka.png" onmouseover="src='App_Themes/Theme1/design/sipka2.png';"
                                onmouseout="src='App_Themes/Theme1/design/sipka.png';" runat="server">
                            </asp:Image>
                            <asp:Label runat="server" ID="Label1" Text='<%# Eval("Text") %>' />
                        </StaticItemTemplate>
                    </asp:Menu>

Potíž je v tom, že label hledáte pomocí FindControl v celém Menu, ale on je tam několikrát (v akždé položce jednou).

Hledejte jen v e.Item.

To samé s tím obrázkem - tam navíc hledáte v naming containeru komponenty Menu, což je ještě větší oblast. Opět hledejte v e.Item.

StaticItemTemplate je jen šablona, která se pro každou položku zopakuje. e.Item odkazuje na instanci té šablony, ta je ve stránce pochopitelně víckrát - jednou pro každou renderovanou menu položku.

Abyste v tom měl jasno - komponenty v ASP.NET mají vlastnost NamingContainer, které odkazují na nadřazený naming container.

Pro ilustraci - každá položka menu je naming container, proto může každá z nich obsahovat komponentu Label1. Pokud tedy dáte e.Item.NamingContainer, vrátí vám to rodičovský naming container, tedy komponentu Menu. Pokud zavoláte Menu1.NamingContainer, dostanete například ContentPlaceHolder. Naming container je vždycky taková část stránky, v níž nemohou mít dvě komponenty stejné ID.

A ještě u té cesty - aby vám to fungovalo 100% i ze stránek, které nejsou v kořenovém adresáři, jako cestu k obrázku dosaďte Page.ResolveClientUrl("~/App_Themes/...").

Děkuji za vysvětlení. S tím naming containerem to už byla metoda pokus omyl ze zoufalství.

Původně jsem se snažil hledat jen v e.Item, ale vůbec nevím, jak to mám zapsat.

Label lb = (Label)e.Item.FindControl("Label1");

Takhle to bohužel nejde. Poradíte mi ještě prosím?

Díky Martin

Aha, vývojáři komponenty Menu byli tak kreativní, že do té události dali jen MenuItem (což je jen informativní třída, podle které se vytváření komponenty ve stránce), a nedali tam kontejner, na kterém by mohlo být zavoláno FindControl. Ach jo.

Takže jinak, ukázka je tady: http://stackoverflow.com/questions/70544....

Místo funkce, která vrací barvu, udělejte funkci, která bude vracet ten javascript. Parametr container je pak normální komponenta dědící z Control, takže uvnitř můžete zavolat FindControl a najít si příslušný label a obrázek.

V jaké vlastnoti mám volat tu funkci? Oni tu barvu volají ve ForeColor. Mám ten Label a Image taky vložit do Panelu? Panel neobsahuje vlastnost OnMouseOver.

Moc děkuji za rady, Martin