Generate star icons dynamically within a div using C# and MSSQL data to determine the number of stars

Upon retrieving a rating (which can be more than 5) from the database, I aim to dynamically generate glyphicon stars based on the received value when the page loads. The code snippet below demonstrates how the value is retrieved:

int rating_count = DBinteract.get_rating_count(ticket_id);

Although I attempted to iterate through and append the glyphicons to a div based on the retrieved value, only one star appears upon initial page load.

for (int i = 0; i < rating_count; i++)
{
    this.rating_count.InnerHtml="<span class='glyphicon glyphicon-star'></span>";
}

Here's the div where I intend to display the stars:

<td>
    <div id="rating_count" runat="server"></div>
</td>

Answer №1

To display multiple span elements in your generated html, you must concatenate the string 'one' several times instead of repeatedly assigning the same string to .InnerHtml. It's important to initialize .innerHtml with an empty string first:

this.rating_count.InnerHtml = "";

for (int i = 0; i < rating_count; i++)
{
    this.rating_count.InnerHtml += "<span class='glyphicon glyphicon-star'></span>";
    //               look here: ^^
}

If you have access to Javascript support, consider utilizing the String.repeat() method for this task:

int rating_count = DBinteract.get_rating_count(ticket_id);
this.rating_count.InnerHtml = "<span class='glyphicon glyphicon-star'></span>".repeat(rating_count);

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

Using jQuery or Javascript to implement a drop-down list filter functionality

For the past two months, I've been struggling to figure out how to create a drop-down menu to filter content on the site I'm building for my boss. Despite countless searches online, I haven't found a solution that works. This is the only iss ...

Implementing Vue's dynamic component addition feature

I recently came across an interesting article on dynamically adding different components in Vue. The article explains a good method for binding different components to tabs, but I have a specific requirement. I want to bind one type/name component that wil ...

Tips for updating the firebase access_token with the help of the next-auth credentials provider

Can anyone help me with refreshing the Firebase access token when it expires? I need the token for API authentication, but I can't find any information online regarding next-auth and Firebase. Currently, I am able to retrieve the access token but str ...

Getting a vnode from a DOM element in Vue 3.0: A Step-by-Step Guide

My question pertains to obtaining a vnode through accessing the DOM using document.getElementById(id). How can I accomplish this? ...

Performing a JavaScript AJAX request to send a complex object containing an array of other complex objects within it

My issue arises from encountering an empty array of objects at the backend. To illustrate, I have established two classes at the backend... public class ScoreModel { public string Subject { get; set; } public float Score { get; set; } ...

Ways to handle errors when using navigator.clipboard.writeText

document.queryCommandSupported('copy') may not be available on all browsers. I experimented with the code below, which successfully copies the link on Firefox but fails on Opera. It displays an alert indicating that the code has been copied, yet ...

The DataFormatingString in Gridview is malfunctioning for certain columns

My grid has four columns with a "Data Formatting" attribute. Two of the columns display results based on the specified formatting, while the other two columns do not follow the formatting rule. The "Data Formatting" attribute is set to display values with ...

Experiencing difficulties loading webpages while attempting to execute Routes sample code using NodeJS

As a beginner in Javascript, I am attempting to execute the example code provided in the documentation for routes. The code snippet is as follows: var Router = require('routes'); var router = new Router(); router.addRoute('/admin/*?&apos ...

How to properly declare an explicit injector when using the resolve parameter in $routeProvider?

$routeProvider resolve feature in AngularJS allows for injecting additional dependencies to the controller function. How can we combine this with explicit dependency injection declaration? Example: angular.module('myModule', []) .config(func ...

What are the steps to change this specific section in the web.config file?

Here is the configuration for my email: <system.net> <mailSettings> <smtp from="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51373e3e113330237f323e">[email protected]</a>" deliveryMetho ...

Arrange the columns in the Table in both ascending and descending order

While working on my React and MUI Table project, I encountered an issue with implementing sorting functionality for each column in both ascending and descending order. Whenever I click on the header to sort a column, an error message saying "Data is not it ...

Tips for overlaying an image on a div regardless of its height

(!) Although this question may seem repetitive, I have not been able to find a suitable solution in any of the previous 10 topics. I apologize for the inconvenience and am actively seeking a resolution to this unique situation; Allow me to outline the iss ...

Updating Vue component with mismatched props

I am looking to optimize the Vue component where data is received in varying structures. Take for example Appointment.vue component: <template> <div> <div v-if="config.data.user.user_id"> {{ config.data.user.user_id ...

The color of the three js cube is charcoal, definitely not a fiery red

Just dipping my toes into the world of three.js...my cube is displaying in black even though I set the color to red. Any ideas why? <!DOCTYPE html> <html> <head> <title>Experimenting with shapes</title> & ...

Issue with function execution in MVC after invoking from jstree

My jquery code is supposed to trigger the MVC function call: $(document).ready(function () { alert("ddddd"); $("#divJsTreeDemo").jstree({ "plugins": ["json_data"], "json_data": { "ajax": { "type": "POST", "url": "/W ...

Changing the Value of an Input Element Dynamically in React: A Step-by-Step Guide

In a scenario where I have a component that takes an element, such as <input />, and I need to update its value programmatically after 15 seconds. Initially, I had the following approach in mind: const MyComponent = (myInput: JSX.Element) => { ...

Personalized animated Reactflow Connection Lines

My goal is to develop a personalized animated connection lines in reactflow, rather than using the default dashed line that appears when the animated: true prop is applied. I am aware that we can customize the styling by using the following code snippet: ...

I'm having trouble getting the function inside onLoad to run in my Next.js project - can anyone help

While I was exploring nextjs.org and following the tutorial, I encountered an issue where the function inside onLoad wasn't executing. It's puzzling because there was no call made to that link in the networks tab of my browser's developer to ...

Progressively updating elements one by one leads to updates

I am currently working on a webpage where one element ('.item--itemprice') updates its text through a function that I don't want to modify. My goal is to have another element ('.header--itemprice') update its text to match the firs ...

Scrolling to the active list item in the navigation bar

Having an unordered list with the id mainul in the navigation bar is causing a problem when the page reloads. The navigation bar always starts at the beginning, but I would like it to automatically scroll to the active li element. This is my HTML code: & ...