Transform the SQL Query Output to a Stylish Web Menu

I am in the process of creating a drill-down menu for my website. The idea is that when a user clicks on a category, it will display the subcategories belonging to that specific category. This can extend into multiple levels of subcategories. I have successfully written an SQL query that produces the exact output I desire. However, my challenge lies in determining how to present this menu to the end user. Ideally, I would like only the clicked category to expand while keeping the rest collapsed.

    Query Output:

1 IPTV
2      Jadoo Tv
3      Shava Tv
4      Jalva Tv
5 Programming
6      Microsoft
7           Asp.Net
8      PHP

Therefore, by default, IPTV & Programming should be visible as they are parent categories. When clicking on IPTV, it should reveal its children, with the possibility of endless levels of nesting.

My initial thought was to load the query output onto the webpage and manipulate the menu navigation using CSS and JavaScript.

Do any of you have suggestions or ideas on how to approach this?

javascriptasp.netcss

Answer №1

Here is the final version of the code for generating a left menu after retrieving data from a SQL stored procedure.

    Private Sub ConstructLeftMenu()

    Dim dataTable As DataTable = DataAccessLayer.GetSqlData("EXEC GetCategoryTree")
    Dim stringBuilder As New StringBuilder

    Dim categoryName As String = ""
    Dim categoryId As Integer = 0
    Dim parentCategoryId As Integer = 0
    Dim sorting As String = ""
    Dim keysArray As Array

    Dim displayStyle As String = "none"

    For Each row As DataRow In dataTable.Rows

        categoryName = Replace(row("CatName"), " ", " ")
        categoryId = row("id")
        parentCategoryId = row("parent")
        sorting = row("sort")

        If parentCategoryId = 0 Then
            stringBuilder.Append("<div class='group_" & parentCategoryId & "'><a href='/pages/index.aspx?cat=" & sorting & "' id='group_" & categoryId & "'>" & categoryName & "</a></div>")
        Else

            If Len(Me.GroupID) > 0 Then
                keysArray = Split(Me.GroupID, "_")

                For Each key As String In keysArray
                    If CInt(key) = parentCategoryId Then
                        stringBuilder.Append("<div class='group_" & parentCategoryId & "' style='display:block'><a style='text-decoration:none' href='/pages/index.aspx?cat=" & sorting & "' id='group_" & categoryId & "'>" & categoryName & "</a></div>")
                    Else
                        'stringBuilder.Append("<div class='group_" & parentCategoryId & "' style='display:none'><a style='text-decoration:none' href='/pages/index.aspx?cat=" & sorting & "' id='group_" & categoryId & "'>" & categoryName & "</a></div>")
                    End If
                Next

            End If



        End If

    Next

    LeftMenu.Text = stringBuilder.ToString

End Sub

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Offspring with percentage-based widths inside a parent element also specified with percentage-based

I have a group of (pseudocode) elements that look like this: <div id="parent"> <a><div id="child1 class="children"></a> ... <a><div id="child-n class="children"></a> </div> These elements are st ...

htmlcssresponsive-design

Incorporating Role Assignment to Newly Created User in Web.config

In the web.config of my asp.net site, I have set up a few users for authentication purposes. While I am not using the full membership/role provider due to time constraints, I still need to assign roles to users so that securityTrimming functions properly w ...

asp.netroles

Convert the value of the <textarea> element to HTML encoding

Is there a way to fetch the most recent updated value entered in a textarea and encode it in HTML format? I usually use this code snippet to retrieve the value: $('textarea').val(); // works consistently across browsers However, if the value c ...

javascriptjquery

What sets apart a script request from an xhr request?

Could you please clarify the difference between sending a request through a script tag, an iframe, and an xhr request? Are they all types of HTTP requests? Can one replace the other? ...

javascriptxmlhttprequest

The issue with the float-left property arises when used within a relative positioning

Why can't I move my Image to the left side of the div? No matter what I try, it stays stuck in the center. I initially used flexbox to achieve this, but had to switch to relative positioning due to a conflict with the Nextjs Image component. The issu ...

cssnext.jscss-positiontailwind-css

Using jQuery ajax with asynchronous set to 'true' causes my web application to freeze until the data is retrieved

I am currently working with a PHP-based web application that I did not create. Here is the AJAX request I am running: $.ajax({ type: 'POST', url: "/potato/ajax.php?module=test_module", dataType: 'json', async: true, ...

javascriptphpjqueryajaxasynchronous

What is the best way to access the validation group in a javascript event?

Recently, I've been grappling with a challenge involving a button that has a validation group. The quirk is that the button click event triggers a jQuery function without using onclientclick. As I navigate through this dilemma, one burning question re ...

javascriptjquery.netvalidation

I am attempting to execute an ASP.NET function using an HTML submit button, but for some reason the function is not being triggered

I need the function submit_click to be triggered when the submit button on the HTML section is clicked <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" %> <html xmlns="http://www.w3.o ...

c#htmlasp.net

Decrease spacing between lines in menu options

Struggling to adjust the line height for a specific menu item on my Wordpress site. Looking to decrease the space between lines. Check out the website here: kristinaartgallery.ru Appreciate any assistance you can provide, thank you! ...

csswordpressmenuhyperlinkstyles

What is the best way to execute a task in Grunt when supplied with a dynamically-generated array of filenames?

Although I am relatively new to using Grunt, I have developed a good understanding of how tasks are installed and executed. Currently, I am successfully running tasks such as minifying js, copying files, and executing jshint. Now, my goal is to implement ...

javascriptarraysnode.jsgruntjs

"Refresh the visuals on canvas by updating images using the file input type in j

Check out jCanvas, a jQuery plugin that I'm using to create a flyer editor: $(function () { initCanvas(); // code for datepicker in French goes here... $('form').on('keyup change paste', 'input, select, textarea&a ...

javascripthtmljquerycanvasjcanvas

pair each instance of a string

Currently, I am developing a todo list application that allows users to add to-do list items and search for specific tasks. My focus at the moment is on refining the search function. Presently, whenever a user searches for a name, only the first task ass ...

javascriptregexmatch

It is no longer recommended to use getPreventDefault(). Instead, defaultPrevented should be used

Is there a way to automatically print the receipt page when loaded in Firefox? While attempting to do so, Firefox displays the following error: Use of getPreventDefault() is deprecated. Please use defaultPrevented instead. Error source line: src.getPrev ...

javascriptjqueryfirefoxprinting

Video Autoplay within an image carousel - A seamless integration

I need assistance embedding a YouTube video as the fourth item in a slideshow on my website, www.serenitygardenrooms.com. The slideshow should play the first three images and then autoplay the video before moving on to the next image. However, the code sni ...

javascriptjquerycssyoutubeslideshow

From JavaScript to a jQuery AJAX call

My Javascript code utilizes Ajax to send a request to my Tomcat server. I have configured a filter on the server to allow cross domain requests by setting up the following: <filter> <filter-name>CorsFilter</filter-name> <filte ...

javascriptjqueryajaxtomcatcross-domain

Using jQuery to import certain library causes the XPage to completely lock up

My XPage only relies on 2 js imports - one being JQuery and the other dependent on JQuery specifically for smart companies search in the Russian Federation. However, a challenge arises when trying to import the second library as it causes the entire page t ...

javascriptjqueryxpages

Updating padding through local storage does not function as intended

I recently added two buttons to my website for adjusting the padding. While they are functional, I find myself manually setting the padding for nav, main, and footer in the CSS. Here is the snippet of the code: main { padding: 20px 25%; } footer { ...

javascripthtmljquerycss

Tips on how to successfully hand over properties in Vue Router

Hey there, I've been working on passing props in Vue routes and have made some progress but it's not quite what I want. What I have so far route.js { path: '/register/', name: 'register', component: require(&apo ...

javascriptvue.jsvuejs2vue-componentvue-router

Issue with Vue JS: e.preventDefault not functioning correctly when using Axios

I am facing an issue in my Laravel project where I have implemented a method in the Vue instance to validate resource availability upon form submission. The validation is done through an AJAX call using axios, and if any resources are unavailable, I receiv ...

javascriptformsvue.jsaxios

Ensuring phone number accuracy through a custom validator along with JavaScript validation

My phoneTextBox control has 4 TextBoxes: country code (1-3 digits), city code (1-7 digits), local number (1-7 digits) and an optional extra phone number (1-5 digits). The provided code is not functioning correctly. <script type="text/javascript& ...

javascriptjqueryasp.netregexvalidation