hide multiple <li> list items in code-behind

Question

I have a very huge unordered list items in my masterpage. say it contains 60+ list items. depending on some condition i want hide that list items (hidden items could be 1 to 59 )

My Master File Code Snippet :

<li><a href="#">Authorization</a>
    <ul>
        <li><a href="NewCardGeneration.aspx"><span>Card Request</span></a></li>
        <li><a href="cardIssueAuth.aspx"><span>Card Issue</span></a></li>
        <li><a href="CardReloadAuth.aspx"><span>Card Reload</span></a></li>
        <li><a href="CloseCardAuth.aspx"><span>Close Card</span></a></li>
        <li><a href="CardReplacementAuth.aspx"><span>Card Replacement</span></a></li>
        <li><a href="CardStatuschangeAuth.aspx"><span>Card Status Change</span></a></li>
        <li><a href="UpgradeDowngradeAuth.aspx"><span>Upgrade/DownGrade</span></a></li>
    </ul>
</li>

Condition : -

My DataTable returns values like

cardIssueAuth.aspx
Distributor.aspx
CardStatuschangeAuth.aspx
UpgradeDowngradeAuth.aspx

So i want to hide only those page which came in DataTable

I am aware of ID & runat attribute of <li> & then make it visible : false

But how can i use it efficiently/dynamically ? by using some for loop ...!!

Answer 1

I personally donot like the 'visibility' hack. You could selectively render the 'li' elements on the server-side itself (via code-behind or scriptlets) based on the entries on DataTable.

On the code-behind, you could have a static dictionary that contains all the link details, grouped by sections. Plus the filtering logic:

        var sections = new List<Section>()
                           {
                               new Section()
                                   {
                                       Header = "Authorization",
                                       SubLinkDetails = new Dictionary<string, string>()
                                                        {
                                                            {"NewCardGeneration.aspx", "Card Request"},
                                                            {"cardIssueAuth.aspx", "Card Issue"},
                                                            //.. and so on
                                                        }
                                   }
                               //.. other sections follow
                           };

        //filter subLinkDetails depending on the DataTable entries
        sections.ForEach(s => s.SubLinkDetails.RemoveWhere(k => DataTable.Contains(k)));

Here, the Section is a convenience class and RemoveWhere is an extension method on IDictionary:

    class Section
    {
        public string Header { get; set; }
        public IDictionary<string,string> SubLinkDetails { get; set; }
    }
    public static class IDictionaryX
    {
        public static void RemoveWhere<K,V>(this IDictionary<K,V> dictionary, Predicate<K> condition)
        {
            IEnumerable<K> keysToRemove = dictionary.Keys.Where(k => condition(k));
            foreach (var k in keysToRemove)
            {
                 dictionary.Remove(k);
            }
        }
    }

In your aspx, access the sections and render the ul/li elements:

        <%foreach (var section in sections)
        {%>
            <li><a href="#"><%=section.Header %></a>
            <%foreach (var filteredLink in section.SubLinkDetails)
            {%>
                <li><a href="<%= filteredLink.Key>"><span>"<%= filteredLink.Value>"</span></a></li>
            <%}%>
            </li>
        <%}%>

Answer 2

Provide id to your <li> according to page names.

And then,

You can do this by

if (listItem.selectedItem == 'pagename.aspx')
    this.hide.style.Add("display", "none");