I am looking to clean up some of the HTML generated by a .NET 2.0 TreeView controller. Switching to another version/model is not an available option.
My first crack yielded an extended TreeView, with an overridden Render that Regex'd out the text I didn't need and output to the page.
The problem was when I tried to collapse/expanded nodes of the tree, my postback event wasn't fired. My assumption was that I didn't need to do any more overriding as the parent TreeView controller would handle the postback events.
What am I missing?
Use the ASP.NET CSS Control Adapters:
http://www.asp.net/CSSAdapters/TreeView.aspx
Without adapters both use HTML <table> tags. Control adapters can be used so that nested <ul> tags are rendered instead. A combination of CSS and JavaScript can then be used to show and hide portions of the hierarchy of the tree or menu.
When the CSS and JavaScript are removed the adapted HTML degrades into simple nested unordered lists that are easily interpreted by screen readers, etc. You can see this for yourself by setting the theme to None in the Theme Chooser on the left.
You regex'd out something that the control needs to handle postbacks. It may be the highly-convoluted id's or the runat attribute... whatever it is, if you're stuck with web controls, you're stuck with bad html.
Your only true (and non-destructive) way to do what you want is not by extending current controls, but by using Control Adapters. There are already control adapters that use css for positioning. Here's ScottGu's post on these CSS adapters.
Related
I can't see certain HTML attributes such as tabindex or onblur for standard divs in intellisense - and when writing them at design time they're underlined. However - they work fine when debugging.
Why is this?
There are usually two possible reasons why intellisense doesn't pick them up:
The attributes were not mapped to properties in the control
The control is suppressing the attributes/properties
However, even though intellisense doesn't pick the attributes up, they still get added to the Attributes collection of the control and rendered to the page. It works because they're common attributes for all HTML elements, which is what the controls resolve to when rendered to the page.
I would like to understand how can I use jQuery to work with asp.net and css.
When I'm writing asp.net code and for example I'm adding to a page DropDownList, I can't see it in the source when I'm opening source of a page in web browser. Instead of dropdownlist I can see select tag. When does the "magic" is done to change asp.net tag to select?
What is more I can't see my CSS classes names added to asp.net tags. There are some kind of differen CSS class names. But when I'm opening developer tools in IE, I can see CSS class names, which are same as in my definition.
And the last thing. What names of a tags sould I use in jQuery to traverse page which was developed in asp.net. Shoud I use a tags which I see in the source code of a page in a browser or can I ask jQuery about asp.net tags? What about CSS classes? Why I can't see them in a source of a page in a browser? Can use my names of a CCS classes under jQuery queries?
Please, can anybody explain me how does this three technologies work together?
When does the "magic" is done to change asp.net tag to select?
Most of "magic" you're wondering about is done by ASP.NET controls, which are designed to generate the markup that is sent to the browser.
When a request is received, the application iterates over each control, calling its Render method (inherited from the Control class), which allows each control to generate the markup they represent.
Following your example, the DropDownList control generates a <select> tag. As a ListControl, it uses the ListItem controls to create the <option> tags within.
Another would be the GridView, which generates a <table> using GridViewRow controls for <tr> and various HTML Controls, such as TableCell for <td> and <th>, to create the rest of the markup.
Shoud I use a tags which I see in the source code of a page in a browser or can I ask jQuery about asp.net tags?
No, jQuery/JavaScript have no knowledge of server-side control names, only the markup they generate. So, rather than searching for $('DropDownList'), you'd search for $('select').
What is more I can't see my CSS classes names added to asp.net tags. There are some kind of differen CSS class names.
By "CSS Names," do you mean IDs? I'm sorry to ask, but CssClass attributes shouldn't change in value from server-side to client-side, just in name -- CssClass to just class.
IDs, on the other hand, are prefixed to ensure their uniqueness throughout the page, including a prefix of the MasterPage and ContentPlaceHolder names, if they're used. For this reason, I'd steer away from trying to use IDs to apply CSS to server-side controls, using classes instead.
Now, the end of the ID should remain as the ID you gave in server-side, so you should still be able to find the element in jQuery using the Attribute Ends With Selector [name$='value']:
# ASP
<asp:DropDownList ID="AnyGivenDropDown" runat="server" />
# HTML (generated)
<select id="ctl00_PageContents_AnyGivenDropDown"></select>
# JavaScript
$('select[id$="_AnyGivenDropDown"]');
Otherwise, I'd stick to classes to find the controls you're looking for:
# ASP
<asp:DropDownList ID="AnyGivenDropDown" CssClass="anygiven" runat="server" />
# HTML (generated)
<select id="ctl00_PageContents_AnyGivenDropDown" class="anygiven"></select>
# JavaScript
$('select.anygiven');
# CSS
.anygiven { }
The "magic" happens in the render event of the asp.net page lifecycle. Asp.net server controls all render as standard html element(s). The most important difference is that you can access them and their values on the server side. WebControls also have a CssClass property that when rendered becomes the class attribute of the HTML element.
The id can be a bit tricky when working with jQuery and CSS. This is because depending on the controls hierarchy they may have a clientID such as ctl100_containerID_myControl instead of myControl. To overcome this in jQuery when you reference a control you can refrence it by its ClientID like so:
$('#<%=myControlID.ClientID%>')
This is serverside that will write the client side ID of the control after it is rendered.
ASP.NET: High-level web development framework. When you create a web form in .NET, the framework will work together with the IIS handlers and create (hopefully) valid HTML that will work with your server-side code during postbacks.
JQUERY: This will allow you to perform client-side scripting such as calculation, validation, and most notably AJAX, etc. This is basically just a wrapper for a simpler and easier-to-read version of javascript.
CSS: Takes the HTML and makes it pretty.
All three technologies work very well together if you know what you're doing.
I'm not sure if that's what you're looking for, but it sounds like you might want to invest in some beginner's literature.
I have created a great stand-alone web form in asp.net utilizing many jQuery features and CSS. It works fine. When I re-create it as a web content form as part of a MasterPage, my jQuery and javascript is completely ignored.
I am referencing the pertinent jQuery and CSS in my of the MasterPage. I have a content placeholder at the bottom of the masterpage called "ScriptContent". In my content page, this is where I plug in the various jQuery methods and javascript.
When I view the page source everything is there. However, it's all being ignored so to speak. What am I doing wrong?
Probably the issue is that when your page is loaded as a content page within a masterpage, the ids of all of the elements are altered to reflect what content page they are in. Thus the ids you are using in jquery won't work.
Options I can think of include:
setting the ids used by jquery programatically from asp.net code (using the clientId of the element)
having your jquery selectors reference some other attribute of your element, such as class (which is unfortunately a bit slower)
I would match the source output of the working version against the output of the non-working version.
Obviously, there's something being rendered out from ASP.NET differently. Getting the difference would tell you what.
Since I have no details, I can only guess...but it sounds like you may have left out some $(document).ready() type functionality to kick off your script somewhere.
What is the best way to control the web controls position in ASP.NET page?
Back in the early days in pure HTML I use to do it with Table.
Is this still the best way?
Thank you in advance,
Roy.
Tables or divs, same as any other HTML element. If you're comfortable with table-based layout and the person for whom you're making the web page doesn't mind, use tables. Otherwise, use CSS, Divs, and all of the positioning stuff that goes along with that.
Officially, tables are dead. Prefer CSS posistioning.
WC3 Schools has some nice material on how to use. They have an in-page editor so you can put in code and try it out before you use it in your page(s).
<myControl style="postion:absolute;left:80px;top:80px" />
The modern approach is CSS positioning. Table v CSS is the type of question that everyone has an opinion on. You should research some of the pros and cons and come to your own conclusions.
To get you started:
Why tables are superior
Why CSS is superior
If you're interested in CSS, I've found Stylin' With CSS to be useful.
You can place a web control anywhere in the asp.net page inside of regular HTML.
If you are adding the web control from the code behind the best way to get it placed is with a place holder.
HTML side could be
<div>
<asp:PlaceHolder runat="server" id="PlaceHolder1" />
</div>
And in the code behind
Control control = //Load or create the control
PlaceHolder1.Controls.Add(control);
Purely speaking about HTML you have divs you can use for laying out the page. You should always prefer them instead of HTML tables and then do the layout by using CSS. This also from an accessibility point of view, since screen readers have some problems with tables.
The same holds ASP.net web controls. You can place them inside a div which is then positioned and styled with CSS accordingly. At runtime you can attach them to containers or placeholders like the Panel control or Placeholder control. Actually the Panel control renders as HTML div later. Many of these controls have the CssClass property which again lets you specify some CSS class(es).
In ASP.NET (not MVC), what is the best approach to programmatically setting styles on an unordered list used for navigation so the appropriate menu item is styled as the active item if that page is being viewed?
This would most likely be used in conjunction with a MasterPage.
The answer to your question depends a lot on how you have your list implemented {User control or not, etc}. How I would do it, is implement the list to be generated by a user control.
I'd have the UserControl tag each element with something like:
<{...} class="GeneratedMenuItem"> {...}
And I'd have the appropriate styles in the Style Sheet; of course if it was in a user control then you might be able to use Themes (but that depends on which version of ASP.net you are using.
Good question, I have played around with various methods of doing this since the bad old days of asp, and am yet to find the perfect hammer.
Generally I have used the Request.Url.AbsoluteUri (or similar) as an argument to whatever the rendering function was, and most often set a css class of "current" or similar on the appropriate node, as well as rendering child nodes as needed.
I have most often used an xml/xsl combination, which can usually be worked against most cms platforms, although I have never been that happy with the overhead of firing up an xsl transform just to output a nav list, but if you know xsl, is a very nice tool for generating html, and you can always cache the output - for little static html sites which come up occasionally, I often use this approach in a build process to render static menu markup.
Have also used the aspnet sitemap functionality a few times, which is pretty good if you use the css friendly adapters with it - the default rendering makes very ugly markup.
I found this article earlier this weeek: http://blog.devarchive.net/2008/01/auto-generate-strong-typed-navigation.html which uses t4 templates to make a strongly typed navigation class, and I will definately be investigating that further.
The way I took this approach was to create ASP.NET Hyperlink Controls for each of my navigation items in my master page.
Within the master page, I then created a public method that would assign the appropriate "selected" CSS style to the control I specify:
Public Sub SetNavigationPage(ByVal MenuName As String)
DirectCast(Me.FindControl(MenuName), HyperLink).CssClass = "MenuCurrent"
End Sub
Then in my content pages, I simply had to reference the master page accordingly.
Dim myMaster As EAF = DirectCast(Me.Master, EAF)
myMaster.SetNavigationPage("hypSearchRequest")
This gave me the flexibility to add/remove navigation items on various pages and also be able to assign multiple pages to the administrator navigation option when necessary.
It is also interesting to note that referencing the hyperlink control and setting the Visibility attribute (for hiding administrative pages) didn't work. This is due to the order in which the master and the content pages load. Instead, I created another CSS class that simply set the visibility property and used the same approach as above.