I have tried to due my research before posting as a question, most searched I have performed are providing me guides to creating buttons with images in them which is not what I need.

I am starting off with a data structure, that represents 3 categories, with a collection of items in each category that map to images. The actual format is a CSV, but I will show in JSON to clarify

{ 
"Category1": "1, 2",
"Category2": "3, 4, 5",
"Category3": "6, 7, 8, 9"
}

with the raw actual being Category1:1,2;Category2:3,4,5;Category3:6,7,8,9

The categories are not fixed, so the data must be read to determine the text for each button.

I would like three toggle buttons for each category. If a button is selected all the items from that category will be rendered on the page. Numbers have a 1:1 mapping with images like "1.jpg". Images should be in a list.

So far, I am able to show all the data. But I can not figure out how to add these buttons to hide a category. This has been done the aspx page, and not in the aspx.cs. The aspx page is very poorly done, but I did not want to work to hard on it because I think most of the logic for this should be in C#.

<div>
    <div>
        <p runat="server">
            Price 1: <% =GetAd3("ScoredAds3", Context.User.Identity.GetUserName(), Context.User.Identity.GetUserName()).Split(new char[]{ '+'})[0].Split(new char[]{ ':'})[1].Split(new char[]{ ';'})[0].Split(new char[]{ '.'})[0]%>
        </p>
        <div>
            <img style="margin-top: 20px; width: 210px;" src="./Hotel/<% =GetAd3("ScoredAds3", Context.User.Identity.GetUserName(), Context.User.Identity.GetUserName()).Split(new char[]{ '+'})[0].Split(new char[]{ ':'})[1].Split(new char[]{ ';'})[0].Split(new char[]{ '.'})[1].Split(new char[]{ ','})[0]%>.jpg" />
            <img style="margin-top: 20px; width: 210px;" src="./Hotel/<% =GetAd3("ScoredAds3", Context.User.Identity.GetUserName(), Context.User.Identity.GetUserName()).Split(new char[]{ '+'})[0].Split(new char[]{ ':'})[1].Split(new char[]{ ';'})[0].Split(new char[]{ '.'})[1].Split(new char[]{ ','})[1]%>.jpg" />
            <img style="margin-top: 20px; width: 210px;" src="./Hotel/<% =GetAd3("ScoredAds3", Context.User.Identity.GetUserName(), Context.User.Identity.GetUserName()).Split(new char[]{ '+'})[0].Split(new char[]{ ':'})[1].Split(new char[]{ ';'})[0].Split(new char[]{ '.'})[1].Split(new char[]{ ','})[2]%>.jpg" />
        </div>
    </div>
    <div>
        <p runat="server">
            Price 2: <% =GetAd3("ScoredAds3", Context.User.Identity.GetUserName(), Context.User.Identity.GetUserName()).Split(new char[]{ '+'})[0].Split(new char[]{ ':'})[1].Split(new char[]{ ';'})[1].Split(new char[]{ '.'})[0]%>
        </p>
        <div>
            <img style="margin-top: 20px; width: 210px;" src="./Hotel/<% =GetAd3("ScoredAds3", Context.User.Identity.GetUserName(), Context.User.Identity.GetUserName()).Split(new char[]{ '+'})[0].Split(new char[]{ ':'})[1].Split(new char[]{ ';'})[1].Split(new char[]{ '.'})[1].Split(new char[]{ ','})[0]%>.jpg" />
            <img style="margin-top: 20px; width: 210px;" src="./Hotel/<% =GetAd3("ScoredAds3", Context.User.Identity.GetUserName(), Context.User.Identity.GetUserName()).Split(new char[]{ '+'})[0].Split(new char[]{ ':'})[1].Split(new char[]{ ';'})[1].Split(new char[]{ '.'})[1].Split(new char[]{ ','})[1]%>.jpg" />
            <img style="margin-top: 20px; width: 210px;" src="./Hotel/<% =GetAd3("ScoredAds3", Context.User.Identity.GetUserName(), Context.User.Identity.GetUserName()).Split(new char[]{ '+'})[0].Split(new char[]{ ':'})[1].Split(new char[]{ ';'})[1].Split(new char[]{ '.'})[1].Split(new char[]{ ','})[2]%>.jpg" />
        </div>
    </div>
    <div>
        <p runat="server">
            Price 3: <% =GetAd3("ScoredAds3", Context.User.Identity.GetUserName(), Context.User.Identity.GetUserName()).Split(new char[]{ '+'})[0].Split(new char[]{ ':'})[1].Split(new char[]{ ';'})[2].Split(new char[]{ '.'})[0]%>
        </p>
        <div>
            <img style="margin-top: 20px; width: 210px;" src="./Hotel/<% =GetAd3("ScoredAds3", Context.User.Identity.GetUserName(), Context.User.Identity.GetUserName()).Split(new char[]{ '+'})[0].Split(new char[]{ ':'})[1].Split(new char[]{ ';'})[2].Split(new char[]{ '.'})[1].Split(new char[]{ ','})[0]%>.jpg" />
            <img style="margin-top: 20px; width: 210px;" src="./Hotel/<% =GetAd3("ScoredAds3", Context.User.Identity.GetUserName(), Context.User.Identity.GetUserName()).Split(new char[]{ '+'})[0].Split(new char[]{ ':'})[1].Split(new char[]{ ';'})[2].Split(new char[]{ '.'})[1].Split(new char[]{ ','})[1]%>.jpg" />
            <img style="margin-top: 20px; width: 210px;" src="./Hotel/<% =GetAd3("ScoredAds3", Context.User.Identity.GetUserName(), Context.User.Identity.GetUserName()).Split(new char[]{ '+'})[0].Split(new char[]{ ':'})[1].Split(new char[]{ ';'})[2].Split(new char[]{ '.'})[1].Split(new char[]{ ','})[2]%>.jpg" />
        </div>
    </div>
</div>

Related posts

Recent Viewed