List of bullet points styled with hyperlinks in ASP.NET:

<asp:BulletedList ID="BulletedList1" runat="server" DisplayMode="HyperLink" style="list-style :none" >

Is there a way to dynamically add list items to the bulleted list above and inject individual styling to the href attribute of each item?

Answer №1

One way to apply CSS classes is by using the css-class attribute:

By declaration:

<style>   
    class1 {  text-decoration:none; font-weight:bold; color:#e00000; }
    ... 
</style>

<asp:BulletedList ID="BulletedList1" DisplayMode="HyperLink" runat="server">
  <asp:ListItem class="class1">a</asp:ListItem>
  <asp:ListItem class="class2">b</asp:ListItem>
</asp:BulletedList>

Another option is to do it programmatically:

protected void Page_Load(object sender, EventArgs e)
{
   ListItem listItem = new ListItem("c");
   listItem.Attributes.Add("class", "class1");
   BulletedList1.Items.Add(listItem);
}

Answer №2

When dynamically adding a list item to a BulletList, you have the option to style it by following these methods:

listItem1.Attributes.Add("Class", "NameOfTheClass"); 

OR

listItem1.Attributes.Add("style", "YourInlineCss"); 

Answer №3

Give this a shot:

CSS File:

.href a:link a:visited
{
    color: Red;
}

.href a:hover
{
    color: Yellow;
    text-decoration: none;
}

.href a:active
{
    color: Green;
} 

ASPX Code:

<asp:BulletedList ID="BulletedList1" runat="server" 
        DataSourceID="SqlDataSource1" DataTextField="nome" DataValueField="id" 
        DisplayMode="HyperLink" CssClass="href">
    </asp:BulletedList>

Interactive Version:

for (int i = 0; i < BulletedList1.Items.Count; i++)
{
        if (i % 2 == 0)
        {
            BulletedList1.Items[i].Attributes.CssStyle.Value = "href";
        }
        else
        {
            BulletedList1.Items[i].Attributes.CssStyle.Value = "other";
        }
}

Answer №4

To resolve this issue, I implemented a jQuery selector event to target specific elements in the HTML structure.

$("<%=DropDownList1.ClientID%> option").each(function() { 
    $(this).addClass('Highlighted')
});

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

Send the user back to the initial action following successful login

In my current process, I have outlined the sequence of steps that I am attempting to complete: Scenario: A user has the ability to add products to their personal account. The user attempts to add a specific product (without being logged in at this point ...

Having trouble navigating through the webpage with Selenium using nUnit framework and C# programming language

Encountering an error when attempting to click on a button located at the bottom of the page. The issue seems to be that the button is not initially visible, requiring us to scroll down for Selenium to identify it. OpenQA.Selenium.ElementClickInterceptedEx ...

Using SQL to perform an INSERT INTO operation with the SELECT statement and a string value

What is the best way to merge the following SQL statements? cNamesql = "SELECT ContactName FROM Contact WHERE Contact_ID = '0001'"; sql = "INSERT INTO PurchaseInfo (ContactName) VALUES ('Contact Name "+ cNamesql + "')'; For examp ...

Tips on using DateTime.TryParse to interpret dates in the "ddMMyyyy" structure?

Is there a more efficient way to parse dates that are in the "ddMMyyyy" format as well as standard GB English formats like "dd/mm/yyyy"? I've been attempting to utilize the DateTime.TryParse() method for this task, but it doesn't seem to recogniz ...

The navbar slide toggle is supposed to slide behind the navbar, but instead it slides in front of

Recently, I created an animated navbar that works perfectly fine. However, there is one issue that bothers me - when the list of menu items slides open, it appears in front of the navbar instead of behind it. If you'd like to see the problem in actio ...

Utilizing MVC 6: Incorporating Assembly Loading from a Network Source

I am currently working on a web application using ASP.NET 5 and MVC 6. One of the features I want to implement is the ability to schedule and manage tasks within the app. After some research, I decided to utilize the Windows Task Scheduler and came across ...

Is it possible to include a border/stroke on a Raphael picture?

Currently, I am attempting to enhance a Raphael image element by adding either a border, stroke, or drop shadow. My end goal is to create an animated glowing border effect. Previously, I successfully implemented this on traditional HTML elements using Java ...

Embed a video clip into an HTML webpage

I attempted to embed a video using HTML. I followed the player script instructions and added the necessary paths and scripts, but unfortunately, the video is not visible on the webpage. Instead, when clicking on the area where the video should be, it opens ...

Retrieve an identification number from the Request.QueryString

Hey there! I'm having trouble reading the id from Request.QueryString within an HTML tag in ASP.NET. The code I've been using is shown below: <video src='<%# "VideoHandler.ashx?id=" + Request.QueryString["id"] ' width="220" heig ...

Is the onselectedindexchanged event triggered only on the client side when selecting an item from a drop-down list?

I am working with an update panel : <asp:UpdatePanel ID="upAppartiene" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:DropDownList ID="ddAppartiene" runat="server" AutoPostBack="true" onselectedindexchanged="ddA ...

Switch Button JavaScript Library

My project involves creating a mobile website with a simple interaction where clicking on a div opens another div underneath it. The HTML structure consists of two stacked divs, with the CSS for the bottom div initially set to 'none'. Using JavaS ...

What is the best way to rearrange <OL> list according to screen size using Bootstrap 4?

I have a unique layout in my HTML code where items are displayed vertically on small devices. However, when the device size is medium, the items shift to a horizontal view using Bootstrap's 'col-md-6' class. 1 2 3 4 5 6 7 8 9 I am looking ...

Check the compatibility of HL7 using C# and nHapi for .NET

I need help validating an HL7 2.3 standard message using C# and the .NET version of the nHapi project: https://github.com/duaneedwards/nHapi After downloading the necessary dll's, NHapi.Base.dll and NHapi.Model.V23.dll, I added them to my project. ...

In CSS, full-sized divs can cause browser scrollbars to appear

I am facing an issue with my website that needs to be completely contained within the browser window without requiring users to scroll up and down to view different parts of the site. I am currently utilizing overflow:auto to handle long content that doesn ...

What is the best approach for identifying the anticipated table row when transforming JSON data into a datatable?

Is there a way to determine the expected datatable row without directly converting JSON data into a datatable? ...

I recently designed a form using a combination of HTML and JavaScript in order to display different dialogues depending on the number of selections made. Unfortunately, the alert function does not seem to be functioning

The concept is to have users select options and then receive employment sector suggestions based on their selections. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

What is the best way to create a sliding <nav> effect when a <div> is clicked?

Hello! I am looking for a solution that will cause the navigation contents to slide out from the left when the div class "bt-menu" is clicked. It should also slide back in to the left either when the div is clicked again or when anywhere outside of the nav ...

Passing HTML anchor text as an argument to an onclick function in C# code

I am currently working on passing a parameter to an onclick function. In my code, I have a foreach loop that is used for creating <li> elements related to the database. Each item comes from the database and I want to use it when handling delete butto ...

You can eliminate the display flex property from the MuiCollapse-wrapper

Having trouble removing the display flex property from the MuiCollapse-wrapper, I did some research and found the rule name for the wrapper in this link https://material-ui.com/api/collapse/ I have been unsuccessful in overwriting the class name wrapper t ...

The CSS form appears to be too large for the page

On every single one of my pages, the content fits perfectly within the body: However, when I have forms on the page, they extend beyond the footer and the body doesn't resize accordingly: Where could the issue be coming from? ...