CODEWITHSUNDEEP
c#htmlcssasp.net-mvc
anıl altan
anıl altan

Reputation: 11

How can i do conditional style in MVC

I wanna make dynamic style in an MVC project. For instance, a have view like thislike this

<div class="bg-purple text-center text-white pb5">
    <div data-bind="visible:ShowMesaage()===1">
        <strong>@common.welcome</strong>
        <p>
            <span data-bind="text:TempDate"></span>@common.reservationMessage
        </p>
    </div>
</div>

and I'm getting some information from the api(test1 and test2). If test1 comes, I want the div's background to change and p's and strong's font to change, likewise, if test2 comes, I want another color and another font.

how can i do it? I don't want to change the controller if possible

enter image description here

<div class="bg-purple text-center text-white pb5">
    <div data-bind="visible:ShowMesaage()===1">
        <strong class="@(apiInfo='test1' ? "tyest1" : "test2")">@common.welcome</strong>
        <p>
            <span data-bind="text:TempDate"></span>@common.reservationMessage
        </p>
    </div>
</div>

i did like this but I think doing this for all tags would take a long time and would not be efficient.

Upvotes: 0

Views: 659

Answers (1)

Kd Nimavat
Kd Nimavat

Reputation: 282

<strong Class="@(apiInfo == 'test1' ? 'test1':'test2')">@common.welcome</strong>

OR

<strong Class='@(apiInfo == "test1" ? "test1":"test2")'>@common.welcome</strong>

Just check the double Quote and single Quote placement and there you go.

If you want other approach then this,

  <div class="bg-purple text-center text-white pb5">
        <div data-bind="visible:ShowMesaage()===1">
            <strong class="@apiInfo">@common.welcome</strong>
            <p>
                <span data-bind="text:TempDate"></span>@common.reservationMessage
            </p>
        </div>
    </div>

And here is the style that you can use direct your ApiInfo as class that would be so good approach,

   <style>
        .test1 
        {
           background-color:#fff; //[your style]
        }
        
        .test2
        {
           background-color:red; //[your style]
        }
   </style>

Upvotes: 1

Related Questions