1

利用可能なウィザード コントロールがあることは知っていますが、私が求めているのはあまりにも単純すぎて、ここで深いところから逸脱し始めた場所がわかりません。ユーザーが自分の名前を入力して次にヒットすると、カレンダー コントロールで開始日を選択できるようにしたいと考えています。開始日を緑色でマークすることができます。続行ボタンを押すまで選択してもらいたいです。問題 1 は、彼らが日付なしで次にヒットできることです。それを捕まえたい。問題 2 は、次にヒットする前に何度も再選択できることです。それができるようになってほしい。彼らが次にヒットしたら、次にヒットするまで何度でも日付を選択して終了できるようにしたいと思います。それから、彼らの声を確認してもらいたい。ロジックはそれほど単純ではないと思います... 私が書いたコードはとても悪いです。:(。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"];
}
4

3 に答える 3

1

AJAX をいじりたくない場合、Web フォームでこの種のことを行うより伝統的な方法は、ウィザードの各ページ/フォームにパネル コントロールを使用し、ポストバックでさまざまなパネルを表示または非表示にすることです。これは AJAX アプローチほど楽しくもクールでもありませんが、それが本当に単純な小さなウィザードである場合は、これをすばやく簡単に実行できます。

Web フォームは次のようになります。

<%@ 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...
            }
        }
    }
}
于 2009-04-01T03:19:54.283 に答える
0

ウィザードの直感的な UI を構築するには、javascript/ajax を使用する必要があるようです。DOM 要素の習得と操作が簡単な Jquery をお勧めします。

于 2009-03-31T07:10:20.307 に答える
0

よく考えた結果、考えられるすべての状態遷移を示すダイアグラムを使用して、有限状態マシンを作成する必要があると思います。さらに、適切な変数名の選択と学習としての書き込みはおそらく必要です。

于 2009-04-01T02:46:22.647 に答える