Background Color in MVC

Megna Musapeta

9y16.1k

ICreated a Webgrid on MVC, I have around 22 Columns returned by the Webgrid, I am trying to generate Background color Red, Green, Yellow depending on the Condition.

1 --> Green

0 --> Red

-1 --> Yellow

I have a Query but it is not working as expected, I need to put each column number that way I need to create 22 conditions but i need something simple which says if its 1 then Green, 0 Red and -1 Yellow.

Please help, as i couldnt find the answer anywhere, I am trying for this for a while.

8 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mobeen Rashid9y ago
Hello Megna,
Please don't pass an "int" variable directly into "if" condition,
if(1) //this is invalid and its a compile time error//
{
    //do some thing
}
Passing directly "int" into "if" codintion is compile time error.
"if" condition only works with bool variable,instead of passing an "int" variable you should pass an expression that evaluates into a "bool".
if(value==1)
{
    //do something here
}
0
Megna Musapeta9y ago
Hello Mobeen, thanks for the Link its really helped me to understand but as i am really new to MVC, can you Please help me this is taking too much of time fo rme to understand :(
.bg-color-green {

background-color: green;

}

.bg-color-yellow {

background-color: yellow;

}

.bg-color-red {

background-color: red;

}

{ "red"} else if(-1)

{ "yellow"} else{"default color"}

)">
No wI am getting this Error "Cannot Implicitly Convert Type 'int' to 'bool' "

Thanks,
Megna.
0
Mobeen Rashid9y ago
Hello Megna,

you can learn about razor view engine here

https://www.codeproject.com/Articles/639695/Getting-Started-with-Razor-View-Engine-in-MVC
Its thoroughly explained here, let me know if you need further help.
0
Megna Musapeta9y ago
Thanks, Mobeen for your Reply but i am new to MVC, can you please elaborate on how to write the Razor view.

{ "red"} else if(condition==-1)

{ "yellow"} else{"default color"}

)">
what should i input inplace of *Condition*,
your help is really appreciated.

Thanks,
Megna.

0
Mobeen Rashid9y ago
First creat three css classes with color property red,green and yellow.
.bg-color-green{
background-color:green;
}
.bg-color-yellow{
background-color:yellow;
}
.bg-color-red{
background-color:red;
}
Now you can write a simple inline expression in your razor view to apply these colors based on your condition. To do so edit the class property of your div tag.

if(condition==1){
"green"
}else if(condition==2)
{
"red"
}else if(condition==3)
{
"yellow"
}else{
"default color"
}
)"
>

This is the beauty of razor engine that will smartly infer which part of code is of C# and which one is of html.
0
Megna Musapeta9y ago
Thanks Sundar for your Reply but I have around 22 Columns, If i write it this way i need to create 22 each function conditions, I need something which is simple to identify if its
1 then Green
0 then Red
-1 then Yellow.

$('#gridMapping > tbody > tr').each(function (index) {

if ($(this).children('td:nth-child(5)').text() == 1) {

$(this).children('td:nth-child(5)').css("background-color", "green");

}

else if ($(this).children('td:nth-child(5)').text() == 0) {

$(this).children('td:nth-child(5)').css("background-color", "red");

}

else {

$(this).children('td:nth-child(5)').css("background-color", "Yellow");

}

});

0
Manikandan Murugesan9y ago
To change background color of the html page , you just need to set background-color property of style of body element

css will be

body
{
background-color : black ;
}
First, I don't think you can use that particular CSS selector (I think it translates to select element with ID="body" and also ID="Login" (or "Geldi"), but CSS is not my strength). If you are setting it for the body tag of the page, get rid of the #body and just use body since you can select by HTML element name. So instead: body#Login and body#Geldi

After that, it would probably be best to use ViewData, and set it in your subview (Login view or something), which will then make it available to your Master View

For instance:

_Layout.cshtml

id='@(ViewData["PageId"] ?? "")'> @RenderBody()

Login.cshtml

@{ Layout = "~/Views/Shared/_Layout.cshtml"; ViewData["PageId"] = "Login"; } <div id='content'> div>
0
Sundaram Subramanian9y ago
1) http://www.c-sharpcorner.com/article/mvc-webgrid-set-row-back-color-at-run-time/

2) http://www.c-sharpcorner.com/UploadFile/4d9083/display-colorized-rows-or-cells-of-webgrid-in-Asp-Net-mvc/

Hope these two will help. Change the statemet's conditions based on Your values as 1,0-1.
Thank in advance.
0