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
Related
EDIT Final: Just in case someone else sees this behavior, I wanted to explain my work around. I was using a placeholder on my Master page for the webform described below. I added a server control to the placeholder in the Master page OnInit event. Through a process of elimination, I figured out that the behavior described below only happens when I add this server control to the Master page.
titlebarPlaceHolder.Controls.Add(sctitlebar)
I re-wrote the Master Page to not need the server control added and the behavior described below went away. I have no idea what caused it. It was a simple server control, but this is my work around.
EDIT 2: The same behavior happens when the container is a table in the repeater control:
<asp:Repeater ID="rptAuditList" runat="server">
<ItemTemplate>
<tr class="odd">
<td><asp:LinkButton ID="lnkOpenAudit" runat="server" Text='<%# Eval("auditname") %>'></asp:LinkButton> </td>
</tr>
</ItemTemplate>
</asp:Repeater>
Here is the HTML output:
<td>Demo PreClose July 2012 </td>
EDIT: In my testing I just noticed that if I run the extact same control OUTSIDE of a MasterPage, it worked correctly, but if I run it inside a MasterPage, it behaves in the way described below.
I have tried this with a Repeater, DataList and Listview and the results are always the same.
Here is the HTML:
<asp:ListView ID="lvwAuditList" runat="server" >
<LayoutTemplate>
<ul><li runat="server" id="itemPlaceholder"></li></ul>
</LayoutTemplate>
<ItemTemplate>
<li><asp:LinkButton ID="lnkAudit" runat="server" Text='<%# Eval("auditname") %>' >
</asp:LinkButton></li>
</ItemTemplate>
</asp:ListView>
Here is the output:
<ul>
<li>Demo PreClose July 2012</li>
<li><a id="contentMain_lvwAuditList_lnkAudit_1" href="javascript:__doPostBack('ctl00$contentMain$lvwAuditList$ctrl1$lnkAudit','')">Demo PostClose Audit June 2012</a></li>
</ul>
The first row always has an extra href="" added. I have never seen this behavior before. I have stripped down the html and code behind to its most basic, yet I still get this extra href="". The code behind just sets the datasource and binds it, nothing else.
Thank you.
If you are using the first list tag as a placeholder and replacing the content in the code behind I would use a slightly different approach adding an ASP.NET PlaceHolder inside the list tag as follows:
<ul><li><asp:PlaceHolder runat="server" ID="itemPlaceholder" /></li></ul>
I have experienced some unusual artefacts appearing in Response code when using ASP.NET tags in a manner for which they were not particularly intended. This may well be causing your problem as well!
I am new to .net, and am tasked with customizing an eCommerce site that attaches to our SAP B1 server. The output of products is currently accomplished through a Datalist which creates output in a table. I have changed the RepeatLayout="Flow" in an effort to use a ul li structure instead of tables. Why is my output still coming in the form of tables?
You can use either Table or Flow in .Net 2. Instruction is here.
Flow will render with span tag.
UnorderedList and OrderedList throws exception even in .Net 4.
However, you can use repeater control for your desired ul and li layout.
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<%# Eval("FirstName")%>
<%# Eval("LastName")%></li></ItemTemplate>
<FooterTemplate>
</ul></FooterTemplate>
</asp:Repeater>
I need to create a link for an ASP.NET page that has an image & text, which when clicked will trigger an event on the webserver.
This is what the link should look like:
This is the HTML for what the link would look like if I wasn't working with ASP.NET:
<a id='PdfLink' href='#'>
<img src="App_Themes/.../Images/PDF.gif" alt="Click for fact sheet PDF"/>
<span>Latest Performance</span>
</a>
The problem with this is that I want to be able to click this and trigger an server-side event, but I don't know if I can do that with plain old HTML controls.
With ASP.NET I can see that there are various controls such as ImageButton & HyperLink but I don't see how I can have a Hyperlink & an ImageButton as part of the same clickable control.
What's the best way for me to get a link similar to the image that is bound to server-side functionality?
I wouldn't do this by using a mixture of controls.
I would use a <asp:LinkButton> control
<asp:LinkButton id="LinkButton1" runat="server" OnClick="ButtonClick_Event" CssClass="latest-performance">Latest Performance</asp:LinkButton>
Then I would use the CssClass "latest-performance" to style up the link.
e.g.
.latest-performance{
display: block;
padding-left: 20px;
background: url(url-to-the-pdf-icon) no-repeat left center;
}
You will have to tweek the style to fit with what you need, but this will basically look exactly the same as what you need. It also keeps your code clean, and separates out the style.
You can do like..
<asp:LinkButton ID="LinkButton1" runat="server"
Text="<img src='App_Themes/.../Images/PDF.gif' /> PdfLink"></asp:LinkButton>
To do what you want to do in ASP .NET you'd need to do something like this:
<asp:LinkButton ID="LinkButton1" runat="Server" OnClick="ButtonClick_Event">Text</asp:LinkButton>
<asp:ImageButton ID="ImageButton1" runat="Server" ImageUrl="image.gif" OnClick="ButtonClick_Event"></asp:ImageButton>
You could then write a custom server or user control to encapsulate those controls so they only expose the properties you wish to set once, such as the event when clicked.
<a href="../default.aspx" target="_blank">
<img src="../images/1.png" border="0" alt="Submission Form" />
<br />
<asp:Literal ID="literalID" runat="server">Some text</asp:Literal></a>
The benefit of this is that asp:Literal is lightweight. You can also programmatically change the text inside the asp:Literal, by using literalID.Text in the code behind, if you need to. I like this because you only need to use a single control inside of a simple tag. You can give it whichever href, target, and img you want. Hope this helps.
You can do like this, this answer is correct.
<asp:HyperLink ID="hyperlink1" runat="server" NavigateUrl="Default.aspx" Target="_parent"><img src="Images/1.jpg"/>click</asp:HyperLink>
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.
Is it possible to get the value for StartingNodeUrl programmatically?
My sitemap has 3 levels to it at it's deepest and, depending on what section your are in I want to display all of the children below the parent in a navigation.
I reckon all I have to do is look at where I am in the navigation and put a value in StartingNodeUrl. But I cannot!
Code snippet from MasterPage:
<asp:Repeater ID="Repeater1" DataSourceID="SiteMapDataSource1" runat="server">
<ItemTemplate>
menu items here
</ItemTemplate>
</asp:Repeater>
<asp:SiteMapDataSource ID="SiteMapDataSource1" ShowStartingNode="false" StartingNodeUrl="/about/" runat="server" />
Thanks in advance.
JRenney
To get the StartingNodeUrl programmatically:
string startNodeUrl = SiteMapDataSource1.StartingNodeUrl;
It sounds like you're looking to operate from the current node though, so I imagine that the SiteMapDataSource.StartFromCurrentNode property is more useful for you.