Is there a way to dynamically generate a specific number of divs based on SQL data at runtime?

I am in the process of developing an ASP.NET web application focused on virtual classrooms. Each user has their own set of classrooms that are saved in my SQL database, and I want to display these classrooms on individual cards using HTML tags.

The card layout is already designed, but now I need to dynamically create the required number of cards based on the user's joined classrooms. I also need each button on the card to perform a specific action depending on the classroom it represents. The challenge lies in generating these cards at runtime, and I'm unsure of how to proceed.

If anyone has experience with this kind of dynamic card creation, I would greatly appreciate your assistance.

My English may not be perfect as Spanish is my primary language, and I try to avoid using translators due to potential inaccuracies.

You can view a screenshot illustrating my point here:

https://i.sstatic.net/K7b9g.png

I have attempted to display some sample cards filled with data, but it is not very user-friendly. Ideally, I want to present only the necessary cards for a cleaner user experience.

c#htmlcssasp.net

Answer №1

To begin, start by creating a div element with an ID where you can populate data cards dynamically. Use jQuery to make an AJAX call and retrieve the data from the server. Once you receive the response, implement the following code:

Let's say you have a div with the ID "maindiv":

Now, in the response section, write:

var html = ""; $("#maindiv").append();

Within the childDiv, insert your HTML for the data cards and use a dynamic counter to manage unique IDs for each control.

Answer №2

Thank you so much! I've discovered a more efficient method to accomplish this task. Now, I am utilizing the 

System.Web.UI.HtmlControls.HtmlGenericControl
for generating HTML controls and System.Web.UI.WebControls.xxxx for creating ASP controls. By applying properties using 
xxx.Attributes.Add("class", "pcodigoca");
, setting text with 
pcodigo.InnerText = "CÓDIGO DE CLASE:";
, and adding child tags using 
xxx.InnerHtml += "<span class=\"pidclas\">" + detalleclase[3].ToUpper() + "</span>";
. I implemented these changes in the Load methods and everything is functioning flawlessly.

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

Incorporating a horizontal divider into a row within a table

I have been facing an issue with applying a border-bottom rule to each row in my table. Despite trying different approaches, the rule is not being displayed as expected. After inspecting the code and checking the relevant classes, I am still unable to pin ...

htmlcsshorizontal-line

What is the best way to programmatically access this WPF XAML resource?

Can you please guide me on how to programmatically access this WPF XAML resource? <Grid.Resources> <Style x:Key="lineDataPointStyle" TargetType="chartingToolkit:LineDataPoint"> <Setter Property="Background" Value="Da ...

c#.netwpfxaml

Challenges with Implementing Slide Out Menus

Creating a page with multiple slide out menus- one on the right, left, and bottom. Currently facing a few issues: The content div is not moving to the right when the menu is selected. The menu icon moves but the div stays put. Attempting to have them bot ...

javascriptcsscss-transitions

Issue with PHP header not redirecting after form submission page

When the form is submitted, the user is directed to an action page where an email is sent with an attachment. Although I am receiving the email and attachment successfully, the header('Location: ...') function seems to be malfunctioning. The act ...

phphtmlforms

What is the best way to ensure that each link displays unique text in a separate div when clicked on?

<aside class="side_article_content"><p id="defaultText">Chakras are explained here.</p> <p id="baseChakraInfo" style="display:none;">Base Chakra details here.</p> <p id="sacralChakraInfo" style="display:none;">Sa ...

javascripthtmlonclick

Block entry to HTML files unless the user has logged in utilizing PHP sessions

I have been working on implementing a verification process to check if a user is logged in when accessing a specific HTML file. When a user tries to access something.html without being logged in, I would like to redirect them to index.php and restrict acc ...

phphtmlsession

What is the method for setting the doctype to HTML in JavaScript or React?

I created a canvas with a height equal to window.innerHeight, but unexpectedly it seems to have 100% screen height plus an extra 4 pixels coming from somewhere. I came across a solution suggesting that I need to declare doctype html, but I'm unsure ho ...

javascripthtmlreactjscanvasdoctype

How can I design a custom popover control within a C# WinForms application?

One of the things I love about iOS/ObjC is the "popover" control. Now, as I work on developing an app in C# WinForms, I'm wondering how I can achieve a similar look and feel for my project. Any suggestions on how to emulate this type of control effect ...

c#.netwinforms

UTC conversion impacted by daylight saving time adjustments

My current task involves converting local dates stored in the database into UTC. However, I recently learned that daylight saving rules were updated in 2007. This makes me question whether the Date.ToUniversalTime() function will still work accurately. Wou ...

c#.net

What could be causing the issue with my code where the canvas is not showing boxes beyond a y-coordinate of 8 along the x-axis?

I've been working on creating a 64 square checkerboard using the html canvas element in javascript, but I'm encountering an issue. The boxes aren't rendering properly after the first 8 squares on the y-axis, and I can't figure out where ...

javascripthtmlcanvas

Tooltip positioned within a custom container using Material UI

Currently, as part of my Chrome extension development utilizing React and Material UI, I am implementing an inject page strategy. I have managed to set up a tooltip for the Fab button, but unfortunately, it appears outside the DOM of my extension. Upon ins ...

javascripthtmlreactjsgoogle-chrome-extensionmaterial-ui

Adjust the translateX value and element size based on either the parent element's size or the window's dimensions

Is this question specific enough to relate to others' problems? My issue involves two elements, a child and a parent, with the child element rotating around the parent using CSS animations. <div class="planet"> <div class="moon"></di ...

javascriptjqueryhtmlcss

GridView failing to properly rebind after a postback

I am facing an issue with my GridView and ObjectDataSource setup. My GridView is connected to an ObjectDataSource which retrieves data using LINQ IQueryable through the TypeName, SelectMethod, and SelectCountMethod properties of the ObjectDataSource contro ...

asp.netgridviewobjectdatasourcedata-binding

Is it possible to target elements without a specific attribute using a CSS selector?

My knowledge of CSS includes targeting elements based on attribute values, such as: input[type="text"] {} I am curious if it is possible to create a rule that targets elements that do not have a specific attribute. For instance, can I target elements wit ...

htmlcsscss-selectors

Having trouble with -moz-box-flex not flexing? It works perfectly with (Chrome/Webkit) browsers!

I have been searching for hours to figure out why Firefox is not flexing my page content in HTML/CSS. It's working fine in Chrome, and I've double-checked that each -webkit-box-flex has a corresponding -moz-box-flex. Can anyone point out what I m ...

csshtml5-canvas

Is there a way to divide text in one column and move it to another column on mobile and tablet devices?

Struggling with my bootstrap3 layout, I am attempting to shift content from one column to another on mobile and tablet screens. This adjustment is necessary so that the content appears under a specific heading or image in the adjacent column for optimal mo ...

htmlcssresponsive-designtwitter-bootstrap-3media-queries

Browser disregards backslashes in the content of pseudo elements

I have been struggling with a simple issue for quite some time now, and I seem to be out of ideas. The problem lies in the styling of a CSS pseudo-element before, which is defined as follows: #fPhone::before{ color: #78be20; content: "\e622" ...

htmlcsspseudo-element

What methods can we employ to engage with embedded HTML pages utilizing Selenium WebDriver?

Struggling to access elements within an embedded html page on a parent html file Hello, The website I am trying to automate includes an embedded html page within the main page. I have been facing difficulty interacting with the elements within the embed ...

htmlselenium-webdrivershadow-dom

Tips for converting an Elementor section into a clickable button

Link: I have a section on my website that I want to turn into clickable buttons. Using WordPress with the Elementor plugin, I have already added some custom CSS to make it appear clickable, but now I need to add the actual functionality. I know that JavaS ...

javascriptcsswordpresselementor

Place a form within a div element that is nested inside another div

I've been experimenting with different iterations of this code but haven't had any success. My goal is to display a div containing a form within another div. $(document).ready(function() { $("#buttoncontact").click(function(){ $("# ...

javascriptjqueryhtml