使用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來響應鏈接。或者，我不喜歡這個選項，使用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> 

動態變化

你想擁有動態地根據用戶動作的顏色變化，並有新的顏色（S）來自數據庫。在這種情況下，您可以將顏色注入到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