CODEWITHSUNDEEP
c#asp.net
Varun Sharma
Varun Sharma

Reputation: 2759

asp .net displaying a grouped list of items

I will be calling a web service and that web service will return data in this format.

<element>
    <label>Some Text</label>
    <items>
      <item>1</item>
    <items>
</element>
<element>
    <label>Some Text 2</label>
    <items>
      <item>google</item>
      <item>mac</item>
      <item>bus</item>
    <items>
</element>
<element>
    <label>Some Text 3</label>
    <items>
      <item>OS</item>
      <item>Brush</item>
    <items>
</element>

Now on my asp .net web forms page, for each element I need to display a table of two columns, the left column will contain label text (for example some text). But the right column Needs to contain checkboxes and number of checkboxes will be equal to number of items in each element. And then there will be a save button for each element. Basically the idea is that user can un-select that item. So for example: for second item, the UI should look something like this:

enter image description here

But of course there can be 100s of items. So what is the best way to do it in asp .net web forms? I thought of following:

Create controls dynamically in the code behind and keep adding them based on the response of web service. Is there any other way to do it?

Thanks.

Upvotes: 0

Views: 833

Answers (2)

mshsayem
mshsayem

Reputation: 18008

You can use ListView like this:

aspx mark-up:

<asp:ListView runat="server" ID="myListview" OnItemDataBound="listview_ItemDataBound">
    <ItemTemplate>
        <div style="overflow: auto;clear: both;">
            <div style="float: left; clear: both;">
                <%#Eval("LabelText") %>
            </div>
            <div style="float: left">
                <asp:CheckBoxList runat="server" RepeatColumns="3" ID="cblItems" />
                <asp:Button Text="Button" runat="server" />
            </div>
        </div>
    </ItemTemplate>
</asp:ListView>

Code Behind

// Assuming your service will return [element] types
class element
{
    public string LabelText { get; set; }
    public List<string> Items { get; set; }
}

public partial class WebForm4 : System.Web.UI.Page
{
    private static Random RNG = new Random(DateTime.Now.Millisecond);
    protected void Page_Load(object sender, EventArgs e)
    {
        PopulateData();
    }

    private void PopulateData()
    {
        // Pseudo service data
        var serviceData = Enumerable.Range(1, 10).Select(i => new element
        {
            LabelText = "Some Text " + i,
            Items = Enumerable.Range(1, RNG.Next(3, 12)).Select(j => " Item " + j).ToList()
        });

        myListview.DataSource = serviceData;
        myListview.DataBind();
    }

    protected void listview_ItemDataBound(object sender, ListViewItemEventArgs e)
    {

        if(e.Item.ItemType == ListViewItemType.DataItem)
        {
            var dataItem = e.Item.DataItem as element;
            var cbl = e.Item.FindControl("cblItems") as CheckBoxList;
            cbl.DataSource = dataItem.Items;
            cbl.DataBind();
        }
    }
}

Upvotes: 1

Doug
Doug

Reputation: 3873

In ASP.NET web forms, the normal way to add dynamic content is to add controls to the page during the Page_Init or Page_Load stage of the request. You could also make the web service call in the client side or make translation service that will call the XML service and respond in JSON.

There are numerous jQuery plugins that could display the data.

Upvotes: 1

Related Questions