Griffiths web design based in Royston, Hertfordshire, United Kingdom

 

Binding data to an ASP.NET Repeater Control

Author:   Michael Griffiths

Date created:   01 December 2015

[l]In this tutorial I want to tell you how to bind data to an asp:Repeater control. For the example we will make a simple drop down list of colours and modify the background colour of each list item so the user can see each colour. I’ll assume that you have created a new project or opened the project you wish to apply this to. With that assumption in mind our first task it to call up a list of colours. We will use the system colours, but we also want to exclude colours such as [b]ActiveBorder[/b] or [b]MenuHighlight[/b] To get the desired list of colours use the following code:[/l] [code]public List getColours() { List cols = new List(); foreach (string c in Enum.GetNames(typeof(KnownColor)).Where( item => !item.StartsWith("Active") && !item.StartsWith("Menu") && !item.StartsWith("Scroll") && !item.StartsWith("Control")).OrderBy(item => item)) { if (!Color.FromName(c).IsSystemColor) { cols.Add(c.ToString()); } } return cols; }[/code] [l]This will give a list of colours but no means to display that data. In order to achieve what we want I have opted to use a
    control with an asp:Repeater to generate the
  • ’s. In your .aspx page you will need the following markup:[/l] [code]
    • Colour
      • <%# Container.DataItem %>
    [/code] [l]As you can see the repeater will generate the
  • elements one per colour. In your [b]Page_Load[/b] event you will need the following code to bind the data from the colour list to the repeater.[/l] [code]if (!this.IsPostBack) { rptCols.DataSource = getColours(); rptCols.DataBind(); foreach (RepeaterItem item in rptCols.Items) { HtmlGenericControl listItem = (HtmlGenericControl)item.FindControl("itmCol"); string col = listItem.InnerText; listItem.Attributes.Add("style", "background-color:" + col + ";"); } } [/code] [l]This code also changes the background colour property of each
  • to match the colour name it displays. Next we will add some css to style things and make the nested
      ’s behave like a drop down list. Nothing fancy or impressive about the css at all as you will see. In fact it’s pretty basic stuff.[/l] [code]#textCol { padding: 0; margin: 0; margin-left: 4px; margin-right: 4px; text-align: left; display: inline; float: left; } #textCol li { position: relative; display: block; background: #ffffff; margin-top: 2px; cursor:pointer; } #textCol ul ul li { width:10px; float:left; text-indent:-2000px; } #textCol ul ul { position: absolute; display: none; left: 0; top: 100%; min-width:200%; margin-left:10px; margin-right:10px; padding-left:10px; padding-right:10px; background:#ffffff; padding:10px; } #textCol li:hover > ul { display: block; } [/code] [l]I hope you found this tutorial easy to follow and enjoyable to read. As always if you have any comments then please feel free to add one in the form below this post. If you wish to email me about this or any other post then please head over to the contact page and use the form on that page. State the post title in the subject and ill reply as quickly as I can. [/l]

About the author

My name is Michael Griffiths, I am a website designer and developer and the owner of Griffiths Web Design. I am based in Royston, Hertfordshire. Most of my work is local, Hertfordshire, Cambridgeshire, Bedfordshire, Essex etc. but that’s not to say I won’t work elsewhere. One of the wonders of modern technology is remote working. So no matter where the client is located it is always possible to connect.

I specialise in creating ASP.NET webforms applications using C#. I use Microsoft SQL Server for database development and on the front end I use Html, CSS and JavaScript. I am also proficient in the use of jQuery and several CSS frameworks.

One of my greatest passions in life is learning. Which is why I chose to pursue a career in web design and development, technology is in a state of constant and rapid evolution which means there is always something new to learn. I also enjoy writing, both fiction and non-fiction.

Comments

Please feel free to leave a comment below:






 
Griffiths Web Design Logo by Michael Griffiths
Griffiths Web Design Logo by Michael Griffiths
Click to go to the top of the page