Clever Geek Handbook

Switching CSS Just for this point of view?

I would like to apply various CSS styles to a view based on user selection. Initially, the presentation should be used _ViewStart.cshtml

and _Layout.cshtml

. When the user clicks on the preview button, I want the view to use _Layout2.cshtml

and toggle the css to apply in that view only.

But this seems to apply to all views. Any hints? Did I make any mistakes? 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>
+3


source to share


1 answer


Perhaps you could do this without having to reinstall your stylesheets, if you replaced your CSS and added a class to the body. Then you can change this class with JS on button click.

An example in SASS:



.stylesheet-1 {
  .style-1 {

  }
  .style-2 {

  }
}

.stylesheet-2 {
  .style-1 {

  }
  .style-2 {

  }  

  .style-3 {

  }

}
0


source






More articles:


All Articles