Professional ASP.NET developer approach to allocate the controls on aspx page. How? in a table or any good ways to construct?

Hi there;

When I want to put various controls in the design view of aspx file. I put the controls generally speaking, left to right but VS2010 wants me to put those not i horizontal order but vertical order by default. So, I put sometimes table and do it or a paragraph that I go for &nbsp several times(which seems childish to do) or sometimes in a panel. So, in a professional environment, which way?

Please answer the question in the point of selfpostback or not self postback (if it's relevant, that I am not sure).

Kind regards.
LVL 12
jazzIIIloveAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Luis PérezSoftware Architect in .NetCommented:
The use of tables is today considered obsolete.

The Web 2.0 approach is to use divs with absolute positioning, anchoring, etc. to get the desired look.

Hope that helps.
binaryevoCommented:
To add to RolandDeschain's solution ( which is absolutely correct ), ive included some links that can help you figure out what div's are and how to use them:

http://www.w3schools.com/tags/tag_div.asp
http://www.w3schools.com/html/html_layout.asp
http://www.tizag.com/htmlT/htmldiv.php

This should get you going in the right direction.
jazzIIIloveAuthor Commented:
Hi there;

Thanks for the response!

ok, the magic seems div, yet;

I have 2 issues with div:

One when I want to design my page, from left to right, I failed with div. I mean when I drag and drop another control inside div, it goes just straight down of the previous control in the div, i couldn't position the new control next to the other control in div. How can I do this?

>>the <div> tag supports the following event attributes:
Secondly, it supports event attributes but in this case, suppose that i have a button control in the div, which one should I give the event action? div or button? Imagine that that button should do something and behind code it's doing or a javascript should work on it. So, which one should I assign the event? div or button?

Kind regards.




CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

nishant joshiTechnology Development ConsultantCommented:
1)use div with style which having attribute float:left


2)as per your requirement if you want event by clicking on whole div or by clicking button
jazzIIIloveAuthor Commented:
2) For example, after clicking button1, the button1 action in behind code(aspx.cs) initiates. So, if I put an action to div, then the content in div will be fired? (since it's inside the div)

moreover, for the user, the div is pointless whereas button is the case, as he/she will be clicking on the button.

And, what about assigning 2 actions?For example, sometimes, I stuck at the following scenario;

2a) I want to give 2 actions to that button, 1 is javascript action, 2 is a button action.
So, is it a good idea, to give 2. action to button and 1. action to div?

Kind regards.

jazzIIIloveAuthor Commented:
and apart from above, when I go for attribute; float:left

<div container>
button1                      button2
</div container>

3) now, if I set an action for div, will it  propogate to both buttons?
4) what about the spacing in between buttons? I mean I just press space, but it adds &nbsp, is it professional enough? (It seems funny to me in the code)?

Those are the final questions. Thanks for your patience.

Kind regards.
nishant joshiTechnology Development ConsultantCommented:
check code and run and test bu your self

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "changed";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    <div onclick="javascript:alert('javascript div click onclick');" 
        style="height: 68px; background-color: #C0C0C0;">
       javascript clickable div
       server side button clickable button event
        <br />
        <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
    &nbsp;&nbsp;
        <asp:Label ID="Label1" runat="server" 
            Text="label text chages on button server side click event"></asp:Label>
    </div>
    </form>
</body>
</html>

Open in new window


client side script run first after server side event will execute..

thanks.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jazzIIIloveAuthor Commented:
Thanks for the code, it resolves
>>2) For example, after clicking button1, the button1 action in behind code(aspx.cs) initiates. So, if I put an >>action to div, then the content in div will be fired? (since it's inside the div)

in the comment, 04/01/12 11:34 AM, ID: 37373120

as finally said, in the below comment, what about:

and apart from above, when I go for attribute; float:left

<div container>
button1                      button2
</div container>

3) now, if I set an action for div, will it  propogate to both buttons?
4) what about the spacing in between buttons? I mean I just press space, but it adds &nbsp, is it professional enough? (It seems funny to me in the code)?

Those are the final questions. Thanks for your patience.

Kind regards.
nishant joshiTechnology Development ConsultantCommented:
here no need float left because both button are side by side..
 
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "button 1 click";
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        Label1.Text = "button 2 click";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    <div onclick="javascript:alert('javascript div click onclick');" 
        style="height: 68px; background-color: #C0C0C0;">
       javascript clickable div
       server side button clickable button event
        <br />
        <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Button ID="Button1" runat="server" Text="Button1" 
            onclick="Button1_Click" />
    &nbsp;&nbsp;
        <asp:Button ID="Button2" runat="server" onclick="Button2_Click" 
            Text="Button2" />
        
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>
</html>

Open in new window


3)div always div event fired whenever click inside div

4)ya check it in all browser if working good then great..:-)
jazzIIIloveAuthor Commented:
Hi, thanks for the inputs. :)

ok, but, putting &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; is a good practice? I mean it looks a little messy to me. Is it a good practice or any other way to do that?

Kind regards.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.