jQuery Menu and ASP.NET Sitemap - asp.net

Is it possible to use an ASP.NET web.sitemap with a jQuery Superfish menu?
If not, are there any standards based browser agnostic plugins available that work with the web.sitemap file?

I found this question while looking for the same answer... everyone says it's possible but no-one gives the actual solution! I seem to have it working now so thought I'd post my findings...
Things I needed:
Superfish which also includes a version of jQuery
CSS Friendly Control Adaptors download DLL and .browsers file (into /bin and /App_Browsers folders respectively)
ASP.NET SiteMap (a .sitemap XML file and siteMap provider entry in web.config)
My finished Masterpage.master has the following head tag:
<head runat="server">
<script type="text/javascript" src="/script/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/script/superfish.js"></script>
<link href="~/css/superfish.css" type="text/css" rel="stylesheet" media="screen" runat="server" />
<script type="text/javascript">
$(document).ready(function() {
$('ul.AspNet-Menu').superfish();
});
</script>
</head>
Which is basically all the stuff needed for the jQuery Superfish menu to work. Inside the page (where the menu goes) looks like this (based on these instructions):
<asp:SiteMapDataSource ID="SiteMapDataSource" runat="server"
ShowStartingNode="false" />
<asp:Menu ID="Menu1" runat="server"
DataSourceID="SiteMapDataSource"
Orientation="Horizontal" CssClass="sf-menu">
</asp:Menu>
Based on the documentation, this seems like it SHOULD work - but it doesn't. The reason is that the CssClass="sf-menu" gets overwritten when the Menu is rendered and the <ul> tag gets a class="AspNet-Menu". I thought the line $('ul.AspNet-Menu').superfish(); would help, but it didn't.
ONE MORE THING
Although it is a hack (and please someone point me to the correct solution) I was able to get it working by opening the superfish.css file and search and replacing sf-menu with AspNet-Menu... and voila! the menu appeared. I thought there would be some configuration setting in the asp:Menu control where I could set the <ul> class but didn't find any hints via google.

Yes, it is totally possible.
I have used it with the ASP:Menu control and jQuery 1.2.6 with the Superfish plugin. Note, you will need the ASP.NET 2.0 CSS Friendly Control Adapters.
ASP.NET generates the ASP:Menu control as a table layout. The CSS Friendly Control Adapter will make ASP.NET generate the ASP:Menu control as a UL/LI layout inside a div.
This will allow easy integration of the jQuery and Superfish plugin because the Superfish plugin relies on a UL/LI layout.

It looks like you need to generate a UL for Superfish. You should be able to do this with ASP.Net from your site map. I think the site map control will do something like this. If not, it should be pretty trivial to call the site map directly from C# and generate the DOM programmatically. You could build a user control to do this, or do it in the master page.
Check out this MSDN article on how to programmatically enumerate the nodes in your site map.

Remember to add css classes for NonLink elements. Superfish css elements don't acccont for them. And if you're like me and have root menu's that are not links, then it renders horribly. Just add AspNet-Menu-NonLink elements to the superfish.css file and it should render fine.

The SiteMapDataSource control should be able to bind to any hierarchical data bound control. I'm not familiar with superfish but I know there are plenty of jQueryish controls out there to do this.

I created a neat little sample project you can use at http://simplesitemenu.codeplex.com/
It is a composite control which generates a nested UL/LI listing from your sitemap.
Enjoy!

Related

Use Tag Controls in .NET

I've searched but cannot figure out what for now I'll call a "tag" control is in .NET. I want to build in the tagging feature you will find in most forums when posting a question (similar to stackoverflow). However I cannot find any info on it. I suspect its because I dont know what the technical name is for the control. They are called tags in forums. See screenshots. Can someone tell me if this is possible to build in .NET and what they are called. If not, what can I use to build this functionality?
There is a very good jQuery plugin named Chosen that can do this Tag style using a multiple select asp.net control.
For example using the Chosen and this code
<script type="text/javascript" >
jQuery(document).ready(function()
{
jQuery(".chosen-select").chosen({width: '100%;'});
});
</script>
<asp:ListBox ID="lstWithTags" runat="server" CssClass="chosen-select" SelectionMode="Multiple"></asp:ListBox>
you have your tag select control very fast and easy

DotNetNuke/Evoq - add custom stylesheets just before closing head

I'm trying to add two custom css stylesheets just before the closing </head> without breaking skin and/or hacking skin?
I built two css files to turn site into responsive design without actually touching any of the skin/template code so it's necessary to have in last ordering of css files.
Your best best is to register it using the DNN CSS Include skin object, adding it to your skin and simply setting a priority that is high.
<dnn:DnnCssInclude runat="server" FilePath="~/Your-PathHere" Priority="100" />
You just need to be sure that you have the following register in your skin as well.
<%# Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>
The full API Details for Client Resource Management will help. Highest DNN priority appears to be 35

ASP.Net Page Template and using asp tag in rendered pages

I want to use page templating in ASP.Net (Visual Studio 2012 with .Net 4.0).
The base page emits the basic template inclusive of the body, html, form, and other tags. That means the rendered pages just have what goes inside the body part. The template adds the header and footer. Although I have not finalized a design, I am looking at a concept documented here. (Yes, I know that coding practice is to not give links to pages, which can go away, but I do not want to side track the question.)
The part of each page is:
<%# Page language="c#" Codebehind="AdvancedPageInheritance.aspx.cs" AutoEventWireup="true" Inherits="PageInheritanceSample.AdvancedPageInheritance" %>
Anything after that first line is part of the body.
If I drag and drop controls onto the form, VS2012 emits code such as:
<asp:CheckBox ID="CheckBox2" runat="server" OnCheckedChanged="CheckBox1_CheckedChanged" />
<asp:Button ID="Button2" runat="server" Text="Button" />
VS2012 automagically emits the warning, "Unrecognized tag prefix or device filter 'asp'."
One thought is to simply add in the body stuff programatically, but that is a page. I rather use the GUI.
How can I avoid the warning? Is there a better way to do templates? That author wrote the article 10-years ago, so things might have changed since then. The warnings are understandable, but in error, as there is a form, body, and html tags, just not directly visible.
(I just answered my question by catching a phrase in Vs2012 and researching it a bit. Master Pages are the answer. Obviously, Microsoft must have added that with either VS2008 or VS2010. I will leave this post, as others, like me, may not know the concept "Master Page" and may reserach page templates, just like I did. I hope that this post says other people time. Google should hopefully pick up on ASP.Net and Page Templates.)
Ideally you would use the MasterPage for laying out your main template.
Your Content pages would then have the appropriate <asp:Content /> controls, where you add your content. To add a content page you would add a new 'Web Form' item in Visual Studio and, by selecting the 'Select Master Page' checkbox, you can choose the master page the content page should use.
See Here for a tutorial on Master Pages
Then you would use a BasePage for site-wide code; for example anything that has logic needed on most pages. Your Content pages would inherit this BasePage
As a side-note, see this page Unrecognized tag prefix or device filter 'asp' in VS2012 with regards to your "Unrecognized tag prefix or device filter 'asp'." message

What's the correct way to connect pages of my website?

I'm just starting web-developing now (I do have experience with C#). And I've seen a recommendation to use Web.sitemap to have a list of pages of my website. Does this help? Will I be able to use this instead of having links on my web pages somehow? And what about being accessible to Google so my website will be found by searchers – will this help?
The Web.sitemap is not primarily a control to be used for your main navigation; it's meant as a navigational overview for the user and is typically only needed in large sites. It doesn't affect your SEO in any way - Google is more interested in the quality of your content.
A site map (NOT a Web.sitemap) is a list of pages on your site, and used in conjunction with a robots.txt file, CAN help your SEO. You can use the following tool to generate a site map automatically (although you'll nearly always have to hand tweak it as well):
http://www.xml-sitemaps.com/
The normal way to build navigation for a small/medium site is to create a set of links as an unordered set (ul/li) and style them with CSS.
It is possible to use Web.Sitemap as navigation source, though probably not recommended. I've used Web.sitemap driven navigation for a couple of sites I've developed. However, it really only works well if you have a simple site with static content pages. Here's the code I used for example:
<asp:SiteMapDataSource ID="MainMenuDataSource" runat="server"
ShowStartingNode="false" StartingNodeOffset="0"
StartFromCurrentNode="false" />
<ul id="jsddm" style="padding-top:10px;">
<asp:Repeater ID="MainMenuRepeater" DataSourceID="MainMenuDataSource" runat="server">
<ItemTemplate>
<li><%#Container.DataItem.Title%>
<ul>
<asp:Repeater ID="MainMenuRepeater_2" DataSource='<%# Container.DataItem.ChildNodes %>' runat="server">
<ItemTemplate>
<%#Utilities.GetSecondaryMenuItem(Container.DataItem, False)%>
</ItemTemplate>
</asp:Repeater>
</ul>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
Where Utilities.GetSecondaryMenuItem is just a helper function in our application that uses custom attributes from the sitemap nodes to control the display formatting of the secondary menu.
Links are a fundamental part of any website and there's no reason to avoid them.
A sitemap is just an XML file that defines the site structure, and it's used mainly by search engines to index sites. You can use them for other things too, like crumb trails for example, but they are not a substitute for hyperlinks.

How to create ASP.NET RecaptchaControl Custom template

I would like to know how to create a RecaptchaControl template on my ASP.NET site.
I need to change the HTML of the control to fit RTL layout.
Here is the code for the control:
<%# Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %>
<recaptcha:RecaptchaControl
ID="recaptcha"
Theme="custom"
runat="server"
PublicKey="YYYYYYY"
PrivateKey="XXXXXXX"
/>
I know this is a late reply, but probably the simplest way to go about this would be to use the CustomThemeWidget property of the recaptchacontrol. Here is a great tutorial on using it:
http://www.onequarterenglish.co.uk/using-a-custom-recaptcha-in-asp-net
Appeaars that there are some issues with rtl and recaptcha - this link pertain to drupal
but it seems with custom themeing it may be posible. I am unsure how you would imleent it with a server control. You might have to dive into the source

Resources