CODEWITHSUNDEEP
jquerycssrazor
GThree
GThree

Reputation: 3520

How to set class name dynamically and retain its value?

I have created partial view which will be called every 20 seconds until it satisfies the condition. This view contains a status bar and based on condition it will change the status.

Code:

<ol class="progress-tracker" data-progress-tracker-steps="4">
    <li class="progress-tracker-initial">Received</li>
    <li class="@(Model.JobStatus == (DeliveryRequestStatus) DeliveryManagerCallback.OrderStatus.Kitchen ? "progress-tracker-done" : "progress-tracker-todo")">Kitchen</li>
    <li class="@(Model.JobStatus == (DeliveryRequestStatus) DeliveryManagerCallback.OrderStatus.Road ? "progress-tracker-done" : "progress-tracker-todo")">In Transit</li>
    <li class="@(Model.JobStatus == (DeliveryRequestStatus) DeliveryManagerCallback.OrderStatus.Delivered ? "progress-tracker-done" : "progress-tracker-todo")">Delivered</li>
</ol>

UI:

enter image description here

The problem I am running into is, when the status changes to In-transit from Kitchen, I am loosing the style for kitchen which is expected based on my condition. How can I retain the styling when status changes?

I can add CSS code if needed.

Actual Result:

enter image description here

Expected Result:

enter image description here

Upvotes: 0

Views: 49

Answers (1)

Soham
Soham

Reputation: 1281

The problem is Model.JobStatus has only one value so you cannot check it for equality for more than one OrderStatus. Here you need sequence comparison to solve the issue.

So let's say if you have OrderStatus enum like

enum OrderStatus
{
   Received= 1,
   Kitchen = 2,
   Road = 3,
   Delivered = 4
}

and you model's JobStatus property has a value from that enum, you can do something like this to achieve what you want.

<ol class="progress-tracker" data-progress-tracker-steps="4">
    <li class="progress-tracker-initial">Received</li>
    <li class="@((int)Model.JobStatus >= (int) DeliveryManagerCallback.OrderStatus.Kitchen ? "progress-tracker-done" : "progress-tracker-todo")">Kitchen</li>
    <li class="@((int)Model.JobStatus >= (int) DeliveryManagerCallback.OrderStatus.Road ? "progress-tracker-done" : "progress-tracker-todo")">In Transit</li>
    <li class="@((int)Model.JobStatus >= (int) DeliveryManagerCallback.OrderStatus.Delivered ? "progress-tracker-done" : "progress-tracker-todo")">Delivered</li>
</ol>

Upvotes: 2

Related Questions