Adding a CSS style to specific sections of a string that is quoted in a Razor ASP.NET file

Is it possible to format a specific part of a string? I'm trying to only stylize the word within quotation marks.

This is my cshtml code:

        {
            <div class="h-44 overflow-auto text-left mx-4 mb-4">
                <p id="countError" class=" main-text-color mb-2 w-[70%] font-semibold">@Model.ToString().Replace("|", " ")</p>
                <p class="main-text-color">The following errors occurred:</p>



                @foreach (var error in Model.Errors)
                {
                    var errors = error.Split(Environment.NewLine);
                    bool firstLine = true;

                    foreach (var item in errors)
                    {
                        
                        if (firstLine)
                        {
                            <p class="leading-8 text-red-500 font-spec-bold">
                              @Html.Raw(item)
                            </p>
                            firstLine = false;
                        }
                        else
                        {
                            <p id="teste" class=" leading-8 main-text-color ">
                                @Html.Raw(item);
                            </p>
                        }

                    }
                }
            </div>
        }

Here's an example of what I'm looking for:

The original string is like this:

I want to emphasize this "WORD" with bold styling.

I'd like it to look like this:

I want to emphasize this "WORD" with bold styling.

Thank you!

I couldn't find a similar example here, but any guidance would be greatly appreciated.

Answer №1

It is important to enclose the word in {} tags, like this: I want to display {WORD} in italics.

You can then replace { with <i>, and } with </i>:

@Html.Raw(item.Replace("{", "<i>").Replace("}", "</i>"))

output:

https://i.stack.imgur.com/9Lcec.png

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

fixed divs that remain in place while scrolling

In the past, I have implemented a method similar to this: However, I am not a fan of the "flicker" effect that occurs when the page is scrolled and the div needs to move along with it. Recently, I have come across websites where certain elements (such as ...

I'm looking to display images in a designated React component using create react app. What is the best way to accomplish

Currently in the process of revamping an older website using react. Making progress, but encountering an issue with a new component where images are not displaying. Strangely, the images appear in the main class but not within the component class. Even whe ...

Transferring a DataColumn from tableA to tableB using Asp.net and C#

Trying to transfer DataColumn from tableA to table B: I believe it should look like this: TableA is predefined. DataColumn[] dataColumns = new DataColumn[TableA.Columns.Count]; TableA.Columns.CopyTo(dataColumns, 0); DataTable TableB = new DataTable( ...

The exterior DIV does not conform to shrinking dimensions

I've set the display property to inline-block, but the htmlDiv div in this code snippet is not behaving as expected. It's acting as though the inner divs are next to each other even when they're not. How can I fix this? If it's unclear ...

Creating a Rectangular Frame Encasing Text Using GraphicsPath

Currently, I am utilizing the GraphicPath.AddString technique to append a string to the graphic path and then using Graphics.DrawPath to display the text. My goal is to determine the width and height of the drawn text so that I can outline it with a rectan ...

If the font size exceeds a certain value in SCSS, then apply a different value

Can SCSS handle this scenario? I am looking to set the font size to 22px in case it is greater than 30px, especially within a media query for a max width of 480px. ...

Background image loading gets delayed causing it to flicker

Instead of having separate files for different elements on my site, I decided to keep all the JavaScript in one large file called my_scripts.js. To speed up loading times, I defer the loading of this file using inline JavaScript and make sure it is the las ...

Pop-up window for uploading files

Looking for assistance with my file uploading system. I am utilizing a unique purple button from http://tympanus.net/Development/CreativeButtons/ (Scroll down to find the purple buttons). Additionally, I am using a wide, short content popup feature availa ...

How can I enforce strict JSON rules to prevent the Newtonsoft JSON deserializer from accepting strings with new lines?

Is there a way to ensure that Json.Net strictly enforces JSON rules when deserializing a string value with new lines, which goes against the JSON specification? Our server-side code uses Newtonsoft to parse JSON data, but we've encountered issues whe ...

How to design 'Sliding gallery panels' using jQuery and CSS3?

Usually, I know how to start a project with tutorials or some experience, but this time I'm stuck on what to even call it. Simply defining the concept could help me search for the right resources. Here's a quick mockup I put together: I want to ...

The attempt to make an HTTP request to the Logic app results in an error message stating that "Property selection is not enabled for values of the type 'String'"

I have a simple logic app set up to perform a task, with an HTTP trigger that expects a JSON object. To call this logic app trigger from C#, I use the following code: var postData = new QERestartModel { AppName = appname, ...

I'm looking to make some adjustments to my export button (btnExport) in C# - what changes can I

This is the code I wrote for a basic program that exports data from a Datatable to a CSV file. The program functions as a website used to manage a database and convert it into a .csv file with the click of an export button. using System; using System.Coll ...

one container stacked on top of another

I have been creating web pages using tables for a long time. Recently, I decided to make the switch to using divs like everyone else, but it has been quite challenging. Can anyone help me solve this issue? I have included an image to better illustrate the ...

Discovering modifications to CSS using selenium

Currently, I am working on an ajax form where CSS elements are dynamically changed. I am curious to know if it is feasible to verify these changes using Selenium. For example, checking if the background color changes from #ffffff to #000000 after clicking ...

Determining if a Website is Responsive with PHP

One way to determine if a website is responsive or not is by analyzing its HTML code. A previous inquiry on this topic can be found here: . This method only focuses on checking for the <meta name="viewport" content="width=device-width"> tag. It&apos ...

Struggling to align form inputs next to each other

I have tried various methods such as adjusting padding and margins, using tables, displaying as inline and inline-block, and separating parts of the code into different divs. However, I am still unable to get my inputs to be displayed side by side. Here is ...

Is there a bug with text rotation in CSS 3?

I'm having trouble understanding how text rotation works in CSS3. For example, when I try to rotate text like you can see here, the rotated text never seems to be in the correct location, despite setting properties like: right: 0; bottom: 0; There ...

Unlock the power of Bootstrap CDN with these easy steps!

I am currently trying to incorporate a CDN for Bootstrap in order to enhance the performance of my website. Surprisingly, directly referencing the CSS works perfectly fine but using the CDN does not. Could someone provide me with guidance on how to resolv ...

Having trouble getting the jQuery click event to work on iPhone browsers? Despite already trying the cursor:pointer; method

I am facing an issue with setting a click event on anchor tags in my WordPress site. Surprisingly, the event works perfectly fine on all of my devices including PC, Android phone, and tablet except for my iPhone. Despite trying to set the 'Cursor&apo ...

Tips for resetting the form input fields in Vue.js after the user has successfully submitted the form

I am facing an issue with my registration page. After the user enters some values and successfully submits the form, I want to clear all the fields. To achieve this, I am using a predefined function called reset() inside the script section. However, the ...