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).
Related
I am not new to ASP.net. Actually, I am not even learning it. But, I was recently evaluating some Web sites and saw that awful <form runat="server" ..> that wraps the whole page and contains all other tags. The question: Is that valid HTML? It is 2012 and talks about semantic Web, accessible Web, etc. is hot. What do you think of it?
It is syntax-wise valid HTML. But I agree it's a bit 'outdated' a form and some hidden fields, etc. as ViewState.
Also it can be quite cumbersome to work when you want to use more forms on the page (using JQuery f.i.).
Take a look at ASP.Net MVC, it solves the problem. You have full control over the HTML and does not need a form tag around the page. It does not use asp.net server controls.
The the HTML5 specification isn't too restrictive and allows most elements to nest within a form, but does state
The form element represents a collection of form-associated elements,
some of which can represent editable values that can be submitted to a
server for processing.
So it would seem to me that if the element isn't form-associated, it shouldn't really be there.
I'm supporting an application that uses runat="server" all over the place to show/hide table rows.
For example, in places where there are dependent DropDownLists, the row with the child ddl will be hidden until a value us chosen in the parent ddl.
Is that a bad practice? Is there a better way to do this?
I use runat="server" anytime I need it. So I think you can use it too. :-)
I think that's absolutely terrible practice. First of all you do not need to make the trip to the server to hide and show controls, unless you need new data.
Second, any decent javascript framework will allow you to hide show controls based on the control's id, class name, or whatever css selector. Moreover using a javascript post/get to a generic handler will give you the data that you need without the postback.
I'd suggest using JQuery, or some other alternative.
It depends on how much you care about performance. Anything that is marked with runat="server" goes through more processing than just client side tags.
Personally, I've used them before. Especially in the situation where a table cell or table row is relying on data from the server. You can use Javascript or JQuery with a hidden field but you still have to hit the server for the hidden field, so it doesn't buy much.
It's not bad to use runat="server" with standard HTML controls. Often you'll find the use of PlaceHolders to show and hide content on pages, or in ASP.NET MVC you might see the use of inline code blocks such as <% ... %> within the views. On it's own and not in consideration of other design aspects, it's neither good nor bad.
That's what I do to hide the row containing other server controls. The other options are to use a asp:panel or other container, but that will add more HTML without any gain.
I don't think it's necessarily bad practice. I've done the very same thing plenty of times. I think it's mainly personal preference.
Not at all. ASP.NET supports making any html tag run on the server side. Your alternative is to wrap the tag in a Panel, and hide or show that. If you're not looking for the extra functionality or want to control the output yourself, making an html tag run on the server isn't a problem.
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.
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.