Overview
I decided to go back to the basics on this article. It has occurred to me that many people are making the switch to div layouts, and forgetting about their forms. In my case I just didn't know how to do it in a good cross-browser fashion. I thought tables were easier. This article will demonstrate a simple way to create forms that are correct and easy.
Why create tableless forms?
People will argue speed as well as many other reasons. I do it for one reason alone. Syntactical correctness. Ok, I'll elaborate. HTML is designed to be a markup language defining the content within an HTML document. When you put your forms in a table you are telling your web-browser and search engines that you have tabular data. The sad truth is you told a fib to both your browser and your search engines :(. You have input forms designed for the user, not tabular data.
The answer!
Simple. Fieldsets, legends, lists, and inputs. The fieldset tells the browser that there are a set of fields in here. The legend gives you pretty text at the top explaining the fieldset. The list tells the browser we have the items in a list. The labels caption the input boxes.
Simple form
Here is the HTML for a simple form done without tables.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
fieldset {
width: 250px;
}
fieldset ul {
list-style: none;
margin: 0px;
padding: 5px 0px;
}
fieldset li {
padding: 2px 0px;
}
fieldset label {
width: 75px;
float: left;
vertical-align: top;
padding-right: 5px;
text-align: right;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset>
<legend>Login Information</legend>
<ul>
<li>
<label>Username:</label>
<input name="username" type="text" tabindex="1" />
</li>
<li>
<label>Password:</label>
<input name="password" type="text" tabindex="1" />
</li>
<li>
<label>Email:</label>
<input name="email" type="text" tabindex="1" />
</li>
</ul>
</fieldset>
</div>
</form>
</body>
</html>
Overview
This is the first of a couple articles on managing web parts. I would like to keep these articles as simple and concise as possible. This tutorial simply covers how to place WebParts onto the screen. WebParts are a portion of Asp.Net that doesn’t receive very much love. From my experience they feel complex, and where to apply them in your application very ambiguous. Let’s just start with creating one.
Creating your WebPart
- Open Visual Studio (I am using 2008), and add a new website
- This will create the Default.aspx page. Open the Default.aspx page
- Create three Divs
- Drag a WebPartManager and a DropDownList in the first
- Drag a WebPartZone in the second
- Drag a WebPartZone in the third
<div>
<asp:WebPartManager ID="WebPartManager1" runat="server">
</asp:WebPartManager>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
</div>
<div>
<asp:WebPartZone ID="WebPartZone1" runat="server">
</asp:WebPartZone>
</div>
<div>
<asp:WebPartZone ID="WebPartZone2" runat="server">
</asp:WebPartZone>
</div>
- In the design view, place something in each webpartzone (like a calendar, button, or wizard control)
<div>
<asp:WebPartZone ID="WebPartZone1" runat="server">
<ZoneTemplate>
<asp:Calendar ID="Calendar1" runat="server" />
</ZoneTemplate>
</asp:WebPartZone>
</div>
<div>
<asp:WebPartZone ID="WebPartZone2" runat="server">
<ZoneTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ZoneTemplate>
</asp:WebPartZone>
</div>
- Set your dropdown list to AutoPostBack and then double click it to create an event handler
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true"
onselectedindexchanged="DropDownList1_SelectedIndexChanged1">
</asp:DropDownList>
- Switch to your code-behind
- Change your code to this
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Set up the list of options
foreach (WebPartDisplayMode mode in this.WebPartManager1.SupportedDisplayModes)
// Add an item for each mode
this.DropDownList1.Items.Add(
new ListItem(mode.Name, mode.Name));
}
this.WebPartManager1.DisplayMode =
this.WebPartManager1.SupportedDisplayModes[
this.DropDownList1.SelectedValue];
}
protected void DropDownList1_SelectedIndexChanged1(
object sender, EventArgs e)
{
this.WebPartManager1.DisplayMode =
this.WebPartManager1.SupportedDisplayModes[
this.DropDownList1.SelectedValue];
}
Explaination
The first time the page loads, the dropdown will populate with the different display modes of the WebPartManager. The WebPartManager handles all of the cool drag and drop functionality. With every page load, the WebPartManager is set to the display mode specified by the dropdown. The eventhandler just changes the display mode of the WebPartManager.
If you run this code in IE, you will see your dropdown with options. If you select the Design options, you can move the controls inside the WebPartZone to another WebPartZone. In Firefox, this functionality isn’t there, but we will enable it in the next article.
Conclusion
This is the simple hello world application with WebParts. In the near future, we will cover more advanced topics in WebParts as well as how and where to integrate them into your application.
Here are a list of things to check back for in the near future:
- WebParts - A series breaking down Asp.Net web parts
- Windows Workflow - A few tutorials on implementing Windows Workflow
- Home Automation - Tutorials on what you can do with your home
2008 is the Year of the Rat. Which animal year were you born in?
tiger :)
What's one thing you regret doing, or not doing?
Submitted by ashleyy.
I really don't regret anything. There are things I could have done better (finance planning), but I don't regret the decisions I made.
I noticed that when I used the CollapsiblePanelExtender, it had a tendancy to flicker once when the page loads. Here is my quick fix for that. All you have to do is add these properties to the panel's definition:
style="overflow:hidden" Height="0"
I hope this helps.
This would be the first personal update I have posted online in months. There is a lot to cover, but I am not interested in boring my readers so I will cover it quickly.
First, I moved to Portland (for those who don't know). My aspirations haven't changed much, but I am now employed at Louisiana Pacific Corporation.
I am getting married in October. For those of you who are invited, I can't wait to see you there. For those of you who haven't received invitations fear not. I haven't sent invitations as of yet.
