I'm trying to add an empty asp:BulletedList to a page so I can run a jquery on it. But when I open the page the bulletlist doesn't show up.
Is there a trick to getting an empty asp:BulletedList to show up?
Empty BulletedList like this:
<asp:BulletedList ID="BulletedList1" runat="server">
</asp:BulletedList>
will not render into page HTML at all because it makes no sense much as <UL> element without <LI> elements.
But if you add at least one (even empty) list item:
<asp:BulletedList ID="BulletedList1" runat="server">
<asp:ListItem></asp:ListItem>
</asp:BulletedList>
It will render as
<ul id="BulletedList1">
<li></li>
</ul>
Related
I am using aspx for my template in kentico with a CMSListMenu. The CMSListMenu is like this:
<cms:CMSListMenu CssClass="sm sm-blue" ID="main_menu" Path="/%"
runat="server" ClassNames="CMS.MenuItem" />
I want it to return something like this:
<ul class="sm sm-blue" ID="main_menu">
<li>Home</li>
<li>About Us</li>
<li>Products</li>
</ul>
How can I achieve this?
I tend to ignore the built-in web-parts in Kentico for lists. Rather using the <cms:CMSRepeater> and a transformation. The CMSRepeater is analogous to asp.net's <asp:Repeater> control, with the added access to the Kentico CMS tree structure.
So a deceleration of the CMSRepeater in code would look like:
<cms:CMSRepeater ClassNames="CMS.MenuItem" Path="/%" runat="server" >
<HeaderTemplate>
<ul class="sm sm-blue" id="main_menu">
</HeaderTemplate>
<ItemTemplate>
<li><%# Eval("DocumentName") %></li> <!-- Or whatever column you need to extract for the title-->
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</cms:CMSRepeater>
Alternately if you create the CMSRepeater web part in the CMS UI, you can set up the list header/footer directly in the dialog,
and point to a Transformation for a Document Type. The transformation is a separate file, and will contain the same scope as the content within <ItemTemplate> above.
All,
I am trying to decide the best way to convert my current asp.net page into a master page. This issue I have is with the navigation. I have 3 aspx pages which are essentially html with nothing flash in as yet. These are:
Home
Reports
Admin
In my current pages, the menu built using static html as follows:
<div id="nav">
<ul>
<li>Home</li>
<li>Reports</li>
<li>Admin
</li>
</ul>
</div>
The class for each li a class is currently determined in the actual html source. So in Default.aspx the class for li a href="Default.aspx" ... would point to the selected tab class in my css, tab-selected. The other classes for the rest of li a's would be tab-unselected.
Again in reports.aspx, the class for li a href="reports.aspx" ... would point to the selected tab class in my css, tab-selected. The other classes for the rest of li a's would be tab-unselected.
My CSS is displaying the menus perfectly with the above.
I then thought I would try moving to Master pages. So I copied the above into the master page. This looks ok but the problem is as the navigation is in the Master page, how can I change the highlight the current page in the navigation.
Then I thought I would try and use the control and put the above navigation items in it. When I ran the navigation was rendered as a table and so completely broke my css. I thought tables were bad in terms of laying out things like menus and you should use unordered lists?
Question is, what is the best way to implement my navigation with ASP.NET?
Thanks
Andez
If you want to use your html list to display your navigation but style your list items using CSS then you could use this technique.
Use inline code blocks such as (assuming VB)
<% If Page.Request.Path.Contains("Default.aspx") Then %>
<li class="selected">
<% Else %>
<li>
<%End If%>
Home</li>
You would need an IF statement for each page and the code will look a bit scrappy. I'm not saying it's the best way but basically if you are using a single piece of html for you menu (but it in the Masterpage or a Control) you will need to use some logic code somewhere for the html to be different on each page. You could do this in the code-behind as well but adding some inline code blocks is the perhaps the easiest/quickest way. You could get more funky and write a helper class that wraps it all up in a select statement and just call
MenuHelper.RenderLink("Default.aspx")
but that will take more work - give me a shout if fancy trying this approach instead.
As for why your tables broke I don't know. My opinion would be if you want to use tables and your site/users won't suffer from it then go ahead - but if you have to consider mobile devices and screen readers etc then it is my understanding that tables will be harder to navigate. It's really up to you!
Cheers
Came across the following link:
http://forums.asp.net/t/1626206.aspx
Version 4.0 of the .NET Framework has some nice changes to the asp:Menu control. One of them is to render as a list. Yay! So for now I have moved from VS2008 to VS2010 Express.
After a little fiddling around I am now using a site map with an asp:Menu within a Master page as follows:
Web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="" description="">
<siteMapNode url="Default.aspx" title="Home" description="" />
<siteMapNode url="reports.aspx" title="Reports" description="" />
<siteMapNode url="administration.aspx" title="Administration" description="" />
<siteMapNode url="ChildPage.aspx" title="Master Template" description="" />
</siteMapNode>
</siteMap>
Site.master
...
<head runat="server">
<link rel="stylesheet" type="text/css" href="styles/mystyle.css" />
</head>
<body>
<form id="Form1" runat="server">
<div id="header">
<div id="nav">
<asp:SiteMapDataSource id="nav1" runat="server" />
<asp:Menu ID="main-menu" runat="server" DataSourceID="nav1"
Orientation="Horizontal" StaticSelectedStyle-CssClass="tab-selected"
CssClass="nav"
StaticDisplayLevels="2" IncludeStyleBlock="False" RenderingMode="List" >
</asp:Menu>
</div>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</form>
</body>
The thing with the Site Map is that you are required to have 1 top level siteMapNode which I leave as empty. StaticDisplayLevels is set to 2 in the asp:Menu, so the list is rendered as follows:
<ul class="level1">
<li><a></a></li>
<li><a class="level2 selected" href="/Web%20Portal/Default.aspx">Home</a></li>
<li><a class="level2" href="/Web%20Portal/reports.aspx">Reports</a></li>
<li><a class="level2" href="/Web%20Portal/administration.aspx">Administration</a></li>
<li><a class="level2" href="/Web%20Portal/ChildPage.aspx">Master Template</a></li>
</ul>
As you can see it puts the top level siteMapNode as the first item in the list. Which I do not want. To work around this I hide the element using the following CSS.
#nav li:first-child a
{
display: none;
}
Everything is now looking nice and very similar to the static html pages.
Andez
May be the solution I am trying to provide is not optimized but worked for me.
In the static HTML Menu in the Master page, have all the "li" tag with the ID as of the Page Name.
<ul>
<li ID="home"><a href="home.aspx">Home</li>
<li ID="About"><a href="about.aspx">About</li>
<ul>
Then in the Master Page use JQuery to get the Page Name. Some thing like
$(function () {
var filePath = window.location.pathname;
var fileName = filePath.substr(filePath.lastIndexOf("/") + 1);
var name = fileName.split('.');
var page_name = name[0];
$('#' + page_name).addClass("active"); // Add the CSS class which sets the active Menu
});
In CSS do something like
.active
{
background=#000;
color=#fff;
}
I hope this helps..
I'm trying to implement a search bar to filter dynamic content in jQuery mobile by first letter. I want to implement data-filter like this: http://jquerymobile.com/demos/1.0a4.1/docs/lists/docs-lists.html#../../docs/lists/lists-search-inset.html
Super easy to do. However, I have a minor problem throwing me off. All my content is dynamic. Each record being read is a new list. Because data-filters are used for lists, I have a search bar above each record. My .NET code for my output looks like this:
<asp:Repeater ID="Repeater27" runat="server" DataSourceID="SqlDataSource27">
<ItemTemplate>
<ul data-role="listview" data-inset="true" data-filter="true">
<li class="list-head"><strong><%# Eval("Name")%></strong></li>
<li class="list-body"><%# Eval("GrEmail")%></li>
<li class="list-body"><%# Eval("Telephone")%></li>
</ul>
</ItemTemplate>
</asp:Repeater>
Because I am using a Repeater to list my dynamic content, it too is repeating my filter. I have tried moving the filter outside of my repeated region, and this doesn't work. In addition, the filter has to be attached to the list it is reading to work anyway.
Is there a work around from using a repeater in .NET?
Or is there a workaround for filters?
Can data-filter work for collapsible-sets?
I'm open to any and all suggestions. I greatly appreciate any insight you may have to offer. This has got to be a common problem with implementing dynamic content on a site. I'm wondering how the jQuery mobile documentation did this??
Thoughts?
Only Li should be repeated !! :)
change it with
`
<ul data-role="listview" data-inset="true" data-filter="true">
<asp:Repeater ID="Repeater27" runat="server" DataSourceID="SqlDataSource27">
<ItemTemplate>
<li class="list-head"><strong><%# Eval("Name")%></strong></li>
<li class="list-body"><%# Eval("GrEmail")%></li>
<li class="list-body"><%# Eval("Telephone")%></li>
</ItemTemplate>
</asp:Repeater>
</ul>
`
The should be outside of the repeater. The remaining dynamic content should then be within only one set of tags.
Adding runat="server" is not rendering my server tags <%...%>
I have a masterpage with a few <li> for menu and since I have to set class=selected for the current page, I am using a little server tag to find the url and assign the particular class.
I have total of 10 <li> and not all menu is available to all types of user, I need to toggle few of the <li> if the user is not admin, so I have runat="server" added to them so I can set their visible=false through c#
Here is how it is at a glance:
<li runat="server" id="liBlog" class='<%= Request.Url.AbsoluteUri.EndsWith("/Blog") ? "selected" : "" %>'>Group Blog</li>
<li runat="server" id="liPoll" class='<%= Request.Url.AbsoluteUri.EndsWith("/Poll") ? "selected" : "" %>'>Poll</li>
<li id="liInvite" class='<%= Request.Url.AbsoluteUri.EndsWith("/Invite") ? "selected" : "" %>'>Invite</li>
<li id="liFavourite" class='<%= Request.Url.AbsoluteUri.Contains("/Favourite") ? "selected" : "" %>'>My Favourites</li>
The <li> without runat="server" works fine, when on correct page the source code shows class="selected" or class="" as appropriate, the other <li> used to work fine too, until I decided to add the runat="server".
Once I added that runat="server", the whole block of class="" is being sent out to the html page, its not processing the server tags at all! I right click on the html and look at the source, it's being rendered as:
<li id="ctl00_ctl00_ContentPlaceHolder1_liBlog" class="<%= Request.Url.AbsoluteUri.EndsWith("/Blog") ? "selected" : "" %>">Group Blog</li>
It's pouring out my server tags into the source code!
Why is this behaviour seen? How can I avoid it?
I looked up a lot of similar threads in here and there was nearly nothing in google, so made this, I dont think this is a duplicate question.
You can't use the <%= %> syntax inside the properties of tags that have the runat="server" attribute on them.
You either need to:
Set the properties via your code-behind
Create an Expression Builder (and part 2 and part 3) and use the <%$ %> syntax (note: these are links to stuff I wrote on my blog, so, beware the self link =)
for your requirement you can also use ASP.NET menu and XmlSiteMap to do the same thing.
I have the feeling that using Sitemap in ASP.NET is not conducive to CSS. Where do I format a menu to look like CSS can make it look. Where are mu ul and li's?
...Beginner, so forgive me if there right under my nose.
Why not just use a CSS menu with ul's and li's ? There is nothing in ASP.NET that says you have to use web controls, normal HTML works just as well (probably better).
Using a SiteMap is extremily useful when using it to show Menus and Breadcrums.
You can read some tutorials on how to accomplish this like this. If you want to generate pure UL / LI I suggest you read this post
There is always the ASP.NET Video tutorial on How Do I: Implement Site Navigation in ASP.NET?
Try, as well use the CSS Friendly Adapters (that's what they were build for) - there's a video tutorial as well.
Hope it helps
For complete control over a menu you could use a Repeater and bind it to your Web.SiteMap.
<asp:Repeater ID="MenuRepeater" DataSourceID="SiteMapDataSource1" runat="server">
<ItemTemplate>
<li>
<a href='<%#Eval("url")%>'><%#Eval("Title")%></a>
</li>
</ItemTemplate>
</asp:Repeater>
If you're looking to do CSS dropdown menus then simply add in a nested Repeater.
<asp:Repeater ID="MenuRepeater" DataSourceID="SiteMapDataSource1" runat="server" EnableViewState="false">
<ItemTemplate>
<li>
<a href='<%#Eval("url")%>'><%#Eval("Title")%></a>
<ul>
<asp:Repeater ID="DropDownRepeater" DataSource='<%#Container.DataItem.ChildNodes()%>' runat="server">
<ItemTemplate>
<li>
<a href='<%#Eval("url")%>'><%#Eval("Title")%></a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</li>
</ItemTemplate>
</asp:Repeater>
So you'll get the CSS menus you want and still be using your Web.SiteMap.
You can combine the SiteMapDataSource with a Repeater tu produce a standard <ul><li> menu list. You can even add your own attributes to the web.sitemap file, e.g. to specify an image for the menu item...
teknohippy's advice on using a repeater is great!
However, the line
<asp:Repeater ID="DropDownRepeater" DataSource='<%#Container.DataItem.ChildNodes()%>' runat="server">
is incorrect. It needs to be
<asp:Repeater ID="Repeater1" runat="server" DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'>
in order to work.
Details are available in this excellent tutorial:
http://msdn.microsoft.com/en-us/library/aa581781.aspx