Heute möchte ich zeigen, wie man sich einen einfachen Style-Switcher mittels jQuery in einem MVC / Razor Projekt einbauen kann.

image

Den Basis-Style setzen wir zu Beginn, wenn die Seite zum ersten Mal geöffnet wird. Wichtig ist, das wir eine Id setzen, um in unserer jQuery Funktion dieses Element wieder zu finden.

<link id="jQ" href="@Url.Content("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css")" rel="Stylesheet" type="text/css" />

Um zwischen den Styles zu wechseln, erstellen wir eine Html-ComboBox mit den Namen der einzelnen Styles:

<select id="styles"> <option value="base">base</option> <option value="black-tie">black-tie</option> <option value="blitzer">blitzer</option> <option value="cupertino">cupertino</option> <option value="dark-hive">dark-hive</option> <option value="dot-luv">dot-luv</option> <option value="eggplant">eggplant</option> <option value="excite-bike">excite-bike</option> <option value="flick">flick</option> <option value="hot-sneaks">hot-sneaks</option> <option value="humanity">humanity</option> <option value="le-frog">le-frog</option> <option value="mint-choc">mint-chocolate</option> <option value="overcast">overcast</option> <option value="pepper-grinder">pepper-grinder</option> <option value="redmond">redmond</option> <option value="smoothness">smoothness</option> <option value="south-street">south-street</option> <option value="start">start</option> <option value="sunny">sunny</option> <option value="swanky-purse">swanky-purse</option> <option value="trontastic">trontastic</option> <option value="ui-darkness">ui-darkness</option> <option value="ui-lightness">ui-lightness</option> <option value="vader">vader</option> </select>

Als Script verwenden wir folgenden Codeabschnitt. Die Funktion setzt den gewählten Style und ruft eine Methode im Controller auf, der ggfls. den Style in den Usereinstellungen speichern kann.

<script> $(document).ready(function () $('#styles').change(function () { var style = $(this).val(); $("#jQ").attr("href", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/" + style + "/jquery-ui.css"); $.post('@Url.Action("SaveStyle", "Home")', { style: style }, function () { return false; }); }); }); </script>

Im Controller dann kann der Name des gewählten Styles weiter verarbeitet werden:

public void SaveStyle(string style) { //save style }

Viel Spaß beim entwickeln : )

MVC / Razor Style-Switcher – Quicky
Markiert in: