Question

我知道有一个精灵控制可用，但我想要的是如此简单，我无法弄清楚我在哪里开始转向深渊。当用户输入他们的名字并点击下一个时，我希望日历控件成为可选择的开始日期。我可以将开始日期标记为绿色。我希望他们选择离开，直到他们按下继续按钮。问题1是他们可以在没有约会的情况下接下来。我想抓住那个。第二个问题是他们可以在下次击中之前多次重新选择。我希望他们能够做到这一点。一旦他们接下来我希望他们能够一次又一次地选择和结束日期，直到他们下一次。然后我希望他们确认他们的银行。我猜逻辑并不那么简单......我写的代码太糟糕了。 :(。即使是正确的修复也会伤害我的头脑，因为StartDateStartPart和EndDateStartPart会变得精神错乱。我显然需要重新思考并从头开始重做。

<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

如果您不想搞砸AJAX，那么使用Web表单执行此类操作的更传统的方法是对向导的每个页面/表单使用面板控件，然后隐藏或显示各个面板在回发上。它不像AJAX方法那样有趣或酷，但如果它真的只是一个简单的小向导，那么这是一种快速简便的方法。

网络表单可能如下所示：

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

页面视图状态将管理控件的值，然后您可以在代码隐藏中访问它们，以便在隐藏和显示面板时实现业务逻辑。例如：

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

看起来您可能必须使用javascript / ajax为向导构建直观的UI。我建议Jquery易于学习和操作DOM元素。

Answer 3

经过深思熟虑后，我想我需要创建一个有限状态机，其中的图表显示了所有可能的状态转换。此外，选择好的可变名称而不是写作学习可能是必要的。

ASP.NET有没有很好的方法来设计向导？

3 个答案: