We Keep Coding

Add custom properties to ASP.net checkboxlist

Checkbox list items have default "Text", "Value", "Enabled" and "Selected" properties.
I need to add an "ImageUrl" property to each item in my list.
I use this code:
foreach (Zone zn in ZonesList)
{
ListItem item = new ListItem(zn.Name, zn.Id.ToString());
item.Attributes.Add("ImageUrl", zn.Image );
item.Selected = false;
visitPlaceList.Items.Add(item);
}
visitPlaceList.DataBind();
but it still doesn't show any properties other than the defaults.
How can this be achieved?

A property does get added, but as a span element surrounding the input and label. It looks like this
<span imageurl="www.google.nl">
<input id="ctl00_mainContentPane_visitPlaceList_1" type="checkbox" name="ctl00$mainContentPane$visitPlaceList$1" />
<label for="ctl00_mainContentPane_visitPlaceList_1">Name 1</label>
</span>
So if you need it with jQuery, get the correct element.
<asp:CheckBoxList ID="visitPlaceList" runat="server" ClientIDMode="Static"></asp:CheckBoxList>
<script>
$("#visitPlaceList input").change(function () {
var imageurl = $(this).closest('span').attr('imageurl');
console.log(imageurl);
});
</script>

Very interesting question! It exposes the limitations that web controls sometimes have.
I believe the proper way to solve it is by creating a custom (web) control. It is far from trivial though especially since both ListItem and CheckBoxList are sealed classes.
It can also be solved by creating a user control (ascx). The following can be improved but you get the idea:
ImageCheckBoxList.ascx
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:CheckBox ID="CheckBox1" runat="server" /><asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' /><asp:Label ID="Label1" runat="server" AssociatedControlID="CheckBox1" Text='<%# Eval("Text") %>'></asp:Label>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
ImageCheckBoxList.ascx.cs
public partial class ImageCheckBoxList : System.Web.UI.UserControl
{
public IList<ImageListItem> Items { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Repeater1.DataSource = Items;
Repeater1.DataBind();
}
for (int i = 0; i < Repeater1.Items.Count; i++)
{
var checkBox = (CheckBox)Repeater1.Items[i].FindControl("CheckBox1");
if (checkBox != null)
{
Items[i].Checked = checkBox.Checked;
}
}
}
}
where ImageListItem is:
public class ImageListItem
{
public string Text { get; set; }
public string Value { get; set; }
public string ImageUrl { get; set; }
public bool Checked { get; set; }
public ImageListItem(string text, string value, string imageUrl)
{
Text = text;
Value = value;
ImageUrl = imageUrl;
Checked = false;
}
}
Here's how to use it in a Web Forms page:
ASPX
<%# Register TagPrefix="uc" TagName="ImageCheckBoxList" Src="ImageCheckBoxList.ascx" %>
<uc:ImageCheckBoxList ID="ImageCheckBoxList1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
Code-behind
protected void Page_Load(object sender, EventArgs e)
{
ImageCheckBoxList1.Items = new List<ImageListItem>()
{
new ImageListItem("Item 1", "Item1", "Images/1.png"),
new ImageListItem("Item 2", "Item2", "Images/2.png"),
new ImageListItem("Item 3", "Item3", "Images/3.png")
};
}
protected void Button1_Click(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder();
foreach (ImageListItem item in ImageCheckBoxList1.Items)
{
if (item.Checked)
{
sb.AppendLine($"{item.Text} with value {item.Value} is checked.");
}
}
Label1.Text = sb.ToString();
}

Cannot implicitly convert type 'System.Web.UI.CompiledTemplateBuilder' to custom ITemplate

When you create a ListView, there is a property on the control that allows you to specify the ID of the PlaceHolder in the LayoutTemplate that is used to hold the controls for each item.
<asp:ListView ID="lvTest" runat="server" ItemPlaceholderID="testPlaceholder">
<LayoutTemplate>
<ul>
<asp:PlaceHolder ID="testPlaceholder" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li>Item</li>
</ItemTemplate>
</asp:ListView>
I am trying to create a custom templated server control but would like to have a property on the template itself as I expect to have several different templates. My extremely simplified, trivial example is as follows:
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ControlLibrary
{
[ParseChildren(true)]
public class TestContainer : Control, INamingContainer
{
[PersistenceMode(PersistenceMode.InnerProperty)]
[TemplateContainer(typeof(TestContainer))]
public TestTemplate TestTemplate { get; set; }
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
DataBind();
}
public override void DataBind()
{
base.DataBind();
CreateChildControls();
}
protected override void CreateChildControls()
{
Controls.Clear();
var phTest = new PlaceHolder();
phTest.ID = "phTest";
Controls.Add(phTest);
if (this.TestTemplate != null)
this.TestTemplate.InstantiateIn(phTest);
this.ChildControlsCreated = true;
}
}
public class TestTemplate : ITemplate
{
public string Name { get; set; }
public void InstantiateIn(Control container)
{
container.Controls.Add(new LiteralControl(this.Name));
}
}
}
However, if I add the template to my .aspx file like below I get an error saying CS0029: Cannot implicitly convert type 'System.Web.UI.CompiledTemplateBuilder' to 'ControlLibrary.TestTemplate'
<CustomControls:TestContainer ID="testContainer" runat="server">
<TestTemplate>
test
</TestTemplate>
</CustomControls:TestContainer>
Is it possible to do this or will I have to put all configurable properties on the parent container itself?
Thanks for any help you can provide!

You did everything correctly except the template property declaration. Any template must be declared as System.Web.UI.ITemplate. Just replace your template declaration with:
public ITemplate TestTemplate { get; set; }
And it should start working. For reference see How to: Create Templated ASP.NET User Controls.
To do a trick with custom attributes for template you need to add one more class inheriting from collection:
public class TestTemplateList : List<TestTemplate> { }
And change declaration of the control as following:
[ParseChildren(true, DefaultProperty = "TestTemplates")]
public class TestContainer : Control, INamingContainer
{
[PersistenceMode(PersistenceMode.InnerProperty)]
public TestTemplateList TestTemplates { get; set; }
// ... OnLoad and DataBind left intact
protected override void CreateChildControls()
{
Controls.Clear();
var phTest = new PlaceHolder();
phTest.ID = "phTest";
Controls.Add(phTest);
if (this.TestTemplates != null)
{
foreach (var testTemplate in TestTemplates)
{
((ITemplate)testTemplate).InstantiateIn(phTest);
}
}
this.ChildControlsCreated = true;
}
}
After that you should be able to declare control in both ways. You can skip specifying TestTemplates because it is declared as a DefaulProperty in ParseChildrenAttribute:
<CustomControls:TestContainer runat="server" ID="testContainer">
<CustomControls:TestTemplate Name="test">
</CustomControls:TestTemplate>
</CustomControls:TestContainer>
<%-- OR --%>
<CustomControls:TestContainer runat="server" ID="wc11">
<TestTemplates>
<CustomControls:TestTemplate Name="test">
</CustomControls:TestTemplate>
</TestTemplates>
</CustomControls:TestContainer>

Unable to populate RadioButtonList inside ASP.NET Repeater Template

I am trying to populate a repeater containing a label and a RadioButtonList in an ASP.NET webform to make a small quiz.
These are the classes I am using:
public class Option
{
private string _body;
private bool? _isCorrect;
#region properties
public string Body
{
get { return _body; }
}
public bool? IsCorrect
{
get { return _isCorrect; }
}
#endregion
#region constructors
public Option(string body)
{
_body = body;
_isCorrect = null;
}
public Option(string body, bool isCorrect)
{
_body = body;
_isCorrect = isCorrect;
}
#endregion
#region methods
public override string ToString()
{
return _body;
}
#endregion
}
and:
public class Question
{
private string _body;
private Option[] _optionsArray;
private List<Option> _optionsList;
#region properties
public string Body
{
get { return _body; }
}
public Option[] Options
{
get { return _optionsArray; }
}
public List<Option> OptionsList
{
get { return _optionsList; }
}
#endregion
#region constructors
public Question(string body, Option[] options)
{
_body = body;
_optionsArray = options;
_optionsList = new List<Option>();
foreach (Option opt in options)
{
_optionsList.Add(opt);
}
}
#endregion
#region methods
public override string ToString()
{
return _body;
}
public List<Option> GetOptions()
{
return OptionsList;
}
#endregion
}
My webform looks like this:
<div runat="server" ID="quizDiv">
<br />
<br />
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<%--<asp:Label ID="questionBody" runat="server" Text=<%# DataBinder.Eval(Container.DataItem, "Body") %>>--%>
<asp:Label ID="questionBody" runat="server" Text=<%# ((Question)Container.DataItem).Body %>>
<asp:radiobuttonlist ID="blah" runat="server" DataTextField="Body" DataValueField="Body" DataSource=<%# ((Question)Container.DataItem).OptionsList %> >
</asp:radiobuttonlist>
</asp:Label>
</ItemTemplate>
</asp:Repeater>
<br />
</div>
and the code-behind like so:
protected void btnStart_Click(object sender, EventArgs e)
{
Dataset1 ds = new Dataset1();
question = ds.CreateQuestion();
List<Question> qts = new List<Question>();
qts.Add(question);
Repeater1.DataSource = qts;
Repeater1.DataBind();
}
For the time being I am just using one question. The label displaying my question shows up fine, but no radio buttons show up for displaying the answer options. I have gone through many samples, and this seems to work for people when they use data from a DB via a DataTable or DataSet. However no matter how much I to play around with the Datasource, DataValueField and DataTextField parameters the RadioButtonList remains utterly barren. As you can see, I initially used an array of Option and also tried a List but to no avail.
What am I missing here?
EDIT - Found my mistake
I had the <asp:label> and <asp:radiobuttonlist> tags nested wrong! The label was encapsulating the radiobuttonlist and causing the problem from what I can make out.
ALTERNATIVE - thanks to balexandre
balexandre did provide a workable alternative by using only code-behing. Thank you!
I am including the code listing of this alternative for anyone who needs it and happens across this post.
Change the markup to look like this:
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<ItemTemplate>
<%--<asp:Label ID="questionBody" runat="server" Text=<%# DataBinder.Eval(Container.DataItem, "Body") %>>--%>
<asp:Label ID="questionBody" runat="server" Text=<%# ((Question)Container.DataItem).Body %>>
</asp:Label>
<asp:radiobuttonlist ID="blah" runat="server" >
</asp:radiobuttonlist>
</ItemTemplate>
</asp:Repeater>
and the code-behind must have the event handler:
protected void Repeater1_ItemDataBound(Object Sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
RadioButtonList rbl = (RadioButtonList)e.Item.FindControl("blah");
// do anything with your rbl
foreach (Option opt in question.Options)
{
rbl.Items.Add(opt.ToString());
}
}
}

you can only access the template using the Repeater method OnItemDataBound witch is invoked before it draws anything to the page.
void Repeater1_ItemDataBound(Object Sender, RepeaterItemEventArgs e) {
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) {
RadioButtonList rbl = (RadioButtonList)e.Item.FindControl["blah"];
// do anything with your rbl
}
}
Or by looping through all the Controls in the Repeater Collection, witch for example you have submited the page.
BTW, and just for your information
this code:
private string _body;
private bool? _isCorrect;
public string Body
{
get { return _body; }
}
public bool? IsCorrect
{
get { return _isCorrect; }
}
is the same as
public string Body { private get; }
public bool? IsCorrect { private get; }

EventHandlers of dynamic controls created in a ListView are not fired, if the ListView is bound in Page_Load

In our intranet ASP .NET application we use an architecture approach which is similar to the MVVM pattern.
Our viewmodel, which describes the state of the view, is either created or loaded in Page_Load from the ViewState.
Depending on the viewmodel content the page then is dynamically created.
Right now I am facing a problem where I cannot find an elegant solution.
The problem is that we have to handle events that are fired by the controls, which are dynamically created in the ListView. However, those registered events do only fire, if the listView is databound in Page_Init. If the databinding takes place in Page_Load those events are not fired.
The thing now is, that we need our ViewModel in order to databind the ListView to it. This ViewModel is cached in the ViewState, which - to my knowledge - only comes accessible in Page_Load. That means that in Page_Init we cannot access the ViewModel.
I created the following example:
ASP:
<form id="form1" runat="server">
<asp:ListView runat="server" ID="lstView" ItemPlaceholderID="itemPlaceHolder">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</LayoutTemplate>
<ItemTemplate>
<asp:DropDownList runat="server" ID="dropDown" SelectedValue='<%# Bind("SelectedValue") %>' DataSource='<%# Eval("Choice") %>' AutoPostBack="true" />
</ItemTemplate>
</asp:ListView>
</form>
Code Behind:
namespace WebApplication1
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Init(object sender, EventArgs e)
{
//if i put the Initialization logic here, the event gets fired, however the Model is not accessible from the viewstate
}
protected void Page_Load(object sender, EventArgs e)
{
InitializeModel();
lstView.DataSource = _model.NestedModels;
lstView.ItemCreated += (k, args) =>
{
var dropDown = (DropDownList)args.Item.FindControl("dropDown");
dropDown.SelectedIndexChanged += new EventHandler(dropDown_SelectedIndexChanged);
};
lstView.DataBind();
}
void dropDown_SelectedIndexChanged(object sender, EventArgs e)
{
Response.Write("Selected Index Changed fired");
}
private MyModel _model;
void InitializeModel()
{
if (ViewState["model"] == null)
ViewState["model"] = new MyModel();
_model = (MyModel) ViewState["model"];
}
}
[Serializable]
public class MyModel
{
[Serializable]
public class NestedModel
{
public NestedModel()
{
Choice = new List(new[] { "Value1", "Value2", "Value3", "Value4", "Value5" });
}
public string SelectedValue { get; set; }
public List Choice { get; set; }
}
private List _nestedModels = new List();
public MyModel()
{
Init();
}
public List NestedModels
{
get { return _nestedModels; }
}
void Init()
{
NestedModels.Add(new NestedModel() {SelectedValue = "Value1"});
NestedModels.Add(new NestedModel() { SelectedValue = "Value2" });
NestedModels.Add(new NestedModel() { SelectedValue = "Value3" });
NestedModels.Add(new NestedModel() { SelectedValue = "Value4" });
NestedModels.Add(new NestedModel() { SelectedValue = "Value5" });
}
}
}
I hope one of you guys knows a way either to preserve my event to get fired or to retrieve my cached ViewModel in Page_Init.
Best Regards,
TH

You have to override the CreateChildControls event and dynamically add the control there on page postback. This will be called first and then your dynamically event handler is called.
protected override void CreateChildControls()
{
PopulateControls();//populate your controls here
}

User Control Postback

I am working on rendering a set of cart items using a user control. Each cart item can be removed via a button in the user control. When a cart item is removed I need to visually show it's removal. However, since the cart item existed during the loading of the page it remains until the page is refreshed again. What I am after is a means to refresh the page after the work to remove the cartitem has been completed.
The code behind cart.aspx.cs looks like:
protected void Page_Init(object sender, EventArgs e)
{
CreateCartItemControls();
}
private void CreateCartItemControls()
{
foreach (CartItem ci in Profile.Cart.Items)
{
ASP.CartItemControl cic = new ASP.CartItemControl();
cic.ItemName = ci.Name;
cic.CartID = ci.ID;
cic.Cost = ci.BaseCost.ToString("c");
cic.ItemComponents = ci.Components;
cic.CartItemRemoved += new EventHandler(CartItemRemoved);
Content.Controls.Add(cic);
}
}
void CartItemRemoved(object sender, EventArgs e)
{
Master.UpdateCartItemCount();
}
Markup for CartItemControl.ascx
<%# Control Language="C#" ClassName="CartItemControl" AutoEventWireup="true"
CodeFile="CartItemControl.ascx.cs"
Inherits="UserControls_CartItemControl" %>
<fieldset id="FieldSet" runat="server">
<legend>
<asp:HyperLink ID="ItemLink" runat="server" />
</legend>
<asp:ImageButton ID="RemoveCartItem" AlternateText="Remove Item"
ImageUrl="~/img/buttons/remove_4c.gif" runat="server"
CommandName="Remove" OnCommand="RemoveCartItem_Command" />
<asp:Label ID="TotalItemCost" runat="server" Text="$0.00" />
<ol>
<li runat="server" id="ComponentsLI" visible="false">
<fieldset id="ComponentsFieldSet" runat="server">
<legend>Item Components</legend>
<asp:CheckBoxList ID="ItemComponentsCheckList"
runat="server" />
</fieldset>
</li>
</ol>
</fieldset>
Code behind for the UserControl CartItemControl.ascx.cs
public partial class UserControls_CartItemControl
: System.Web.UI.UserControl
{
public string ItemName { get; set; }
public int CartID { get; set; }
public string Cost { get; set; }
public IDictionary<int, SoftwareComponent> ItemComponents { get; set; }
protected void Page_PreRender(object sender, EventArgs e)
{
SetCartItemControlAttributes();
}
private void SetCartItemControlAttributes()
{
ItemLink.Text = ItemName;
TotalItemCost.Text = Cost;
RemoveCartItem.CommandArgument = CartID.ToString();
if (!ItemComponents.Count.Equals(0))
{
ComponentsLI.Visible = true;
foreach (KeyValuePair<int, ItemComponent> kvp in
ItemComponents)
{
ItemComponentsCheckList.Items.Add(
new ListItem(string.Format("{0} {1}",
kvp.Value.ComponentName,
kvp.Value.ComponentCost.ToString("c")),
kvp.Key.ToString()));
}
}
}
public event EventHandler CartItemRemoved;
protected void RemoveCartItem_Command(object sender, CommandEventArgs e)
{
int itemID;
if (int.TryParse(e.CommandArgument.ToString(), out itemID))
{
Profile.Cart.RemoveCartItem(itemID);
CartItemRemoved(sender, e);
Parent.Controls.Remove(this);
}
}
}

Just as you add CartItemControls to Content's Controls collection on init, you need to remove them on RemoveCartItem_Command. Do so by either exposing your own ItemRemoved event and handling it in the main page or by calling Parent.Controls.Remove(this) inside the RemoveCartItem_Command.
Or am I missing something?

Response.Redirect back to the page after you do the work to remove the cart item.

Try Server.Transfer to the same page.
That said, consider using Ruslan approach, by exposing an ItemRemoved event and handling it on the main page. You can do Content.Controls.Clear and call CreateCartItemControls again.

Just rebind the everything on the main page on every postback.