I have a website form (c#) that sits inside a multiview control. The muliview control has 4 steps, so the first 3 steps gather information and if valid move to the next view on button click.
I want to dynamically build the form based on previous answers, but from what I've read so far I'm a little unsure how to make this happen.
For example, on step 1, a user completes some textbox controls and clicks submit.
Based on the data submitted in panel 1, the next panel needs to create a number of controls dynamically - some labels, some textboxes.
As this click is after both the init and page_load, I'm unsure how this will work.
Of course I could create all the label/textbox controls up front and disable them as necessary, but this seems to be quite a poor use of resource.
Bottom line, I'm inexperienced at working with dynamic controls so any advice would be appreciated.
Ok, below i've pasted working example. Things to be aware of:
Message=Failed to load viewstate. The control tree into which viewstate is being loaded must match the control tree that was used to save viewstate during the previous request. For example, when adding controls dynamically, the controls added during a post-back must match the type and position of the controls added during the initial request.
Source=System.Web
ErrorCode=-2147467259
set this property on your dynamic controls
EnableViewState = false
Data for this example looks like this
Brand Engine Color Cost
VW, 1.2, Black, 72 000
VW, 1.2, White, 70 000
VW, 1.6 TDI, Red, 79 500
VW, 1.6 TDI, White, 78 800
Ford, 1.6, Black, 57 600
Ford, 1.6, Green, 57 100
Ford, 2.0 TDCi, Black, 87 300
Ford, 2.0 TDCi, White, 86 600
Basicaly this works like this:
Page code:
<form id="form1" runat="server">
<div>
<asp:MultiView ID="mvPanels" runat="server">
<asp:View ID="vPanel1" runat="server">
<table>
<tbody>
<tr>
<td>Pick car</td>
<td><asp:DropDownList ID="ddlBrand" runat="server" /></td>
<td><asp:Button ID="btnPanel1Next" Text="Next" runat="server"
onclick="btnPanel1Next_Click" /></td>
<td><asp:Button ID="btnPanel1NextEngineOnly" Text="Next (pick engine only)" runat="server"
onclick="btnPanel1NextEngineOnly_Click" /></td>
</tr>
</tbody>
</table>
</asp:View>
<asp:View ID="vPanel2" runat="server">
<%--<table>
<tbody>
<tr>
<td>Pick engine</td>
<td><asp:DropDownList ID="ddlEngine" AutoPostBack="true" runat="server"
onselectedindexchanged="ddlEngine_SelectedIndexChanged" /></td>
<td><asp:DropDownList ID="ddlColor" AutoPostBack="true" runat="server"
onselectedindexchanged="ddlColor_SelectedIndexChanged" /></td>
<td><asp:Button ID="btnPanel2Prev" Text="Prev" runat="server"
onclick="btnPanel2Prev_Click" /><asp:Button ID="btnPanel2Next" Text="Next"
runat="server" Enabled="False" onclick="btnPanel2Next_Click" /></td>
</tr>
</tbody>
</table>--%>
</asp:View>
<asp:View ID="vPanel3" runat="server">
<table>
<tbody>
<tr>
<td><asp:Label ID="lblResult" runat="server" /></td>
<td><asp:Button ID="btnPanel3Prev" Text="Prev" runat="server"
onclick="btnPanel3Prev_Click" /><asp:Button ID="btnPanel3Finish"
Text="Confirm" runat="server" onclick="btnPanel3Finish_Click" /></td>
</tr>
</tbody>
</table>
</asp:View>
</asp:MultiView>
</div>
</form>
Code behind:
public partial class Default : System.Web.UI.Page
{
public class CarConfiguration
{
public string Brand { get; set; }
public string Engine { get; set; }
public PaintColor Paint { get; set; }
public string Cost { get; set; }
}
[Serializable]
public class CarConfigurationFilter
{
public string Brand { get; set; }
public string Engine { get; set; }
public PaintColor? Paint { get; set; }
public bool EngineOnly { get; set; }
}
public enum PaintColor
{
Black,
Red,
White,
Green,
}
public List<CarConfiguration> availableCars = new List<CarConfiguration>
{
new CarConfiguration{
Brand = "VW",
Engine = "1.2",
Paint = PaintColor.Black,
Cost = "72 000",
},
new CarConfiguration{
Brand = "VW",
Engine = "1.2",
Paint = PaintColor.White,
Cost = "70 000",
},
new CarConfiguration{
Brand = "VW",
Engine = "1.6 TDI",
Paint = PaintColor.Red,
Cost = "79 500"
},
new CarConfiguration{
Brand = "VW",
Engine = "1.6 TDI",
Paint = PaintColor.White,
Cost = "78 800",
},
new CarConfiguration{
Brand = "Ford",
Engine = "1.6",
Paint = PaintColor.Black,
Cost = "57 600"
},
new CarConfiguration{
Brand = "Ford",
Engine = "1.6",
Paint = PaintColor.Green,
Cost = "57 100"
},
new CarConfiguration{
Brand = "Ford",
Engine = "2.0 TDCi",
Paint = PaintColor.Black,
Cost = "87 300"
},
new CarConfiguration{
Brand = "Ford",
Engine = "2.0 TDCi",
Paint = PaintColor.White,
Cost = "86 600"
},
};
CarConfigurationFilter filter
{
get { return (CarConfigurationFilter)ViewState["Filter"]; }
set { ViewState["Filter"] = value; }
}
//If you have multiview in control you need to create this in event before event PageLoad like LoadViewState, LoadControlState, LoadControlState
protected override void OnPreLoad(EventArgs e)
{
if (IsPostBack && mvPanels.ActiveViewIndex == 1)
{
CreateControlsOnPanel2(true, !filter.EngineOnly);
}
base.OnPreLoad(e);
}
protected override void OnLoad(EventArgs e)
{
if (!IsPostBack)
{
ddlBrand.DataSource = availableCars.Select(x => x.Brand).Distinct();
ddlBrand.DataBind();
filter = new CarConfigurationFilter();
mvPanels.ActiveViewIndex = 0;
}
base.OnLoad(e);
}
protected void btnPanel1Next_Click(object sender, EventArgs e)
{
filter.Brand = ddlBrand.SelectedValue;
filter.EngineOnly = false;
CreateControlsOnPanel2(true, true);
mvPanels.ActiveViewIndex++;
}
protected void btnPanel1NextEngineOnly_Click(object sender, EventArgs e)
{
filter.Brand = ddlBrand.SelectedValue;
filter.EngineOnly = true;
CreateControlsOnPanel2(true, false);
mvPanels.ActiveViewIndex++;
}
void CreateControlsOnPanel2(bool enginePickerEnabled, bool colorPickerEnabled)
{
var btnPanel2Prev = new Button();
btnPanel2Prev.ID = "btnPanel1Prev";
btnPanel2Prev.EnableViewState = false;
btnPanel2Prev.Text = "Prev";
btnPanel2Prev.Click += btnPanel2Prev_Click;
var btnPanel2Next = new Button();
btnPanel2Next.ID="btnPanel2Next";
btnPanel2Next.Text = "Next";
btnPanel2Next.EnableViewState = false;
btnPanel2Next.Enabled = false;
btnPanel2Next.Click += btnPanel2Next_Click;
if (enginePickerEnabled)
{
var ddlEngine = new DropDownList();
ddlEngine.ID = "ddlEngine";
ddlEngine.AutoPostBack = true;
ddlEngine.EnableViewState = false;
var engines = availableCars.Where(x => x.Brand == filter.Brand).Select(found => found.Engine).Distinct().ToList();
engines.Insert(0, String.Empty);
ddlEngine.DataSource = engines;
ddlEngine.DataBind();
if (!String.IsNullOrEmpty(filter.Engine))
{
ddlEngine.SelectedValue = filter.Engine;
if (!colorPickerEnabled)
btnPanel2Next.Enabled = true;
}
else
ddlEngine.SelectedIndex = 0;
ddlEngine.SelectedIndexChanged += ddlEngine_SelectedIndexChanged;
vPanel2.Controls.Add(ddlEngine);
}
//remember to add ID to all dynamic controls or there might be an error on postback
if (colorPickerEnabled)
{
var ddlColor = new DropDownList();
ddlColor.ID = "ddlColor";
ddlColor.AutoPostBack = true;
ddlColor.EnableViewState = false;
ddlColor.SelectedIndexChanged += ddlColor_SelectedIndexChanged;
vPanel2.Controls.Add(ddlColor);
if (!String.IsNullOrEmpty(filter.Engine))
{
var colors = availableCars.Where(x => x.Brand == filter.Brand && x.Engine == filter.Engine).Select(found => found.Paint.ToString()).Distinct().ToList();
colors.Insert(0, String.Empty);
ddlColor.DataSource = colors;
if (filter.Paint.HasValue)
{
ddlColor.SelectedValue = filter.Paint.Value.ToString();
btnPanel2Next.Enabled = true;
}
}
else
{
ddlColor.DataSource = null;
ddlColor.SelectedIndex = 0;
}
ddlColor.DataBind();
}
vPanel2.Controls.Add(btnPanel2Prev);
vPanel2.Controls.Add(btnPanel2Next);
}
protected void ddlEngine_SelectedIndexChanged(object sender, EventArgs e)
{
var ddlEngine = sender as DropDownList;
var btnPanel2Next = (Button)vPanel2.FindControl("btnPanel2Next");
if (!String.IsNullOrEmpty(ddlEngine.SelectedValue))
{
filter.Engine = ddlEngine.SelectedValue;
var colors = availableCars.Where(x => x.Brand == filter.Brand && x.Engine == filter.Engine).Select(found => found.Paint.ToString()).Distinct().ToList();
colors.Insert(0, String.Empty);
filter.Paint = null;
var ddlColor = (DropDownList)vPanel2.FindControl("ddlColor");
if (ddlColor != null)
{
ddlColor.DataSource = colors;
ddlColor.DataBind();
ddlColor.SelectedIndex = 0;
btnPanel2Next.Enabled = false;
}
else
btnPanel2Next.Enabled = true;
}
else
{
var ddlColor = (DropDownList)vPanel2.FindControl("ddlColor");
if (ddlColor != null)
{
ddlColor.Items.Clear();
ddlColor.SelectedIndex = -1;
}
filter.Engine = null;
btnPanel2Next.Enabled = false;
}
}
protected void ddlColor_SelectedIndexChanged(object sender, EventArgs e)
{
var ddlColor = (DropDownList)vPanel2.FindControl("ddlColor");
var btnPanel2Next = (Button)vPanel2.FindControl("btnPanel2Next");
if (!String.IsNullOrEmpty(ddlColor.SelectedValue))
{
filter.Paint = (PaintColor)Enum.Parse(typeof(PaintColor), ddlColor.SelectedValue);
btnPanel2Next.Enabled = true;
}
else
{
filter.Paint = null;
btnPanel2Next.Enabled = false;
}
}
protected void btnPanel2Prev_Click(object sender, EventArgs e)
{
filter.Engine = null;
filter.Paint = null;
mvPanels.ActiveViewIndex--;
}
protected void btnPanel2Next_Click(object sender, EventArgs e)
{
mvPanels.ActiveViewIndex++;
var selectedConfiguration = availableCars.Where(x => x.Brand == filter.Brand && x.Engine == filter.Engine
&& (!filter.Paint.HasValue || x.Paint == filter.Paint)).Distinct().FirstOrDefault();
if (selectedConfiguration != null)
lblResult.Text = String.Format("You have selected {0} {1} {2} for {3} PLN", selectedConfiguration.Brand,
selectedConfiguration.Engine, selectedConfiguration.Paint, selectedConfiguration.Cost);
}
protected void btnPanel3Prev_Click(object sender, EventArgs e)
{
mvPanels.ActiveViewIndex--;
CreateControlsOnPanel2(true, !filter.EngineOnly);
}
protected void btnPanel3Finish_Click(object sender, EventArgs e)
{
}
}
If you have any additional questions I will be glad to help