Are There Any View Helpers to Generate CSS

Managing ever-growing CSS stylesheets at server-side - are there any libraries, helpers?

Maybe I formulated my question in wrong way, but I was hoping to be directed to some existing .NET APIs to define/generate CSS. Looks like there's nothing like that. And according to the discussion in parallel question, it may not be as useful as I thought.

Rails conditional CSS in view helper

The rails helper content_tag http://apidock.com/rails/ActionView/Helpers/TagHelper/content_tag, is useful and means you don't have to use html_safe. I try to move all the logic from the views to helpers to make the view easy to read e.g.

def target_hit(current_amt, forecast_amt)
  content_tag(:p, "#{number_to_currency(current_amt.to_s)} target_content(current_amt, forecast_amt)", class: "total #{target_class(current_amt, forecast_amt)}")
end

def target_content(current_amt, forecast_amt)
  forecast_reached?(current_amt, forecast_amt) ? "Yay" : "No dice"
end

def target_class(current_amt, forecast_amt)
  forecast_reached?(current_amt, forecast_amt) ? "green" : "red"
end

def forecast_reached?(current_amt, forecast_amt)
  current_amt >= forecast_amt
end

in the view, you just call the helper method

<%= target_hit(@current.amount, @forecast.amount) %>

Rails - how to add css to a helper method

You are not terminating string properly in your code. One double quote (") will terminate previous double quote ("). So your string is consider like "<li class=" as one string and looking for " after that and you will get error if this is not the case.

So for declaring class inside a big string use single quotes (') inside a big double quoted (") string and concat each big string with (+).

To add class use single quote "<li class='col-xs-4 col-sm-2 nopadding menuitem'>Hi </li>" + "<li class='col-xs-4 col-sm-2 nopadding menuitem'>Hello </li>"

Change your code like below.

module ProfilesHelper
  def items_for_profile_menu(profile)
    if current_user = @profile.user_id 
      "<li class='col-xs-4 col-sm-2 nopadding menuitem' style='background:#006F7F'>
        <a href='index.html' class='hvr-sweep-to-bottom'>
          <span>Dashboard</span></a>
      </li>
      <li class='col-xs-4 col-sm-2 nopadding menuitem' style='background:#39AFBF'>
        <a href='#resume' class='hvr-sweep-to-bottom'>
        <span>Timeline</span></a>
      </li>"
    else
      "<li class='col-xs-6 col-sm-3 nopadding menuitem orange'>
        <a href='#stats' class='hvr-sweep-to-bottom'><i class='flaticon-placeholders4'></i><span>Impact</span></a>
      </li>
      <li class='col-xs-6 col-sm-3 nopadding menuitem red'>
        <a href='#feedback' class='hvr-sweep-to-bottom'><i class='flaticon-earphones18'></i><span>Feedback</span></a>
      </li>"
    end
  end

end

Styling HTML helpers ASP.NET MVC

You can pass it into the TextBox call as a parameter.

Name:<br/>    
<%= Html.TextBox("txtName", "20", new { @class = "hello" }) %>

This line will create a text box with the value 20 and assign the class attribute with the value hello. I put the @ character in front of the class, because class is a reserved keyword. If you want to add other attributes, just separate the key/value pairs with commas.

Zend Framework - How to call a CSS inside a view?

It's one of the core helpers, so you'll definitely have it available unless you've got a very exotic setup. From the manual, typically you'll want to do something like:

$styles = 'div#myDiv{margin:10px;padding:10px;}';
$this->headStyle()->appendStyle($styles);

in your view file to initialise your style. In your layout file you'll need to then echo out what you've appended using:

echo $this->headStyle();

Note that both the initialising and that final echo are required.

Edit: this assumes you're doing it inline - if you want to inject a linked CSS file then you'll use the headlink helper; that's the same deal, you initialise it and then echo it out in your layout.

Ruby on Rails 3 CSS only for certain Views (Devise)

Have you heard about content_for? It is really useful for things like that. Inside you layout add:

<%= yield :head %>

inside your head tag. Then you can write the following inside the view (devise/sessions/new):

<% content_for :head do %>
  javascript 'theme/signup'
  stylesheet 'theme/signup'
<% end %>

This will perfectly separate your layout from single view concerns, and it should also fix the problem you're having.

.net mvc using css3 with html helpers

I will post another answer with some code here to match your models and view after the update.

After your update, I have some questions.
I've changed my code as follows:

public ActionResult Team()
{
    var model = new TeamChoice();
    model.exportDefinition = new exportDefinition()
    {
        entityID = "8831A386-18D6-4EAE-919E-9C1D316CC2DD",
        name = "EntryName",
        pkey = "PKeyu"
    };

    model.is_any_checked = true;
    model.which_entity_to_show = "MineEntry";
    model.is_new = false;
    model.selectedFields = new List<Field>();
    for (int i = 1; i <= 15; i++)
    {
        model.selectedFields.Add(new Field()
        {
            propertyName = "Property" + i,
            propertyStatus = i % 2 == 0 ? false : true   
        });
    }

    return this.View(model);
}

[HttpPost]
public ActionResult Team(TeamChoice model)
{
    // this.Request.Form: 
    // exportDefinition.name=EntryName&selectedFields[0].propertyStatus=true&
    // selectedFields[0].propertyStatus=False&selectedFields[0].propertyName=Property1&
    // selectedFields[1].propertyStatus=true&selectedFields[1].propertyStatus=False&
    // selectedFields[1].propertyName=Property2&selectedFields[2].propertyStatus=true&
    // selectedFields[2].propertyStatus=False&selectedFields[2].propertyName=Property3&
    // selectedFields[3].propertyStatus=False&selectedFields[3].propertyName=Property4& and so on....
    // First tree fields in the collection will have status "true"
    var propertyStatus1 = model.selectedFields[0].propertyStatus;
    var propertyStatus2 = model.selectedFields[1].propertyStatus;
    var propertyStatus3 = model.selectedFields[2].propertyStatus;

    return this.RedirectToAction("Team");
}

When you passing the model to the view do you set "true" in the propertyStatus of any field? And second can you verify when you check first tree checkboxes to "Oui" and submit the form do you have form-data like this below?

selectedFields[0].propertyStatus=true&
selectedFields[1].propertyStatus=true&
selectedFields[2].propertyStatus=true&
selectedFields[3].propertyStatus=false ....

UPDATE Update your checkbox extension to code below. When you pass True in propertyStatus the checkbox in the HTML will be checked.

public static MvcHtmlString CustomCheckBoxFor<TModel>(
        this HtmlHelper<TModel> htmlHelper, 
        Expression<Func<TModel, bool>> expression,
        object htmlAttributes = null)
{
    var expressionText = ExpressionHelper.GetExpressionText(expression);
    var htmlAtributesDictionary = new RouteValueDictionary(htmlAttributes);

     TagBuilder input = new TagBuilder("input");
     input.Attributes.Add("type", "checkbox");
     input.Attributes.Add("name", expressionText);
     input.Attributes.Add("id", expressionText);
     input.Attributes.Add("value", "True");
     input.Attributes.Add("data-val", "True");

     ModelMetadata modelMetadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
     bool value;
     if (modelMetadata.Model != null && bool.TryParse(modelMetadata.Model.ToString(), out value))
     {
         if (value)
         {
             input.Attributes.Add("checked", "checked");
         }
     }

     MvcHtmlString result = MvcHtmlString.Create(input.ToString());
     return result;
 }

and replace in your view @Html.HiddenFor(m => m.selectedFields[count].propertyStatus) to @Html.Hidden("selectedFields[" + count + "].propertyStatus", false)

Ruby on Rails - Using helpers inside css erb file gives undefined method

Helpers are not available by default to templated .css files. They are intended to help in view construction only. However, you can try the workaround mentioned here using an initializer:

Rails.application.assets.context_class.instance_eval do
  include YourHelperModule
end

Alternatively, if you only need this for one or a few files, you can use the solution mentioned here, by adding this code to the top of the .css.erb file:

<% environment.context_class.instance_eval { include YourHelperModule } %>

---

Related Topics