I would like to apply different css styles to a view based on user selection.
Initially, the view should use _ViewStart.cshtml and _Layout.cshtml. When a user clicks the preview button, I want the view to use _Layout2.cshtml and switch the css to apply on that view only.
But it seems apply that to all the views. Any hints? Any mistakes I've done? My code is below:
Create.cshmtl :
@model SurveyTool.Models.SampleQuestionViewModel
@{
ViewBag.Title = "DummyQuestionList";
Layout = "~/Views/Shared/_Layout2.cshtml";
if (Model.Survey_Template == "Style1")
{
<link href="Site.css" rel="stylesheet"
type="text/css" />
}
else if (Model.Survey_Template == "Style2")
{
<link href="Type1.css" rel="stylesheet"
type="text/css" />
}
else if (Model.Survey_Template == "Style3")
{
<link href="Type2.css" rel="stylesheet"
type="text/css" />
}
}
<h2>@Model.Survey_Template DummyQuestionList</h2>
<br/>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>SampleQuestionViewModel</legend>
<div class="editor-label">
@Html.HiddenFor(model => model.Survey_Template)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Survey_Template)
@Html.ValidationMessageFor(model => model.Survey_Template)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Question1)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Question1)
@Html.ValidationMessageFor(model => model.Question1)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Question2)
</div>
<div class="editor-field">
@Html.TextAreaFor(model => model.Question2)
@Html.ValidationMessageFor(model => model.Question2)
</div>
</fieldset>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
_Layout2.cshtml :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Infineon Survey Tool</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/Site.css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
</head>
<body id="@ViewBag.Title">
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
@RenderSection("scripts", required: false)
</body>
</html>
You could probably do this without needing to switch style sheets if you namespaced your CSS and added a class to the body instead. You could then change this class with JS when the button was clicked.
An example in SASS: