使用 jQuery 使用数据库中的值设置背景颜色答案

【问题标题】：Use jQuery to set background color with value from database使用 jQuery 使用数据库中的值设置背景颜色
【发布时间】：2009-04-17 13:49:21
【问题描述】：

我正在寻找一个示例，说明如何从数据库中读取值并在 jQuery 脚本中使用它来设置控件的背景颜色。我还在学习 jQuery，我不清楚如何从数据库中获取值。我正在使用 ASP.NET MVC，并且我的表单已经在提取值 - 我需要将它放在隐藏字段中并以这种方式使用它，还是有更好/不同的方式将颜色值传达给 jQuery？

【问题讨论】：

标签： asp.net javascript jquery

【解决方案1】：

我可以想到几种不同的方法来做到这一点，其中一些不使用 jQuery，具体取决于您要完成的工作。

主题

开发自定义 CSS 并让您的视图根据数据库中的选择来选择要使用的 CSS 文件。这将是基于数据库字段的值构造 CSS 链接的视图代码。将类应用到主题中的控件（每个主题都有相同的类，只是每个主题的设置不同）。

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

用户偏好

您希望用户能够实际更改特定元素的外观和感觉，而不仅仅是选择主题。在这种情况下，有几个不同的选项——一个有一个帮助器，它根据数据库值为用户生成自定义 CSS——再次使用公共类，以便您可以使用类设置控件的样式。从您的视图中调用此帮助程序，并将正确的 CSS 直接或作为生成 CSS 以响应链接的操作的链接注入页面。或者，我不喜欢这个选项，使用 View 布局设置控件本身的样式属性，并从 ViewData 获取背景颜色属性的值。

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


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

动态变化

您希望根据用户操作动态更改颜色，并让新颜色来自数据库。在这种情况下，您可以将颜色注入到您的 jQuery 直接所在的脚本标记中。

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

我认为没有必要使用隐藏字段。

【讨论】：

【解决方案2】：

隐藏值可以正常工作，您可以使用以下方法检索它：

$("#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

【讨论】：

color="";也需要是脚本标签。

【解决方案3】：

隐藏值很好：

<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

【讨论】：