ASP.NET ¿Hay buenas maneras de diseñar los magos?

Question

Sé que hay un control Wizard disponible, pero lo que quiero es tan simplista que no puedo averiguar donde empecé a virar la parte más profunda aquí. Cuando un usuario pone en su nombre y le pega al lado Quiero que el control de calendario para convertirse en selecatable para una fecha de inicio. Tengo la posibilidad de marcar la fecha de inicio como el verde. Quiero que se seleccionan de distancia hasta que se pulsa el botón de continuar. Número 1 es que pueden golpear siguiente sin una fecha. Quiero coger eso. Emisión dos es que pueden volver a seleccionar varias veces antes de llegar a la próxima. Yo quiero que sean capaces de hacer eso. Una vez que lleguen al lado quiero que sean capaces de elegir y de finalización y otra vez hasta que lleguen a la próxima. Entonces quiero que confirman sus coices. Creo que la lógica no es tan simple ... El código que he escrito es tan malo. :(. Incluso las correcciones apropiadas daño a mi cabeza porque StartDateStartPart y EndDateStartPart simplemente se convertiría en un galimatías mental. Estoy, obviamente, va a tener que repensar y rehacer esto desde el principio.

<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

Si usted no quiere meterse con AJAX, la forma más tradicional de hacer este tipo de cosas con los formularios web es utilizar un panel de control para cada página / formulario del asistente, y luego ocultar o mostrar los diversos paneles en la devolución de datos. No es tan divertido o frío como el enfoque AJAX, pero si no deja de ser un simple pequeño mago entonces esta es una manera rápida y fácil de hacer eso.

La forma de la tela podría ser algo como esto:

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

El estado de vista página gestionará el valor de sus controles, que luego se puede acceder en el código subyacente para implementar la lógica de negocio a medida que ocultar y revelar los paneles. Por ejemplo:

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

Parece que puede tener que utilizar Javascript / Ajax para construir una interfaz de usuario intuitiva para el asistente. Yo recomendaría Jquery como su fácil de aprender y manipular elementos DOM.

Answer 3

Después de mucho pensarlo creo que es necesario hacer una máquina de estados finitos con un diagrama que muestra todas las posibles transiciones de estado. Además, la selección de buenos nombres varible y no la escritura como el aprendizaje es probable que sea necesario.