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, Mar 07 '17 at 04: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, Mar 07 '17 at 04:51

dana · Answer 1 · 2017-03-07T16:47:43.107

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. — Jon P, Mar 07 '17 at 21:35

score 0 · Answer 2 · edited May 23 '17 at 10:29

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 · Answer 3 · 2017-03-07T05:12:44.523

-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 07 '17 at 05:12

answered Mar 07 '17 at 04:41

user1980489

1
1

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#? – Jon P Mar 07 '17 at 05:40
What did you mean by OP? @JonP – JPaulPunzalan Mar 07 '17 at 05:59
OP = Original Poster – Jon P Mar 07 '17 at 06:17
@JonP Not sure, what exactly you want to say. Please tell me what's wrong with my code. – user1980489 Mar 07 '17 at 06:23
Basically it looks like you are mixing javascript (`document.createElement`) with C# (`List`) and have no idea of what the concept of **CodeBehind** is in the context of C# – Jon P Mar 07 '17 at 06:32
@JonP I afraid , you are not familiar with **C# CodeBehind** . I have used following code in my project & it's running fine. void image1_MouseLeftButtonDown(object sender, MouseEventArgs e) { i++; document = HtmlPage.Document; HtmlElement select = document.GetElementByID("Select1"); HtmlElement option = document.CreateElement("option"); option.SetAttribute("innerText", i.ToString());//IE option.SetAttribute("textContent", i.ToString());//FireFox select.AppendChild(option); } . – user1980489 Mar 07 '17 at 06:39
I didn't downvote, but agree with @JonP that this looks like a mixture of C# and JavaScript. – dana Mar 07 '17 at 15:44
C# Code behind in this context refers to the C# code running behind a web page, be it an MVC view or WebForms page on a web server. As such there is no direct interface with the client side DOM. It looks like your code is for a [WebBrowser](https://msdn.microsoft.com/en-us/library/system.windows.forms.webbrowser(v=vs.110).aspx) control in a windows form project. Again this is not relevant to the original problem. – Jon P Mar 07 '17 at 21:32

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

3 Answers3