ASP.NET Esistono buoni modi per progettare Wizards?

Question

So che c'è un controllo Wizard a disposizione, ma quello che voglio è così semplicistico che non riesco a capire dove ho iniziato virando fuori di testa qui. Quando un utente mette in loro nome e colpisce prossimo voglio il controllo calendario per diventare selecatable per una data di inizio. Ho la possibilità di contrassegnare la data di inizio come verde. Voglio loro di selezionare via fino a colpire il pulsante di continuare. Numero 1 è che possono colpire il prossimo, senza una data. Voglio prendere questo. Problema due è che può selezionare di nuovo molte volte prima di colpire il prossimo. Io voglio che siano in grado di farlo. Una volta che hanno colpito il prossimo voglio che siano in grado di scegliere e di fine più e più volte fino a colpire il prossimo. Poi voglio che confermino i loro coices. Credo che la logica non è così semplice ... Il codice che ho scritto è così male. :(. Anche le correzioni adeguate male la mia testa, perché StartDateStartPart e EndDateStartPart solo diventerebbero senza senso mentale. Sono ovviamente costretta a ripensare e rifare questo da zero.

<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"];
}

Answer 1

Se non si vuole fare confusione con AJAX, il modo più tradizionale per fare questo genere di cose con moduli web è quello di utilizzare un pannello di controllo per ogni pagina / modulo della procedura guidata, e quindi nascondere o rivelare i vari pannelli il postback. Non è così divertente e fresco come l'approccio AJAX, ma se è davvero solo un semplice piccolo mago allora questo è un modo facile e veloce per farlo.

Il modulo web potrebbe essere simile a questo:

<%@ 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>

La pagina viewstate gestirà il valore dei controlli, che è quindi possibile accedere nel code-behind per implementare la logica di business, come si nasconde e rivelare i pannelli. Ad esempio:

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...
            }
        }
    }
}

Answer 2

Sembra che si potrebbe essere necessario utilizzare JavaScript / AJAX per costruire un'interfaccia utente intuitiva per la procedura guidata. Suggerirei Jquery come il suo facile da imparare e manipolare gli elementi DOM.

Answer 3

Dopo molto pensato Credo bisogno di fare una macchina a stati finiti con un diagramma che mostra tutte le possibili transizioni di stato. Inoltre, la selezione di buoni nomi varible e non scrivere come l'apprendimento è probabilmente necessario.