2009-03-31 4 views
1

사용할 수있는 마법사 컨트롤이 있다는 것을 알고 있습니다. 그러나 내가 원했던 것은 너무 단순해서 어디서부터 시작했는지 알 수 없습니다. 사용자가 이름과 히트를 다음에 넣을 때 나는 달력 컨트롤을 시작 날짜로 선택할 수있게하려고한다. 시작일을 초록색으로 표시 할 수 있습니다. 계속 버튼을 누를 때까지 선택하길 바래. 문제 1은 그들이 날짜없이 다음에 칠 수 있다는 것입니다. 나는 그것을 잡고 싶다. 두 번째 문제는 다음에 타격을주기 전에 여러 번 다시 선택할 수 있다는 것입니다. 나는 그들이 그 일을 할 수 있기를 바랍니다. 그들이 다음에 히트를하면, 나는 그들이 다음에 칠 때까지 계속 날짜를 선택하고 끝낼 수 있기를 바란다. 그 다음에 나는 그들에게 그들의 코즈를 확인하길 바란다. 나는 논리가 그렇게 단순하지 않다는 것을 짐작한다 ... 나가 쓴 부호는 아주 나쁘다. StartDateStartPart 및 EndDateStartPart 그냥 정신 횡설수설되기 때문에 :(. 심지어 적절한 수정이 내 머리를 다치게. 내가 분명히 다시 생각하고 처음부터이 작업을 다시해야 할 것입니다.ASP.NET 마법사를 디자인하는 좋은 방법이 있습니까?

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

asp.net 태그를 추가하십시오 : – JoshJordan

+0

일부는 조언을 주셔서 감사합니다! – ojblass

+0

나만의 답변으로 마무리해야합니까? – ojblass

답변

1

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

페이지 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... 
      } 
     } 
    } 
} 
+0

좋은 ... 그리고 내가 사용할 해결책 ... – ojblass

0

은 사용 할 수 있습니다 같은데 javascript/ajax를 사용하여 마법사의 직관적 인 UI를 작성하십시오. DOM 요소를 배우고 조작하기 쉽도록 Jquery를 권장합니다.

0

많이 생각한 후에 가능한 모든 것을 보여주는 다이어그램이있는 유한 상태 시스템을 만들 필요가 있다고 생각합니다 또한 상태 변수를 잘 선택하고 학습으로 쓰지 않는 것이 좋습니다.