Use jQuery to set background color with value from database

Question

I'm looking for an example of how I would read a value from a database and use it in a jQuery script to set the background color of a control. I'm still learning jQuery, and it's not clear to me how to get a value from the database. I'm using ASP.NET MVC, and my form is already pulling the value - do I need to put it in a hidden field and use it that way, or is there a better/different way to communicate the color value to jQuery?

Answer 1

A hidden value would work fine, you could retrieve it using:

$("#hiddenFieldId").val();

Another thing you could do, is to set a global variable in javascript (i.e, at the top of your file, outside the definition of all functions. Then it will be available inside all functions.). You'll do something like this:

//On top of your-file.js:
var color='';
$(document).ready(function()
    {
        $("body").css("background-color",color); //Not tested
    }
);

In the HTML file:

<script type='text/javascript' src='your-file.js'>
</script>
color="<?=$color;?>"; //Or do it how you'd do it in ASP

Answer 2

Hidden value is fine:

<input type="hidden" value="#ff3300" id="backgroundColor">
<div id="someControl">I'm some control</div>
<script>
  $(function() {
  $('#someControl').css('background', $('#backgroundColor').val());
});
</script>

See example: http://jsbin.com/aneno

Answer 3

I can think of a few different ways to do this, some of which don't use jQuery depending on what you are trying to accomplish.

Theming

Develop custom CSS and have your view choose which CSS file to use based on the selection from the database. This would be view code that constructs a CSS link based on the value of the database field. Apply classes to your controls from the theme (each theme would have the same classes, just different settings for each one).

 <link href='<%= Url.Content( "~/Content/styles/" + Model.Theme ) %>'
       type="text/css"
       rel="stylesheet" />

User Preferences

You want the user to be able to actually change a particular element's look and feel, not merely choose a theme. In this case there are a couple of different options -- one have a helper that generates custom CSS for the user based on the database values -- again using common classes so that you can style the controls with classes. Call this helper from your View and inject the correct CSS into the page either directly or as a link to an action that generates the CSS in response to a link. Or, and I don't like this option, set the style property on the control itself using the View layout and get the value of the background color property from ViewData.

<link href='<% Url.Action("css","generate", new { id = Model.UserID } ) %>'
      type="text/css"
      rel="stylesheet" />


<div style='background-color: <%= ViewData["controlBackgroundColor"] %>;'></div>

Dynamic Changes

You want to have the color change dynamically based on a user action and have the new color(s) come from the database. In this case you can inject the color into the script tag where your jQuery lives directly.

<script type="text/javascript">
     $(document).ready( function() {
         $('#someButton').click( function() {
              $('#someControl').css('background','<%= ViewData["controlBackground"] %>');
         });
     });
</script>

I don't see any need to use a hidden field.