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以响应链接的操作的链接。或者，我不喜欢这个选项，使用View布局在控件本身上设置style属性，并从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>

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

Answer 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

Answer 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

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

3 个答案: