asp.net - 使用 jQuery 使用数据库中的值设置背景颜色

Question

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

Answer 1

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

主题

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

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

用户偏好

您希望用户能够实际更改特定元素的外观和感觉，而不仅仅是选择主题。在这种情况下，有几个不同的选项 - 一个有一个帮助器，根据数据库值为用户生成自定义 CSS - 再次使用公共(public)类，以便您可以使用类来设计控件的样式。从 View 中调用此帮助程序，并将正确的 CSS 直接注入(inject)到页面中，或者作为指向生成 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>

动态变化

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

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

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