Вы можете использовать либо серверный код с синтаксисом Razor, либо чистый JavaScript для реализации вашего сценария.Смешивание JavaScript и серверного кода для файлов cookie иногда может привести к неожиданным результатам, поэтому используйте чисто серверный подход или подход с чистым JavaScript.
Двоичный файл cookie в моем примере называется bodyStyle и требуетзначение 1 или 0. Я создаю постоянный файл cookie, срок действия которого истекает через 30 дней с сегодняшнего дня и будет доступен / будет сохраняться на страницах вашего домена.Кроме того, вы можете добавить некоторую проверку условий при создании файла cookie или настроить его значение в обоих подходах в соответствии с вашими требованиями.
Пользовательский класс, который я добавляю в тело с использованием значения cookie, равен miniNavBar.
Подход на стороне сервера
Обычно тег body будет находиться в общем представлении, поэтому добавьте приведенный ниже код Razor в общий вид.
C # Razor-код для динамического задания класса тела с использованием двоичного файла cookie
@{
//set bodyStyle cookie based on some condition using a if statement as per your requirements
Response.Cookies["bodyStyle"].Value = "1";
Response.Cookies["bodyStyle"].Expires = DateTime.Now.AddMinutes(2);
}
<body class="@(Response.Cookies["bodyStyle"].Value == "1" ? "miniNavBar" : "")">
Подход JavaScript
Приведенный ниже код может перейти в любое представление, для которого требуется эта логика, или добавить его в общее представление макета, если вы хотите применить его ко всем представлениям.
Код JavaScript для динамического задания класса тела с использованиемдвоичный файл cookie
<script type="text/javascript">
//main cookie function that will contain your logic for creating the binary cookie
function setBodyCookie() {
//if perisistent cookie exists then do not create it
if (document.cookie.indexOf("bodyStyle=0") >= 0 || document.cookie.indexOf("bodyStyle=1") >= 0) {
return;
}
//create body cookie if it does not exist
//you can add an if statement here when creating a cookie based on your scenario
var now = new Date();
now.setTime(now.getTime() + 30 * 24 * 60 * 60 * 1000);//expire this in 30 days from now
document.cookie = "bodyStyle=1;expires=" + now.toUTCString() + ";path=/";
}
$(document).ready(function () {
//set binary cookie according to your requirements
setBodyCookie();
//add class to body if binary cookie has a value of 1
if (document.cookie.indexOf("bodyStyle=1") >= 0) {
$("body").addClass("miniNavBar");
}
});
</script>
Еще одним решением javascript, если вы хотите избежать мерцания, может быть размещение кода события готовности документа сразу после тега body в вашей разметке и удаление события готовности исходного документа.вы использовали, как показано ниже.Вы заметите, что готовый документ не используется в приведенном ниже коде.
<body class="expandedNavBar">
<script>
//set binary cookie according to your requirements
setBodyCookie();
//add class to body if binary cookie has a value of 1
if (document.cookie.indexOf("bodyStyle=1") >= 0) {
//remove all classes that are already there or just remove the
//the ones you like to
$("body").removeClass();
//add your class now
$("body").addClass("miniNavBar");
}
</script>
Другой альтернативой является то, что вы можете использовать класс .hide, чтобы избежать мерцания, поскольку класс тела изменяется в событии готовности документа.Это показано в примере кода ниже.
<style>
.hide{ visibility:hidden}
</style>
<script>
$(document).ready(function () {
//set binary cookie according to your requirements
setBodyCookie();
//add class to body if binary cookie has a value of 1
if (document.cookie.indexOf("bodyStyle=1") >= 0) {
$("body").removeClass("hide");//remove the hide class
$("body").addClass("miniNavBar");
}
});
</script>
<body class="hide">