add dynamic CSS classes from controller

Question

How can I dynamically change css classes i.e. seperate css classes for warning or error message and success message.

Controller Block

public ActionResult Register(string username, string name, string role, string password)
{
    int role_ = Convert.ToInt32(role);
    ObjectParameter output = new ObjectParameter("V_OUT", typeof(int));
    var result = db.P_SET_USER(username, name, role_, password, output);
    ViewBag.alert = true;
    ViewBag.StudentsCount = Convert.ToInt32(output.Value);
    return View();
}

View Block

@if (ViewBag.alert == true)
{
    <div class='callout callout-info'>
        @ViewBag.StudentsCount;
    </div>
}

I want to dynamically change the css classes for error message using div class="callout callout-danger" and for success message div class="callout callout-info".

Willy David Jr · Accepted Answer · 2018-04-05 16:11:48Z

1

You can do this, declare a variable and create the condition on it:

 @{
    var value = ViewBag.alert == true ? "callout callout-info" : "callout callout-danger;"
  }

Then call the name of the class inside it, you can just call this variable name on all your elements that need this class.

<div class='@value'>
    @ViewBag.StudentsCount;
</div>

edited Apr 5, 2018 at 16:11

answered Apr 5, 2018 at 16:03

Willy David Jr

9,2017 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user9405863 · Accepted Answer · 2018-04-05 16:46:44Z

0

you can include conditions with ternary operator ?with in css class like below

<div class='@ViewBag.alert == true ? "callout callout-info" : "callout callout-danger;'>
        @ViewBag.StudentsCount;
    </div>

edited Apr 5, 2018 at 16:46

answered Apr 5, 2018 at 16:06

user9405863

1,5141 gold badge13 silver badges16 bronze badges

Comments

Tiramonium · Accepted Answer · 2018-04-05 16:47:25Z

0

You could make different conditions for each kind of message you want to display, and apply the CSS classes to each one of them. Also, prefer TempData to ViewBag since ViewBags lose their value after redirects.

For example,
callout-info for TempData["alert"] == true,
callout-warning for TempData["alert"] == false,
callout-success for TempData["error"] == false and
callout-danger for TempData["error"] == true

edited Apr 5, 2018 at 16:47

answered Apr 5, 2018 at 15:54

Tiramonium

92711 silver badges17 bronze badges

1 Comment

Tiramonium Over a year ago

That's the easiest way I can see you doing this, yes. Whatever color, font weight or other properties you want to change for each one of them will be easier to apply if each have its own separate CSS class. Then you make the decision in the View of which class will be applied according to the value provided by the controller.

Collectives™ on Stack Overflow

add dynamic CSS classes from controller

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related