ASP.NET website, Buttons are just hyperlinks - asp.net

hoping someone can help me I think I know what the issue is but I can't seem to make it work.
I have a small website written with VB web developer 2010.
I am looking to move the host company I am using but the problem I am running into is that the buttons at the top of the page:
<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="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
The old host they show up fine. New host (VPS server that I do everything myself) show up as only a hyperlink.
I think that it is the version of ASP.net I compile it with, currently 3.5, but I could be wrong, I have tried multiple times to get it to work.
Any help is appreciated. Thanks!

Are you sure you copied over the CSS files that go along with the project, and that they are in a directory that has the correct permissions?
Read this link then: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menu.renderingmode.aspx
In particular it references a rendermode setting that you may need to set when you are changing from 3.5 or lower to 4.0
The value of the RenderingMode property determines how the menu
control renders markup for the Menu control. In ASP.NET 3.5 and
earlier versions, the Menu control uses HTML table elements and inline
styles to specify the appearance of the menu in a browser. In ASP.NET
4 and later versions, by default the Menu control uses HTML listitem
elements and cascading style sheet (CSS) styles. If you do not set
this property, the Menu control renders markup that is appropriate to
the ASP.NET version that is indicated by the
Control.RenderingCompatibility property. The Menu control uses the
following rules:
If the value of the RenderingCompatibility property is 3.5, the Menu control uses HTML table elements and inline styles.
If the value of the RenderingCompatibility property is 4.0 or greater, the Menu control uses HTML listitem elements and CSS styles.
This property is provided for backward compatibility. If the
RenderingCompatibility property indicates that you want controls to
generate HTML that is compatible with ASP.NET 4 or later, but you want
the Menu control to be an exception that uses earlier behavior, you
can set this property to Table. For example, if you have a Web page
that displays text from right to left you might want to set this
property to Table because some browsers do not display the List mode
markup properly for right-to-left text.

Solution!
Server side: change the asp.net version to 4.0 using the answer located here
In your Web.config
I had a line with this
<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID"/>
Change to
<pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID"/>
Complete!
Thank you for your help E.J. without knowing it was CSS related I could not have come across the answer.

Related

When working in Visual Studio, can the ' asp: ' portion of an element be omitted?

Situation: I have been creating webpages in HTML5/CSS3 & Javascript using Sublime 2 text editor for a year, however a college course now requires me to use Asp.Net and Visual Studio 2010. I do not use the designer because I am proficient at doing things by hand, however I find that writing asp: inside every element is time consuming and causes syntax errors when applied to some HTML 5 tags and not others.
Example HTML 5: <button id="btn" type="submit" value="Button"/>
Example Asp.net: <asp:Button ID="Button1" runat="server" Text="Button" />
Question: Can the asp: portion be omitted without effecting anything or is it required for IIS or the C# back-end functionality? What about runat="server" can that be omitted?
Google has come up dry regarding my inquiry, so any help is appreciated.
you simply cannot remove either of the two
but hear me out why, because I have a feeling you are not familiar with ASP and therefor are mistaking the meaning of the asp: and the runat="server" syntax.
first: runat="server"
this property on an element, tells the the compiler that this is actually a server side control
so a <button/> is not the same as an <button runat="server"/>
the first one is pure html, while the second one is a control, which can be bound to on the server side. .Net will give it a clientID (not to be mistaken by the ID you have to give it yourself).
second: asp:
this is a prefix, on certain elements, that tells the compiler these are ASP controls (the default controls given by the ASP.net framework). These include Buttons, TextBoxes, DropDownLists, ...
do not mistake 1 of these with a html element.
an <asp:Button id="myAspButton" runat="server"/>
is not the same as a <button id="myHtmlButton"/>
the first, is a server side control, which can be bound to (see it's runat="server" attribute), and this control renders to the browser as a <input type="submit"/> for example.
you could alter the rendering of the asp.net button class to make it return something entirely differnt if you wish.
and you are also not limited to using asp.net classes.
you can create your own controls, and put them in a custom created library
you could give those your own prefix.
if I created such a custom control, I could register a prefix for it in the web.config file,
and thus I could create a custom button extending from the original one (but with a default label in front...
<myc:CustomButton ID="myButton" Text="myButton" Label="myLabel" runat="server"/>
which could render into:
<label>myLabel</label>
<button ID="*******">myButton</button>
the asterisks are symbolizing the Unique ID it will get from the .net framework
if you want to know more on custom controls, or extending default controls
here is a step by step explanation to create custom controls, or extend from a TextBox control.
it also shows how you add a custom prefix for your controls (in the this case 'cc')
you can find more info here
The runat="server" part is required to tell .NET that it will have to render a button there (which will contain .NET specific ID for processing upon POST). Not too familiar with web forms (I started with MVC), but I would assume that the asp: part is to help distinguish between server controls and standard HTML markup.
Why not try removing it and if it breaks something, then you know it's needed. For instance if the button doesn't show up after removing it, then obviously the .NET markup parser needs it to be there in order to know that it is a place holder for a server control.

How do I make .Net Framework 4 render asp:treeview as <ul> <li>?

I have an <asp:treeview> control that looks like this:
<asp:TreeView ID="tvCategory" runat="server" CssClass="CategoryTree" NodeStyle-CssClass="TreeNode TreeNodeUDF" SelectedNodeStyle-CssClass="TreeNodeSelected TreeNodeSelectedUDF">
</asp:TreeView>
This control renders in my page as a table. Is there any way to make .NET render it as <ul><li> tags, so I can easily assign a CSS class to it? I need to change the appearance of this TreeView so that it is oriented horizontally, not vertically.
You could use the CSS control adaptors, with rendering mode not being available for the treeview control in .NET 4.0. Also see here for a similar question.
Perhaps spare yourself the trouble and go for a client side approach?

drop down list appears in front of my calender in asp.net

Drop Down list comes in front of all the controls. I have a calander extender for the text box which is right above(top) the drop down. when the calender pop's out it goes under i.e behind the drop down. Any solution friends.
How about posting some code/markup?
It wont like it via the google intellisense but you need to add the following to your DropDownList markup:
<asp:TextBox runat="server" id="TextBox1" autocomplete="off" />
By default if asp.net finds an attribute that it doesnt recognise then it simply passes it through into the underlying html that is generated.
Note 1: There is some kind of AutoComplete setting for this control but this doesnt do what you need it to do, you need the lowercase version like I have stated above.
Note 2: This is a non-standard attribute. It works in FF and IE but it will cause your validation to fail if you run it through the w3c checker.

How to override old design with new design(using master pages)?

I am migrating the site from ASP.NET 1.1 to ASP.NET 3.5. I am using a new design layout with MasterPage concept. In previeous sites, some pages have UserControls. These are mixed with the old design. If I convert it using MasterPages, I am getting the old design combined with the new design. Please, can anyone help me? I am new to development.
Thanks in advance.
The way you styled/designed controls in ASP.NET 1.1 was by adding attributes to the HTML of the control, for example a text input field with a white background and red border would have been marked up like this:
<asp:TextBox ID="TextBox1" BackColor="White" BorderColor="Red" runat="server" />
If your new design is using css, the reason the user controls are still using the old design is because these styling attributes have a higher precedence than the styles in your css.
The only way to get rid of the old design is to manually open each of your user controls and delete any styling attributes from the markup.

jQuery Menu and ASP.NET Sitemap

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!

Resources