Utilisez jQuery pour définir la couleur d'arrière-plan avec la valeur de la base de données

Question

Je cherche un exemple de lecture d'une valeur d'une base de données et l'utilise dans un script jQuery pour définir la couleur d'arrière-plan d'un contrôle. J'apprends toujours jQuery, et il n'est pas clair pour moi comment obtenir une valeur de la base de données. J'utilise ASP.NET MVC, et mon formulaire tire déjà la valeur - ai-je besoin de le mettre dans un champ caché et l'utiliser de cette façon, ou existe-t-il une meilleure/différente façon de communiquer la valeur de couleur à jQuery?

Answer 1

je peux penser de différentes façons de le faire, dont certaines n'utilisent pas jQuery en fonction de ce que vous essayez d'accomplir.

thématisation

Développer CSS personnalisé et avoir votre point de vue de choisir le fichier CSS à utiliser en fonction de la sélection de la base de données. Ce code est une vue qui construit un lien CSS basé sur la valeur du champ de la base de données. Appliquez des classes à vos contrôles du thème (chaque thème aurait les mêmes classes, juste des paramètres différents pour chacun d'eux).

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

Préférences utilisateur

Vous voulez que l'utilisateur soit en mesure de réellement changer l'apparence d'un élément particulier et se sentir, pas simplement choisir un thème. Dans ce cas, il existe plusieurs options: l'une dispose d'un assistant qui génère un code CSS personnalisé pour l'utilisateur en fonction des valeurs de la base de données, en utilisant à nouveau des classes communes pour que vous puissiez styliser les contrôles avec des classes. Appelez cette aide à partir de votre vue et injectez le CSS correct dans la page directement ou en tant que lien vers une action qui génère le CSS en réponse à un lien. Ou, et je n'aime pas cette option, définissez la propriété de style sur le contrôle lui-même en utilisant la disposition Afficher et obtenir la valeur de la propriété de couleur d'arrière-plan de ViewData.

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


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

dynamique Changements

Vous voulez avoir le changement de couleur dynamique basée sur une action de l'utilisateur et la nouvelle couleur (s) proviennent de la base de données. Dans ce cas, vous pouvez injecter la couleur dans la balise de script où votre jQuery vit directement.

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

Je ne vois aucun besoin d'utiliser un champ caché.

Answer 2

Une valeur cachée fonctionnerait très bien, vous pouvez le récupérer en utilisant:

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

Une autre chose que vous pourriez faire, est de définir une variable globale en javascript (ie, au sommet de votre dossier, en dehors de la définition de toutes les fonctions, il sera alors disponible dans toutes les fonctions.). Vous allez faire quelque chose comme ceci:

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

Dans le fichier HTML:

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

Answer 3

valeur cachée est bien:

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

Voir par exemple: http://jsbin.com/aneno