ASP.NET Are there good ways to design Wizards?
Question
I know there is a Wizard control available but what I want is so simplistic I cannot figure out where I started veering off the deep end here. When a user puts in their name and hits next I want the calendar control to become selecatable for a start date. I have the ability to mark the start date as green. I want them to select away until they hit the continue button. Issue 1 is they can hit next without a date. I want to catch that. Issue two is they can reselect many times before hitting next. I want them to be able to do that. Once they hit next I want them to be able to chose and end date over and over until they hit next. Then I want them to confirm their coices. I guess the logic isn't so simple ... The code I wrote is so bad. :(. Even the proper fixes hurt my head because StartDateStartPart and EndDateStartPart just would become mental gibberish. I am obviously going to have to rethink and redo this from the ground up.
<script runat="server" enableviewstate="True">
DateTime begin;
DateTime end;
int iSelectedStart = 0;
int iSelectedEnd = 0;
int iPutName = 0;
protected void Button1_Click(object sender, EventArgs e)
{
if (iPutName == 0)
{
Label1.Text = TextBox1.Text + " you will be slecting your start and end dates.";
LabelInstructions1.Text = "Please select a begin date and hit next";
Calendar1.SelectionMode = System.Web.UI.WebControls.CalendarSelectionMode.Day;
iPutName = 1;
ViewState["iPutName"] = 1;
ViewState["Label1_Text"] = Label1.Text;
ViewState["LabelInstructions1_Text"] = LabelInstructions1.Text;
ViewState["Calendar1_SelectionMode"] = Calendar1.SelectionMode;
}
else
{
if (iSelectedStart <= 0)
{
LabelInstructions1.Text = "You have not selected a start date please do so.";
}
else if (iSelectedStart < 99)
{
iSelectedStart = 99;
Label1.Text = TextBox1.Text + " you will be slecting your start and end dates.";
LabelInstructions1.Text = "Please select an end date and hit confirm";
ViewState["begin"] = begin;
ViewState["iSelectedStart"] = iSelectedStart;
}
else
{
if (iSelectedEnd = 0)
{
LabelInstructions1.Text = "You have not selected a start date please do so.";
}
}
}
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
if (iSelectedStart < 99)
{
iSelectedStart++;
begin = Calendar1.SelectedDate;
ViewState["iSelectedStart"] = iSelectedStart;
ViewState["begin"] = begin;
}
else
{
if (begin == Calendar1.SelectedDate)
{
LabelInstructions1.Text = "Error you cannot select the same start and end date";
LabelInstructions1.ForeColor = System.Drawing.Color.Red;
}
else
{
end = Calendar1.SelectedDate;
iSelectedEnd = 0;
ViewState["end"] = end;
}
}
}
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
if (e.Day.Date == begin)
{
e.Cell.BackColor = System.Drawing.Color.Green;
}
if (e.Day.Date == end)
{
e.Cell.BackColor = System.Drawing.Color.Red;
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (ViewState["iPutName"] != null)
iPutName = (int)ViewState["iPutName"];
if (ViewState["Label1_Text"] != null)
Label1.Text = ViewState["Label1_Text"].ToString();
if (ViewState["LabelInstructions1_Text"] != null)
LabelInstructions1.Text = ViewState["LabelInstructions1_Text"].ToString();
if (ViewState["Calendar1_SelectionMode"] != null)
Calendar1.SelectionMode = (CalendarSelectionMode) ViewState["Calendar1_SelectionMode"];
if (ViewState["begin"] != null)
begin = (DateTime)ViewState["begin"];
if (ViewState["end"] != null)
end = (DateTime)ViewState["end"];
}
Solution
If you don't want to mess with AJAX, the more traditional way to do this sort of thing with web forms is to use a panel control for each page/form of the wizard, and then hide or reveal the various panels on postback. It's not as fun or cool as the AJAX approach, but if it's really just a simple little wizard then this is a quick and easy way to do that.
The web form might look something like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="PanelWizard._Default" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="wizForm1" runat="server" Height="50px" Width="125px">
<asp:TextBox ID="txtName" runat="server" OnTextChanged="TextBox1_TextChanged"></asp:TextBox></asp:Panel>
</div>
<asp:Panel ID="wizForm2" runat="server" Height="50px" Width="125px" Visible="False">
<asp:Calendar ID="calStart" runat="server"></asp:Calendar>
</asp:Panel>
<asp:Button ID="btnContinue" runat="server" OnClick="btnContinue_Click" Text="Continue" />
</form>
</body>
</html>
The page viewstate will manage the value of your controls, which you can then access in the code-behind to implement your business logic as you hide and reveal the panels. For example:
namespace PanelWizard
{
public partial class _Default : System.Web.UI.Page
{
protected void btnContinue_Click(object sender, EventArgs e)
{
// validate controls according to business logic
//...
// Hide and reveal panels based on the currently visible panel.
if (wizForm1.Visible)
{
wizForm1.Visible = false;
wizForm2.Visible = true;
}
else if (wizForm2.Visible)
{
// and so on...
}
}
}
}
OTHER TIPS
Looks like you may have to use javascript/ajax to build an intuitive UI for the wizard. I would recommend Jquery as its easy to learn and manipulate DOM elements.
After much thought I think I need to make a finite state machine with a diagram showing all the possible state transitions. In addition the selection of good varible names and not writing as learning is probably necessary.