Dynamic menu through use of repeater - c#

I am using a repeater to create a menu (Bootstrap styled). I need to initially make the first item active and can't figure out how. This is what I have:
<!-- Nav tabs -->
<ul id="teamTab" class="nav nav-pills pill-marg" role="tablist">
<asp:Repeater runat="server" ID="rptMenu">
<ItemTemplate>
<li role="presentation">
<a class="circular" href='#<%# DataBinder.Eval(Container.DataItem, "GroupAbbrev") %>' aria-controls="home"
role="tab" data-toggle="tab"><%# String.Format("{0}", Eval("GroupName").ToString().ToUpper()) %></a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
To make the first menu item active, its style has to be "active", like:
<li role="presentation" class="active"><a class="circular" ...>

I think you can just add <%# Container.ItemIndex == 0 ? "active circular" : "circular" %> inside your repeater template (however its been years since I have used WebForms.
Example:
<!-- Nav tabs -->
<ul id="teamTab" class="nav nav-pills pill-marg" role="tablist">
<asp:Repeater runat="server" ID="rptMenu">
<ItemTemplate>
<li role="presentation" class="<%# Container.ItemIndex == 0 ? "active" : "" %>">
<a class="circular" href='#<%# DataBinder.Eval(Container.DataItem, "GroupAbbrev") %>' aria-controls="home"
role="tab" data-toggle="tab"><%# String.Format("{0}", Eval("GroupName").ToString().ToUpper()) %></a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
Syntax issues aside (if I have any), I know the index is available via ItemIndex, see the docs here.

Related

Rendering dinamically GenericHtmlControl/Literal merged with an Asp.net Control

My Environment is: ASP.NET 4.62 / C# / Boostrap 4 framework
My application renders bootstrap 4 menu from database query.
I've a div in aspx page
<div id="myNav" runat="server"></div>
and i add code behind as
myNav.InnerHtml = mystr.ToString()
Now i need to integrate in the menu a LoginView asp.net control.
Obviously if i add
<asp:LoginView id="LoginView1" runat="server" ViewStateMode="Disabled">
as string, the browser will receive a string a not renders a control ASP.NET.
I need to render something like this
....previous items menu
<asp:LoginView id="LoginView1" runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul class='nav navbar-nav ml-auto'>
<li class='nav-item'>
<a class='nav-link' href='../../Account/Login.aspx'><span class='fas fa-user'>
</span>Login</a> </li>
<li class='nav-item'><a class='nav-link' href='~/Account/Login.aspx'>
<span class='fas fa-sign-in-alt'></span> Login</a> </li> </ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class='nav navbar-nav ml-auto'>
<li class='nav-item'>
<a class='nav-link' href='~/Account/Login.aspx'><span class='fas fa-user'></span></a>
</li>
<li class='nav-item'>
<span class="myText">Hallo, </span><a runat="server" class="username"
href="~/Account/Manage.aspx" title="Profile">
<asp:LoginName runat="server" CssClass="username" />
</a>!
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Exit"
LogoutPageUrl="~/Logout.aspx" />
</li> </ul>
</LoggedInTemplate>
</asp:LoginView>
...closing boostrap menu tag
Which is best way to resolve this type of problem ?
I need to change approach ?
You are creating the HTML at the server side; that is a possibility, but as you see, it makes it hard to combine this with ASP.NET server controls.
It would be better to put the HTML on the .aspx-page. I understand that your database knows which menu-items should be visible. And that you want to add 1 additional item, where users can login.
You could use (for example) a GridView with one column.
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div>Your HTML here </div>
<div><%# Item.SomeProperty %></div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
Use the data from your database to render one 'row' per menuitem in the grid. You can customize the TemplateField so it contains the bootstrap-layout as you need it.
It might also be possible to keep your current approach. I think then you should at least not create your opening and closing bootstrap-menu tags in the code-behind. You should put those tags on the .aspx-page itself, the structure would then be:
<opening tag bootstrap menu>
<div id="myNav" runat="server"></div>
<asp:LoginView id="LoginView1" runat="server" ViewStateMode="Disabled"> ... </ ..>
<closing tag bootstrap menu>

How to bind menu and sub menu and subsubmenu using repeater in asp.net c# with bootstrap

I'd like to have my Bootstrap menu automatically drop down on hover, rather than having to click the menu title. I'd also like to lose the little arrows next to the menu titles.play it as menu but it is showing a list.
My code:
<asp:Repeater runat="server ID=" rptmainmenuOnItemDataBound="menu_ItemDataBound">
<ItemTemplate>
<div class="">
<a class="dropdown-item" href="<%# DataBinder.Eval(Container.DataItem, " url ") %>">
<%# Eval("menutext") %>
</a>
<ul class="dropdown">
<asp:Repeater runat="server" ID="rptsubmenu" OnItemDataBound="rptsubmenu_ItemDataBound">
<ItemTemplate>
<li class="dr">
<a class="dropdown-item" href="<%# Eval(" url ") %>">
<%# Eval("menutext") %>
</a>
<ul class="dropdown">
<asp:Repeater runat="server" ID="rptsubsubmenu">
<ItemTemplate>

DataBinding: 'System.Web.SiteMapNode' does not contain a property

I want to add glyphicons to my custom built menu that I built using an <asp:Repeater> and a web.sitemap file as a data source.
Here is what I've tried:
<ul class="nav navbar-nav">
<asp:Repeater runat="server" ID="rptMenu" DataSourceID="smdsMain">
<ItemTemplate>
<li>
<a runat="server" href='<%# Eval("url") %>'>
<span class='glyphicon glyphicon-<%# Eval("glyphicon") %>'></span>
<%# Eval("title") %>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:SiteMapDataSource ID="smdsMain" runat="server" ShowStartingNode="false" SiteMapProvider="XmlSiteMapProvider" />
And here's an example of a node in my web.sitemap:
<siteMapNode url="~/Secure/Home/Default" title="Home" description="Home" glyphicon="home" />
Here is the error I get.
System.Web.HttpException: DataBinding: 'System.Web.SiteMapNode' does not contain a property with the name 'glyphicon'.
I everything else works fine without the glyphicon implementation.
I know it is possible to have a custom attribute in your sitemap nodes because someone implemented it in this Stack Overflow post.
So I must be doing something wrong in my customer implementation. What is the correct way to implement this?
After some research I found that you can access custom attributes in this way:
<%# Eval("[attributeName]") %>
Using that knowledge I have implemented into my code like this to get it working:
<ul class="nav navbar-nav">
<asp:Repeater runat="server" ID="rptMenu" DataSourceID="smdsMain">
<ItemTemplate>
<li>
<a runat="server" href='<%# Eval("url") %>'>
<span class='glyphicon glyphicon-<%# Eval("[glyphicon]") %>'></span>
<%# Eval("title") %>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:SiteMapDataSource ID="smdsMain" runat="server" ShowStartingNode="false" SiteMapProvider="XmlSiteMapProvider" />

Programmatically use a copy of existing on-page customized control

On one page i use a web-control (do not pay attention that this is not standart webcontrol, there's no difference for that question):
<telerik:RadComboBox runat="server" id="rcbAssocClient" Width="400px"
MarkFirstMatch="true" EnableLoadOnDemand="true"
HighlightTemplatedItems="true"
onitemsrequested="rcbAssocClient_ItemsRequested">
<HeaderTemplate>
<ul>
<li class="col1">FirstName</li>
<li class="col2">LastName</li>
<li class="col3">BirthDate</li>
</ul>
</HeaderTemplate>
<ItemTemplate>
<ul>
<li class="col1">
<%# DataBinder.Eval(Container.DataItem, "FirstName") %></li>
<li class="col2">
<%# DataBinder.Eval(Container.DataItem, "LastName") %></li>
<li class="col3">
<%# DataBinder.Eval(Container.DataItem, "BirthDate", "{0:d/M/yyyy}")%></li>
</ul>
</ItemTemplate>
</telerik:RadComboBox>
How can i save this template to create the same control on another page programmatically like that:
MyRadComboBox cb = new MyRadComboBox();
without rewriting item template and so on.
Thanks in advance for Your time and help.
You can create your template in a separated file ascx and load with method
LoadTemplate
I hope to be helpful

How to hide Login and Register button after login by user?

I'm working on a school project. I'm able to login user successfully who registered. But when he/she loged-in how can I hide Login and Register page link. I'm using css and <ul> for them. And after sign-out how can I show them again.
Here is the coding of my links on MasterPage
<td id="tabs2" style="width:190px">
<ul id="logreg">
<li><a href="Login.aspx" ><span>LogIn</span></a></li>
<li><span>Register</span>
</li>
</ul>
</td>
And how can I use lable like a button to SignOut.
Wrap the elements in a placeholder control, and set the Visible attribute depending on session state.
<td id="tabs2" style="width:190px">
<ul id="logreg">
<asp:placeholder id="NotLoggedInPH" runat="server">
<li><a href="Login.aspx" ><span>LogIn</span></a></li>
<li><span>Register</span></li>
</asp:placeholder>
<asp:placeholder id="LoggedInPH" runat="server" visible="false">
<li><asp:HyperLink id="btnLogout" runat="server"><span>Logout</span></asp:HyperLink></li>
</asp:placeholder>
</ul>
</td>
Then in your Page_Load:
if (!(session["sessionName"])){
NotLoggedInPH.visible = false;
LoggedInPH.visible= true;
}
Another option is to just check Request.IsAuthenticated
<% if(!HttpContext.Current.Request.IsAuthenticated) { %>
<ul id="logreg">
<li><a href="Login.aspx" ><span>LogIn</span></a></li>
<li><span>Register</span></li>
</ul>
<% } else { %>
// Show a logout button
<% } %>
I recommend using the LoginView control and Forms Auth, but here are some ways to get your current code to work:
Assuming Forms Auth:
<li id="liLogin" runat="server" visible='<%= !User.Identity.IsAuthenticated %>' ><span>LogIn</span></li>
<li id="liReg" runat="server" visible='<%= !User.Identity.IsAuthenticated %>' ><span>Register</span></li>
<li id="liSignout" runat="server" visible='<%= User.Identity.IsAuthenticated %>' ><span>Signout</span></li>
Using Session var:
<li id="liLogin" runat="server" visible='<%= (Session["bla"] == null) %>' ><span>LogIn</span></li>
<li id="liReg" runat="server" visible='<%= (Session["bla"] == null) %>' ><span>Register</span></li>
<li id="liSignout" runat="server" visible='<%= (Session["bla"] != null) %>' ><span>Signout</span></li>
adding runat="server" attribute, though its simple trick.
<td id="tabs2" style="width:190px" runat="server">
<ul id="logreg">
<li><a href="Login.aspx" ><span>LogIn</span></a></li>
<li><span>Register</span>
</li>
</ul>
</td>
after Login Successfull, you can do like this
tabs2.Visible=false
you can simply create a user session and check whether sign-in user exist or not if exist show SignOut otherwise show login panel.
Since you are not using Forms Authentication and your teacher does not allow you to use LoginView Control, I will give you an other option... Here is what I will do..
I would have kept the common functionality like the header in a master page. This way the
user login check would have been centralised.
I would have converted the to asp:hyperlink control. OnLoad method of master page class check if the session variable which holds the id and if it is not null do the following..
hyperlinkObj.Attributes.Add("style","display:none");
I Just put User.Identity.IsAuthenticated == false and it hides the login
<ul class="nav navbar-nav ml-auto">
#if (User.Identity.IsAuthenticated)
{
<li class="nav-item">
<a class="nav-link text-dark" asp-controller="Login" asp-action="Logout">Logout</a>
</li>
}
#if (User.Identity.IsAuthenticated == false )
{
<li class="nav-item">
<a class="nav-link text-dark" asp-controller="Login" asp-action="UserLogin">Login</a>
</li>
}
</ul>

Categories