题
我知道有一个向导控制可用,但我想是这么简单我想不通,我开始在这里转弯过深结束。当用户将他们的名字和打接下来我想日历控件成为selecatable的开始日期。我必须标记的开始日期为绿色的能力。我希望他们选择离开,直到他们打的继续按钮。问题1是他们可以不打日期旁边。我想赶上那班。问题二是它们可以触及下一个之前重新选择多次。我希望他们能够做到这一点。一旦他们打接下来我希望他们能够一遍又一遍地选择日期和结束日期,直到他们打未来。然后,我希望他们能够确认他们coices。我猜的逻辑并非如此简单......我写的代码是如此糟糕。 :(即使适当的修复伤害了我的头,因为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"];
}
解决方案
如果你不想用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...
}
}
}
}
其他提示
看起来可能必须使用JavaScript / Ajax构建为向导的直观的用户界面。我建议的Jquery作为其易于学习和操纵的DOM元素。
左思右想我认为需要使有限状态机与示出的所有可能的状态转移的图。另外的好varible名称的选择,而不是写作作为学习可能是必要的。
不隶属于 StackOverflow