Enhancing the KeyValuePair by incorporating additional value or parameter

I currently have a

List<KeyValue<string, int>>
that I utilize in the View of one of my applications. While it functions as intended, I am interested in expanding it by potentially incorporating an additional parameter/value to the KeyValue pair.

Each pair corresponds to a specific color, which I would like to pass to the inline CSS color property. My goal is to achieve something like the following:

 @foreach (var item in Model)
 {
     var result = MyClass.GetOrder(item);
     <h2>@item.Date.Substring(0,4)</h2>
     <p style="color:@result[0].Value3">@result[0].Key , @result[0].Value</p>
     <p style="color:@result[1].Value3">@result[1].Key , @result[1].Value</p>
     <p style="color:@result[2].Value3">@result[2].Key , @result[2].Value</p>
     <p style="color:@result[3].Value3">@result[3].Key , @result[3].Value</p>                   
 }

Method Details

public static List<KeyValuePair<string, int>> GetOrder(MyClass myclass)
{
    var NameVal = new List<KeyValuePair<string, int>>()
    {
        new KeyValuePair<string, int>(myclass.Name1, Convert.ToInt32(myclass.Val1)),
        new KeyValuePair<string, int>(myclass.Name2, Convert.ToInt32(myclass.Val2)),
        new KeyValuePair<string, int>(myclass.Name3, Convert.ToInt32(myclass.Val3)),
        new KeyValuePair<string, int>(myclass.Name4, Convert.ToInt32(myclass.Val4))
    };
    var result = NameVal.OrderByDescending(key => key.Value);
    return result.ToList();
}

Answer №1

To organize the values you desire, create a data structure to encapsulate them and then designate it as the type for the "Value" component of the KeyValuePair.

public class Information
{
    public int NumberValue;
    public string TextValue;
    public bool BooleanValue;
}

This is how you can integrate it:

var collection = new List<KeyValue<string, Information>>();

If there isn't a specific requirement to access the pairs by an integer index, using a Dictionary would be more efficient.

var dictionary = new Dictionary<string, Information>();

Answer №2

One effective approach is to utilize a struct or class and then pass an IEnumerable of that struct/class into your view. It's worth mentioning that a List<KeyValuePair> essentially functions as a dictionary.

Update: While functionally different, a dictionary is undeniably more suitable for achieving the OP's goals.

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

How can you eliminate a line from the HTML input mask in Gravity Forms?

With Gravity Forms, I am utilizing the "input masks" feature to prompt users to enter data in a specific format. However, it seems to be creating an unwanted line within the input field itself as shown in the image below: https://i.stack.imgur.com/8gQ3K.j ...

Http post request failing to execute

I'm having an issue with an ActionResult that has the HttpPost attribute. It seems like I need this attribute when the user selects a date from a DateTimePicker. In my scenario, I have 2 DateTimepickers of type @html.EditorFor. These pickers correspon ...

Python script unable to locate div popup using Selenium

Recently, I've been working on enhancing my selenium skills, but I'm facing a challenge in finding a solution to this particular issue. While experimenting with the functionality of the page located at: www.omegle.com When using selenium to cli ...

The rules for prioritizing CSS selectors

Struggling with CSS selector rules and specificity? I've already checked this for specifics. Even tried using firebug and inspecting elements in Chrome to copy the CSS path, but still can't get it to work. This is my first time creating a website ...

The concept of Border-Merging within Material Design Tables

Is there a way to implement the following border style in a Material Design Table: border-collapse: collapse; I tried adding a border to .mat-cell: .mat-cell { border: 1px solid; } However, in some instances, the border appears to be 2px. The reas ...

Ensuring form labels are properly aligned with input-group-prepend in Bootstrap

Currently, I am developing a python/django website using bootstrap, and I have encountered an issue that I cannot resolve independently. It has been quite some time since I last worked with python/django/bootstrap, so I may be overlooking something? <fo ...

Compiling Nextjs with Tailwind typically takes anywhere from 8 to 16 seconds

My first time using tailwind has resulted in slow compilation times when used with nextjs in development mode. The slowdown can be confirmed by simply removing the following code: @tailwind base; @tailwind components; @tailwind utilities; This significan ...

What is the best way to make the buttons on my website shift downwards?

I'm currently working on making my website mobile-friendly. I've managed to stack the buttons on top of each other when the width reaches 700, but now I'm struggling to make them move down the screen. Some resources suggest using absolute po ...

"Effortlessly transform a JSON string into a JSON Object with JavaScript - here's how

When I serialize my object using the ASP.net JavaScriptSerializer class and return it to the client side, how can I deserialize the string in JavaScript? ...

Overlap of images on a responsive CSS page

I'm venturing into the world of responsive design for the first time, but I seem to be facing some challenges. In the initial screenshot, you can see that the tower image is overlapping a div and I can't figure out where I went wrong. Check out t ...

Trouble with image size transition not functioning properly

When attempting to enlarge an image with a transition in Chrome, it doesn't seem to be working properly. Here is the HTML code: <img src="foobar.png"> And the CSS code: img { float: left; margin-right ...

Fullscreen images stop from getting stretched

I am facing an issue with making images full-screen without them stretching on larger screen sizes. Is there a technique to keep the image size consistent regardless of the screen dimensions? I am aware of how background images can be made fullscreen usi ...

Generate a list item that is contenteditable and includes a button for deletion placed beside it

I am attempting to create a ul, where each li is set as contenteditable and has a delete button positioned to the left of that li. My initial attempt looked like this: <ul id='list'> <li type='disc' id='li1' cl ...

A straightforward method for injecting a JSON string into a JSON field in PostgreSQL utilizing the npgsql driver

I am having issues inserting a JSON string into a JSON field in PostgreSQL using npgsql in C#. The problem I am encountering is an error message stating: column "column1" is of type json but expression is of type text Prior to attempting the insertio ...

The scroll function is executed only one time

I'm currently working on implementing a sticky sidebar snippet using jQuery. However, I am facing an issue where the function within .scroll() is only executing once instead of on every scroll event. Can anyone help me identify what I might be doing i ...

Understanding the integration of sass with webpack in an Angular 4 project

Is it possible to reference a sass file instead of a css file directly in the index.html? If so, how does webpack compile the sass into a css file? Additionally, what is the most effective way to bundle the sass file when building the application? The ve ...

Steps to incorporate padding to a nested Angular Component by leveraging the CSS of its parent component

It is evident from the example at https://material.angular.io/components/expansion/examples that material components can be customized using the CSS of the component embedding them: .example-headers-align .mat-form-field + .mat-form-field { margin-left: ...

Tips for personalizing the react-select module

I'm struggling with customizing the appearance of the react-select component. The official documentation lists all the style attributes that can be modified, but I'm having trouble removing the blue borders around the text and container. https:/ ...

How to Guarantee NSwag & Extension Code is Positioned at the Beginning of the File

In my project, I am using an ASP.Net Core 3.1 backend and a Typescript 3.8 front end. I have been trying to configure NSwag to include authorization headers by following the guidelines provided in this documentation: https://github.com/RicoSuter/NSwag/wik ...

Looking to include a badge within the nebular menu

Can someone assist me with adding a badge to the Nebular menu to display the inbox count dynamically? Any help would be greatly appreciated. Thanks! import { NbMenuItem } from '@nebular/theme'; export const MENU_ITEMS: NbMenuItem[] = [ { ti ...