Nikolaos Kantzelis ASP.Net Blog

This blog will focus on ASP.NET Framework


About Me

Great Blogs

April 2010 - Posts

Hidden Div elements and ASP.Net 4.0

This is a very short post for a new feature that ships with VS 2010 and ASP.Net 4.0.

It is about the hidden fields in ASP.Net 4.0. We do know that ASP.Net is using hidden fields as a state control mechanism. It is used to preserve viewstate and control state.

They are usually included in a div element, <div></div>.

So if you create a simple application with VS 2008 and .Net 3.5, run it, and view the source code from the browser,

you would see something like that

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTQ0NTA1MjAxMmRkjIozh8I5q9vNjFXLeK/1IBsUwBM=" />

Sometimes if you style your div elements in your external css file, those rules that apply for all div elementsin your code, will apply for that <div> that surrounds the hidden field elements that deal with the viewstate.

Sometimes you can end up having a result in your browser window that is different from what you expected. The guilty part for that outcome can be the styling of those div tags that surround viewstate. 

We have a small but very welcome change in ASP.Net 4.0

If you create a simple application with VS 2010 and view the source code after you run it, you will see something like this

<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzM3NjE2MDI3ZGRgQNiFxlXngQrLz2ewgBmti+Ee0T+BGCrLcGwY5QJnmQ==" />

As we can clearly see, ASP.NET 4 renders the div element for hidden fields with a CSS class.

In that way we can differentiate the hidden fields div from others.

Hope it helps!!!


ASP.Net 4.0 and tableless menu control

One of the issues I really like to read and learn is client side technologies. I am an ASP.Net guy at heart but I find CSS particular useful and I have been blogging about CSS in my other  blog.

Have a look here if you want for some interesting posts on CSS.

I believe designing web applications and sites according to web standards. I do not think designing our websites with tables is correct.

Tables should be used for what they are good at doing, Display tabular data .

So if we are in charge of our web template we should use Divs and an external CSS file to style the main areas of our template.

When it comes to web server controls we have the issue of not being in charge of the HTML that is emitted from the engine.

In 4.0, we have more control of the HTML that is produced from the engine.

Let's see a little example by using the ASP.Net menu web server control and how it renders its HTML in ASP.Net 4.0.

To follow along with this example you must have .Net framework and VS 2010 RC installed in your machine.

1) Launch VS 2010

2) Create a new web site by selecting ASP.Net website from the templates

3) Choose C# or VB as the development language.

4) Save your site with an appropriate filename in your local filesystem

5) Create an ASP.Net menu control on the default.aspx. Change the RenderingMode to Table. This is a new property in ASP.Net 4.0. What this makes is to instruct the engine to render HTML code for the menu control the old way.

Your code should be like this

   <asp:Menu runat="server" ID="mymenu" RenderingMode="Table">
   <asp:MenuItem Text="Orders" Value="orders">
    <asp:MenuItem Text="Sales" Value="Sales">
    <asp:MenuItem Text="Customers" Value="Customers">
    <asp:MenuItem Text="Employees" Value="Employees">

6) Save your application and run it. Go to View->Source in the IE browser menu and see the HTML emitted.


It should be something like this. So it is styled like a table.

 <table id="MainContent_mymenu" class="MainContent_mymenu_2" cellpadding="0" cellspacing="0" border="0">
    <tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="MainContent_mymenun0">
        <td><table cellpadding="0" cellspacing="0" border="0" width="100%">
                <td style="white-space:nowrap;width:100%;"><a class="MainContent_mymenu_1" href="javascript:__doPostBack(&#39;ctl00$MainContent$mymenu&#39;,&#39;orders&#39;)">Orders</a></td>
    </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="MainContent_mymenun1">
        <td><table cellpadding="0" cellspacing="0" border="0" width="100%">
                <td style="white-space:nowrap;width:100%;"><a class="MainContent_mymenu_1" href="javascript:__doPostBack(&#39;ctl00$MainContent$mymenu&#39;,&#39;Sales&#39;)">Sales</a></td>
    </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="MainContent_mymenun2">
        <td><table cellpadding="0" cellspacing="0" border="0" width="100%">
                <td style="white-space:nowrap;width:100%;"><a class="MainContent_mymenu_1" href="javascript:__doPostBack(&#39;ctl00$MainContent$mymenu&#39;,&#39;Customers&#39;)">Customers</a></td>
    </tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="MainContent_mymenun3">
        <td><table cellpadding="0" cellspacing="0" border="0" width="100%">
                <td style="white-space:nowrap;width:100%;"><a class="MainContent_mymenu_1" href="javascript:__doPostBack(&#39;ctl00$MainContent$mymenu&#39;,&#39;Employees&#39;)">Employees</a></td>

7) Change the RenderingMode to List, and build again your site.Go to View->Source in the IE browser menu and see the HTML emitted.

Youw will not see any tables. In its place you will see a list.Here it is.

 <ul class="level1">

 <li><a class="level1" href="" onclick="__doPostBack(&#39;ctl00$MainContent$mymenu&#39;,&#39;orders&#39;)">Orders</a></li>

<li><a class="level1" href="" onclick="__doPostBack(&#39;ctl00$MainContent$mymenu&#39;,&#39;Sales&#39;)">Sales</a></li>

<li><a class="level1" href="" onclick="__doPostBack(&#39;ctl00$MainContent$mymenu&#39;,&#39;Customers&#39;)">Customers</a></li>

<li><a class="level1" href="" onclick="__doPostBack(&#39;ctl00$MainContent$mymenu&#39;,&#39;Employees&#39;)">Employees</a></li>


It is so much easier to style menus with CSS when we have ul,li elements as the HTML semantic.

To see how to do that have a look here

Hope that helps

More Posts