How to include block of HTML code when looping through multiple lists on CodeBehind

Question

So I have 2 lists on CodeBehind, List<List<string>> and List<string>. Below is the code for the 2 lists.

            loadTest1 = new List<string>();
            loadTest2 = new List<string>();
            loadTest3 = new List<string>();
            loadTest4 = new List<string>();

            loadTestList.Add(loadTest1);
            loadTestList.Add(loadTest2);
            loadTestList.Add(loadTest3);
            loadTestList.Add(loadTest4);

I am planning to display EVERY string inside the 4 loadtest Lists content on a hidden div. Below is the logic structure of what I am planning to implement. I want to generate an HTML CHIP for each string on all loadTests.

        foreach (List<string> test in loadTestList)
        {
            foreach (string value in test)
            {
               <div class="chip">
                 value
               </div>
            }
        }

How can I also append it in the hidden div? Are there any plugins that I could use to make this easier?

Is hidden div a container that contains all of these chip divs? Not sure if I understand how that comes into play. — dana
– dana, Commented Mar 7, 2017 at 4:48
Yes, hidden div would contain all the chip divs. Then it would show when I hover on another div which I have an idea on how to implement. @dana — JPaulPunzalan
– JPaulPunzalan, Commented Mar 7, 2017 at 4:51

dana · Accepted Answer · 2017-03-07 16:47:43Z

You could inline the code/values. Below is some skeleton code. If you provide more of your HTML structure, then I could probably improve this.

SamplePage.aspx

<!DOCTYPE html>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SamplePage.aspx.cs" Inherits="YourNamespace.SamplePage" %>

<html>
<head runat="server">
    <title></title>
</head>
<body>
    <div class="hidden">
    <%
    foreach (var list in LoadTestList)
    {
        foreach (string value in list)
        {
    %>
           <div class="chip">
             <%:value%>
           </div>
    <%
        }
    }
    %>
    </div>
</body>
</html>

Is should also be noted that loadTestList should be declared at the class level.

SamplePage.cs.aspx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace YourNamespace
{
    public partial class SamplePage : System.Web.UI.Page
    {
        protected List<List<string>> LoadTestList;

        protected void Page_Load(object sender, EventArgs e)
        {
            List<string> loadTest1 = new List<string> { "a1", "b1", "c1" };
            List<string> loadTest2 = new List<string> { "a2", "b2", "c2" };
            List<string> loadTest3 = new List<string> { "a3", "b3", "c3" };
            List<string> loadTest4 = new List<string> { "a4", "b4", "c4" };

            LoadTestList = new List<List<string>>();
            LoadTestList.Add(loadTest1);
            LoadTestList.Add(loadTest2);
            LoadTestList.Add(loadTest3);
            LoadTestList.Add(loadTest4);
        }
    }
}

Output

<!DOCTYPE html>



<html>
<head><title>

</title></head>
<body>
    <div class="hidden">

           <div class="chip">
             a1
           </div>

           <div class="chip">
             b1
           </div>

           <div class="chip">
             c1
           </div>

           <div class="chip">
             a2
           </div>

           <div class="chip">
             b2
           </div>

           <div class="chip">
             c2
           </div>

           <div class="chip">
             a3
           </div>

           <div class="chip">
             b3
           </div>

           <div class="chip">
             c3
           </div>

           <div class="chip">
             a4
           </div>

           <div class="chip">
             b4
           </div>

           <div class="chip">
             c4
           </div>

    </div>
</body>
</html>

Some more info from the OP would be good here. IIf they are using web forms (as hinted by the term CodeBegind) this would also open up the use of a repeater control.

Community · Accepted Answer · 2017-05-23 10:29:52Z

Borrowing from Dana's great answer I'm going to move a little more of the work to the code behind. I'm generally a fan of leaving html manipulation in aspx pages but in this case, I think it's worthwhile moving it to the code behind.

SamplePage.cs.aspx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace YourNamespace
{
    public partial class SamplePage : System.Web.UI.Page
    {
        protected List<List<string>> LoadTestList;

        protected void Page_Load(object sender, EventArgs e)
        {
            List<string> loadTest1 = new List<string> { "a1", "b1", "c1" };
            List<string> loadTest2 = new List<string> { "a2", "b2", "c2" };
            List<string> loadTest3 = new List<string> { "a3", "b3", "c3" };
            List<string> loadTest4 = new List<string> { "a4", "b4", "c4" };

            LoadTestList = new List<List<string>>();
            LoadTestList.Add(loadTest1);
            LoadTestList.Add(loadTest2);
            LoadTestList.Add(loadTest3);
            LoadTestList.Add(loadTest4);
        }
    }

    public string GetChips()
    {
        //First let's flatten the list with linq
        List<string> flatList = LoadTestList.SelectMany(x => x).ToList();

        //Now lets use Join to create the basis of out output;
        string output = String.Join("</div>"  + Environment.NewLine + "<div class=\"chip\">", flatList

        //We need to manually add the first and last div tags
        output =  string.Format("<div class=\"chip\">{0}</div>", output);

        //You could reduce all this to one line but I've broken up the steps for clarity.
        return output;
    }
}

SamplePage.aspx

<!DOCTYPE html>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SamplePage.aspx.cs" Inherits="YourNamespace.SamplePage" %>

<html>
<head runat="server">
    <title></title>
</head>
<body>
    <div class="hidden">
    <%= GetChips() %>
    </div>
</body>
</html>

Note If you're using asp.net WebForms you could use a Repeater control with the flattened list as the data source.

user1980489 · Accepted Answer · 2017-03-07 05:12:44Z

-1

If you want to create multiple div with chips class & want to display string in each div. Please try this below code

foreach (List<string> test in loadTestList)
        {
            foreach (string value in test)
            {
            var html='   <div class="chip">'+value+'</div>'
                 //Append it in hidden div with ID=divHidden
             $('#divHidden').append(html);
            }
        }

Thanks

Above code is for Javascript

In CodeBehind you can do like this

foreach (List<string> test in loadTestList)
            {
                foreach (string value in test)
                {
               var r  = document.createElement('Div');
      r.CssClass ="chip";
r.InnerHtml = value;
document.getElementById('divHidden').appendChild(r);

                }
            }

edited Mar 7, 2017 at 5:12

answered Mar 7, 2017 at 4:41

user1980489

11 bronze badge

8 Comments

Jon P Over a year ago

Both options still look a lot like javascript, one using jquery. Do you know what the OP means by codebehind when it comes to C#?

JPaulPunzalan Over a year ago

What did you mean by OP? @JonP

Jon P Over a year ago

OP = Original Poster

user1980489 Over a year ago

@JonP Not sure, what exactly you want to say. Please tell me what's wrong with my code.

Jon P Over a year ago

Basically it looks like you are mixing javascript (document.createElement) with C# (List<string>) and have no idea of what the concept of CodeBehind is in the context of C#

|

Collectives™ on Stack Overflow

How to include block of HTML code when looping through multiple lists on CodeBehind

3 Answers 3

1 Comment

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related