Ways to format a C# string outcome showcased in HTML (ASP.NET)

I'm facing an issue with formatting the output (string) retrieved from a C# database connected to ASP.NET. I want to style the row["Grens"] differently from row["Sanctie"], for instance.

The result is displayed in a basic div:

<div id="resultaat" runat="server"></div>

Here's what I attempted to do, but it didn't work: 

public string ShowBoundariesByKeyword(string keyword)
    {
        string resultList ="";

        foreach (DataTable table in _persistcode.SearchBoundariesByKeyword("%" + keyword + "%").Tables)
        {
            foreach (DataRow row in table.Rows)
            {
                resultList += "<span class='t1'>" + row["Grens"].ToString() + ": "+"</span>" + "<span class='t2'>"+row["Sanctie"].ToString() + "<br>" + "This belongs in category: " + row["IDCategories"].ToString() + "</span>";
            }
        }

        return resultList;
    }

Currently, my CSS code looks like this:

  .t1{
      font-size: 30px;
      color:white;
  }

  .t2{
      font-size: 18px; 
      color:white;
  }
c#htmlcssasp.net

Answer №1

Here are some helpful suggestions:

1. Utilize the Browser's inspect element or View Source feature to identify the name of your span at runtime, then modify your class from t2 to match that name.

2. Use the Browser's inspect element or View Source function to determine the name of the parent div, and adjust your t2 class to something like: #div_resultaat_01 .span .t2

3. Employ Attribute Selectors to change your t2 class to span[class*="t2"], which will target any span with a class name containing t2.

4. Try using the nth child selector to style even or odd spans. For instance, you could update your css as follows:

.resultaat span:nth-child(odd){
             font-size: 30px;
             color:white;
        }
.resultaat span:nth-child(even){
             font-size: 18px; 
             color:white;
        }

Test out these methods and see which one best fits your needs. In my experience, I typically opt for solution 1.

Answer №2

In the case that your css appears to be correct but is not taking effect, one potential solution is to include the !important declaration in your css properties (e.g. font-weight: bold !important;)

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

The list style of Bootstrap Select Drop Down isn't vertical

Has anyone encountered an issue with bootstrap-select where the options in a drop down box are not vertically listed? <script src="{% static 'risk_parity/js/jquery-3.2.1.min.js' %}"></script> <script src="{% static 'r ...

csstwitter-bootstrapbootstrap-selectpicker

The background image positioned in the center may experience cropping in HTML

I am currently facing an issue with aligning a background image horizontally in a specific scenario: The background image is large and needs to be centered horizontally The page has a minimum width requirement of 960px which may result in a scrollbar on ...

htmlcss

The stacking order of React components

I am having an issue with the Z-index in my component-based React app. I currently have a list component that contains items, and I want to adjust the CSS scale and z-index to display one item in front of the others. The problem arises when the hovered it ...

cssreactjsreact-nativez-index

Utilize CSS to incorporate an image as the background of a <div> element

I'm a beginner in the world of HTML/CSS and this is my practice page. I have a section with an image of a person, and I'd like to add a quote next to the image. However, I'm struggling to make the image fill the entire width and height of th ...

htmlcssimage

What is the best way to open a link contained within a div by clicking on it

I am currently in the process of developing a website that is able to parse a Spanish dictionary. When looking up the word HOLA, the site provides the definition. However, for other words like CASA, users receive suggestions with links such as My goal is ...

phphtmlparsingphp-parser

Arranging blocks within blocks? Placing additional text underneath a block

Looking to append some text at the end of a block called .label. Inside this block, there is a sub-element called .label_title, and below that is a picture/link enclosed in another block. Under the picture/link, I wish to include a short description while ...

cssblock

Is there a way to navigate to a Webforms.aspx page from an MVC controller?

I've come across numerous forums, but have yet to find one that meets my needs. I prefer simplicity and functionality in my forum experience. ...

asp.netasp.net-mvcwebforms

Grouping results by month according to the datetime object in C#

I am working on an ASP.NET MVC application that includes a line chart displaying record counts and months on the X-axis and Y-axis respectively. To achieve this, I need to make an ajax call to the controller where the model holds information such as the r ...

javascriptc#ajaxasp.net-mvc

Prevent direct access to images via URL in ASP.Net from a specific directory

I am in the process of developing a website using ASP.Net (4.0). The website includes Jpeg images stored in a designated folder. My goal is to prevent users from accessing the images directly through URL links (for example: "http://www.example.com/images/l ...

asp.net

Is it possible to create and illustrate an image using C#?

Is there a way in C# to draw lines on an empty image without loading anything else? I need to create something simple for an interface, but all the examples I've seen online involve pre-existing images. Can someone provide guidance or an example of ho ...

c#.netwinformsimage

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

Dynamic script appending encounters unforeseen challenges

After attempting to add a script either on click or after a time delay, I am encountering an issue where the script is not being appended. Strangely, if I remove the setTimeout function, the script gets added successfully. The same problem persists with ...

javascriptjqueryhtml

Edit the alternative text for an image tag to suit your needs

Is there a way to move the displayed mini popup to the left of the mouse cursor when a user hovers over an image with the following code: <img src="image" alt="product code 000000"> I noticed that the default alt text always appears on the right of ...

htmlcssjqueryimage

What's the best way to enable touch scrolling for items within a div container?

I am in the process of creating a code snippet that will allow users to scroll through items within a div, similar to a spinning wheel or slot machine. While I am aware of an existing solution for iPhone and iPod, I want to develop a simpler, more streamli ...

javascriptjqueryhtmlcss

Tips for using JavaScript to style an array items individually

I have currently placed the entire array within a single div, but I would like to be able to display each element of the array separately so that I can style "date", "title", and "text" individually. This is my JSON structure: [ { "date": "Example ...

javascripthtmlcssjsonfetch-api

The scrollHeight property for a textarea element that is set as

Currently, I am working on enhancing a form results page by implementing a readonly textarea to showcase the submitted email address. My main goal is to allow the textarea to dynamically adjust its height in order to display the full email instead of trunc ...

jqueryhtml

Implementing translation text into a PHP database

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Translate and Save Text</title> </head> <body> <form action="" method="post" name="theform"> <table width="693" border="1" style="table-l ...

javascriptphphtmlmysqlgoogle-translate

Adjust SVG color transition height based on CSS class characteristics

Utilizing a combination of SVG and CSS code, I am attempting to animate the fill level of an SVG shape. .st0 { fill: none; stroke: #000000; stroke-width: 4; stroke-miterlimit: 5; } .st1 { fill: none; stroke: #000000; stroke-width: 3; st ...

javascripthtmlcsssvg

Validating Date Input in HTML and JavaScript Text Fields

When designing my form, I wanted to ensure that users could only input digits and hyphens in a text field where they enter a date. However, I encountered some difficulty implementing this feature. Currently, the field only accepts digits and removes any le ...

javascripthtml

Activating a Dynamic TextBox when the Dynamic checkbox is selected

Can someone help me with the code to dynamically add Checkbox1 and Textbox1 controls, where Textbox1 should be disabled by default and only be enabled if Checkbox1 is checked? Thank you in advance. Praveen ...

c#asp.net