Используйте jQuery, чтобы установить цвет фона со значением из базы данных.

Question

Я ищу пример того, как я мог бы прочитать значение из базы данных и использовать его в сценарии jQuery, чтобы установить цвет фона элемента управления. Я все еще изучаю jQuery, и мне не ясно, как получить значение из базы данных. Я использую ASP.NET MVC, и моя форма уже извлекает значение - нужно ли поместить его в скрытое поле и использовать его таким образом, или есть лучший / другой способ передачи значения цвета в jQuery?

Answer 1

Я могу придумать несколько разных способов сделать это, некоторые из которых не используют jQuery в зависимости от того, чего вы пытаетесь достичь.

Тематизация

Разработайте собственный CSS и сделайте так, чтобы ваш выбор определял, какой CSS-файл использовать в зависимости от выбора из базы данных. Это будет вид кода, который создает ссылку CSS на основе значения поля базы данных. Примените классы к элементам управления из темы (каждая тема будет иметь одинаковые классы, только разные настройки для каждой).

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

Предпочтения пользователя

Вы хотите, чтобы пользователь мог реально изменять внешний вид и восприятие конкретного элемента, а не просто выбирать тему. В этом случае есть несколько различных опций - у одного есть помощник, который генерирует пользовательский CSS для пользователя на основе значений базы данных - снова с использованием общих классов, чтобы вы могли стилизовать элементы управления с помощью классов. Вызовите этого помощника из вашего View и вставьте правильный CSS в страницу либо напрямую, либо как ссылку на действие, которое генерирует CSS в ответ на ссылку. Или, и мне не нравится эта опция, установите свойство style для самого элемента управления с помощью макета View и получите значение свойства background color из ViewData.

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


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

Динамические изменения

Вы хотите, чтобы изменение цвета происходило динамически в зависимости от действий пользователя, и чтобы новые цвета поступали из базы данных. В этом случае вы можете добавить цвет в тег script, где непосредственно находится ваш jQuery.

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

Я не вижу необходимости использовать скрытое поле.

Answer 2

Скрытое значение в порядке:

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

См. Пример: http://jsbin.com/aneno

Answer 3

Скрытое значение будет работать нормально, вы можете получить его, используя:

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

Еще одна вещь, которую вы могли бы сделать, это установить глобальную переменную в javascript (т.е. в верхней части вашего файла, вне определения всех функций. Тогда она будет доступна внутри всех функций.). Вы будете делать что-то вроде этого:

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

В файле HTML:

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