CODEWITHSUNDEEP
htmlasp.netwebforms
user489041
user489041

Reputation: 28304

Add a TextBox to an ASP.Net Menu

Right now I have the following code:

<div class="clear hideSkiplink">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                    <asp:MenuItem NavigateUrl="~/CreatePost.aspx" Text="Create Post"/>
                    <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                </Items>
            </asp:Menu>
        </div>

This creates buttons in my menu bar. However, I would like to add something that is not a button to this menu bar. I would like to add a text box. If I attempt to add the text box in between the <Items> tag, it gives me an error. Is this possible to achieve?

Upvotes: 2

Views: 3475

Answers (2)

famousgarkin
famousgarkin

Reputation: 14126

You can use item templates to provide custom look for your menu items. For example:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
    IncludeStyleBlock="false" Orientation="Horizontal">
    <Items>
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
        <asp:MenuItem NavigateUrl="~/CreatePost.aspx" Text="Create Post" />
        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
    </Items>
    <StaticItemTemplate>
        <%-- Custom menu item content --%>
        <asp:Label runat="server" Text='<%# Eval("Text") %>' />
        <asp:TextBox runat="server" Text='<%# Eval("NavigateUrl") %>' />
    </StaticItemTemplate>
</asp:Menu>

Which can produce a result similar to this:

example result of menu item templating

I suggest you read about templating options of the Menu control.

Edit in response to the comment:

I think it is not possible to selectively apply the template once it is defined. You would probably need to have another menu with different template to look different. Or you could achieve different look for different menu items to some extent using conditions for Visible property such as:

<StaticItemTemplate>
    <asp:Label runat="server" Text='<%# Eval("Text") %>' />
    <%-- Display textbox only for the Home menu item --%>
    <asp:TextBox runat="server" Text='<%# Eval("NavigateUrl") %>'
        Visible='<%# (Eval("Text") == "Home") %>' />
</StaticItemTemplate>

You could hide or show whole panels or placeholders this way, to swap out the whole content for specific menu items.

Upvotes: 3

Saeed Neamati
Saeed Neamati

Reputation: 35842

The only way comes to my mind, is to create a custom menu control, deriving from ASP.NET's menu control. Then you must override its Render or CreateChildren method.

However, lot's of developers now use simple ul-li HTML elements to create a menu. This way, you can achieve any kind of flexibility with ease. Why don't you use them?

Upvotes: 1

Related Questions