asp.net 마법사를 디자인하는 좋은 방법이 있습니까?

StackOverflow https://stackoverflow.com/questions/700292

  •  22-08-2019
  •  | 
  •  

문제

나는 마법사 컨트롤이 있다는 것을 알고 있지만 내가 원하는 것은 너무 단순하기 때문에 여기서 깊은 끝을 시작한 곳을 알 수 없습니다. 사용자가 자신의 이름을 넣고 다음에 히트를 할 때 캘린더 컨트롤이 시작 날짜에 맞게 전달되기를 원합니다. 시작 날짜를 녹색으로 표시 할 수 있습니다. 그들이 계속 버튼을 누르기 전까지는 그들이 선택하기를 원합니다. 1 호는 날짜없이 다음에 맞을 수 있다는 것입니다. 나는 그것을 잡고 싶다. 2 호는 다음에 치기 전에 여러 번 다시 선택할 수 있다는 것입니다. 나는 그들이 그렇게 할 수 있기를 바랍니다. 그들이 다음에 닿았을 때 나는 그들이 다음에 맞을 때까지 계속해서 날짜를 선택하고 종료 할 수 있기를 원합니다. 그런 다음 코이스를 확인하기를 원합니다. 논리가 그렇게 간단하지 않은 것 같아요 ... 내가 쓴 코드는 너무 나쁘다. :(. StartDatestArtPart와 EndDatestArtPart가 정신적 인 gibberish가 될 것이기 때문에 적절한 수정조차도 내 머리를 아프게합니다. 나는 분명히 이것을 다시 생각하고 다시 생각해야 할 것입니다.

<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"];
}
도움이 되었습니까?

해결책

Ajax를 엉망으로 만들고 싶지 않다면 웹 양식으로 이런 종류의 일을하는 더 전통적인 방법은 마법사의 각 페이지/양식에 대한 패널 컨트롤을 사용한 다음 Postback에서 다양한 패널을 숨기거나 공개하는 것입니다. 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>

Page ViewState는 컨트롤 값을 관리하고 코드-비드에서 액세스하여 패널을 숨기고 공개 할 때 비즈니스 로직을 구현할 수 있습니다. 예를 들어:

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

다른 팁

마법사에 대한 직관적 인 UI를 구축하기 위해 JavaScript/Ajax를 사용해야 할 것 같습니다. DOM 요소를 배우고 조작하기 쉬운 jQuery를 추천합니다.

많은 생각을 마친 후 나는 가능한 모든 상태 전환을 보여주는 다이어그램으로 유한 상태 기계를 만들어야한다고 생각합니다. 또한 좋은 변동 이름을 선택하고 학습으로 쓰지 않는 것이 필요할 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top