Blade - Assign a random CSS class from an array

I have been searching high and low for a solution to this issue, but so far, no luck. If it has already been addressed elsewhere, I apologize.

Here is the code snippet I am currently working with:

    @{
      foreach (var item in Model.Activities)
      {
          <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12 over-f-hidden">
              <div class="block-main">
                  <div class="block-inner green">
                      <br />
                      <h5>@item.ActivityName</h5>
                      <h4><span><a href="@Url.Action("ScanRequest","Home",new { id = item.id })" style="text-decoration: none">SELECT THIS ACTIVITY</a></span></h4>
                      <br />
                  </div>
              </div>
          </div>
      }
  }

Furthermore, I have three CSS classes named:

.red
.green
.yellow

Within my code, for the class "block-inner green", I want to replace "green" with a randomly selected class from my pool of three classes. It's okay if there is repetition.

Elsewhere in the View's body, I have added the following:

    @{ 
        string[] color = { "red", "yellow", "green" };
    }

However, I am unsure of how to utilize a random element from that array as a class for the div using Razor.

Is there a way to achieve this exclusively within the View?

Thank you in advance for any guidance you can offer.

Answer №1


@{
   string[] colors = { "blue", "purple", "orange" };
   Random RNG = new Random();
}
@foreach (var element in Model.Elements)
{
   <div class="container @(colors[RNG.Next(0,2)])">...</div>
}

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

HTML various button designs - such as a cogwheel

I need a button on my Angular/Electron project that resembles a gear icon. I came across these resources: here and here. However, when I tried to implement them, they didn't work as expected. Currently, the button looks like this: <button class= ...

What is the best way to apply the addClass method to a list element

I've been searching for a solution to this issue for some time now, and while I believed my code was correct, it doesn't appear to be functioning as expected. HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js ...

Tips for efficiently removing a user as an administrator

Whenever a user logs in or registers, I save their session and cookie information and also add certain details to the database. Login/Register Module (login/register.php) $_SESSION['userid'] = $userid; $selector = base64_encode(random_bytes(9)) ...

What methods can I employ to handle nested transactions with TransactionScope() in ASP.net?

I encountered an issue where I created a transaction within a main transaction scope using new TransactionScope(TransactionScopeOption.RequiresNew) When the inner transaction is successfully committed, but encounters an error during execution, the compl ...

What's the best way to create a responsive design for two buttons?

I am utilizing Bootstrap to create two buttons on my webpage that will stack vertically instead of horizontally when the screen width decreases. I attempted to achieve this using the following code: index.php: <div class="container-fluid"> ...

Text alignment post-rotation

Whenever I rotate a span, the text inside does not align horizontally. As shown in the example below, we are facing alignment issues with three rotated spans. body{ padding-left:10px; } .bordered{ border-left: 2px solid gray; position: relative ...

The HTML code does not seem to be acknowledging the CakePHP link

When using Cakephp to generate a link with Html->link, the code looks like this: echo $this->Html->link('Download',array( 'plugin'=> 'galleries', 'controller'=> 'galleries', 'a ...

What steps are involved in extracting a Flot animation?

Check out this cool animation of a diatomic chain in action on this website: http://lampx.tugraz.at/~hadley/ss1/phonons/1d/1d2m.php I'm interested in extracting it, specifically to create a gif. The HTML script for the animation is visible: var c= ...

Having difficulty incorporating a video into the background

After searching online and attempting two different methods, I am still unable to achieve the desired result. I want a video to cover the entire background of my webpage. Here is what I have tried: CSS - video#bgvid { position: fixed; top: 50%; ...

Is there a way to insert a space in a single iteration of an SQL query in PHP without impacting the others?

Is there a way to add a space between two words for certain iterations of an SQL query without affecting all uses? I attempted using CSS margins, but it didn't have the desired effect. Here is a snippet of the code I am currently working on: <div ...

Constant navigation bar placement

On my website, I have a fixed navigation bar at the top that I want to be transparent. However, when I apply transparency to the navigation bar, the content inside it also becomes transparent. To fix this issue, I added a relative position to the content w ...

Combining two strings to form a single variable using PHP

Currently, I have a registration form set up for users to register successfully into my database. However, I am looking to enhance this functionality by restricting registration to only users with specific domain addresses. After some research, I found tha ...

Instructions for including user ID in the URL after successfully logging in with their information

Hello everyone, I have a question and I would appreciate some help. I am attempting to ensure that when a user logs in with their credentials, their ID is passed and visible in the URL bar like this: ?id=000. I have been trying various ways but have not b ...

I am encountering a problem with IE11 where I am unable to enter any text into my

When using Firefox, I can input text in the fields without any issues in the following code. However, this is not the case when using IE11. <li class="gridster-form" aria-labeledby="Gridster Layout Form" alt="Tile Display Input column Input Row ...

How can I get rid of the table borders and set colors for every other row in the

How can I remove the border lines from a table and assign colors to alternate rows in the table? Follow this link for the code: https://stackblitz.com/angular/kooxxyvddeqb?file=app%2Ftable-sticky-columns-example.css Thank you in advance ...

Deactivating controls while displaying the loading bar in AngularJS

I'm currently working on a web application using AngularJS. I want to incorporate a loading bar to signify long data load times from the server. To replicate heavy data loads, I am utilizing $timeout to trigger the loadbar when the operation begins a ...

Rotating through elements in timed intervals

After exploring various examples of how to show/hide divs with a JavaScript timeout, I am still unable to resolve my specific issue. I currently have six divs that I want to cycle through sequentially every 10 seconds, starting with div #one. Although my ...

Email Template not rendering properly across various platforms

Dealing with a frustrating issue here. I created a template using Foundation's E-mail features and it looks perfect in Chrome's Device mode as well as in MailChimp. However, when testing it in Litmus and sending it to my own email, things start t ...

issue with fetching response from ajax post call in slim framework 3

Update: The issue has been resolved. The correct localhost address for the ajax request should have been 127.0.0.1 instead of 121.0.0.1 On my client side, I am using the following code to send a POST request to localhost/login. <html> <title> ...

Is there a way to modify the background shade of an HTML meter element?

Can the background color of an HTML meter be customized? I noticed that by default, it has a green background. Is there a way to change this green background to a different color? I attempted using the style attribute with a red background color, but it ...