2015-06-08 3 views
3

Я хотел бы применить различные стили CSS для представления на основе выбора пользователя. Первоначально, вид должен использовать _ViewStart.cshtml и _Layout.cshtml. Когда пользователь нажимает кнопку предварительного просмотра, я хочу, чтобы представление использовало _Layout2.cshtml и переключило css для применения только в этом представлении.Переключение CSS Только для этой точки зрения?

Но, похоже, это относится ко всем представлениям. Любые намеки? Какие-то ошибки я сделал? Мой код ниже:

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> 
+1

Вы можете создать скрипку ** [здесь] (https://dotnetfiddle.net/) ** –

+0

привет @GuruprasadRao я понятия не имею, как использовать это: ( –

+0

Просто перейдите по этой ссылке и вставьте необходимые коды и таблицы стилей !! Вот и все .. :) –

ответ

0

Вы могли бы сделать это без необходимости переключения таблиц стилей, если пространство имен ваш CSS и добавил класс в тело вместо этого. Затем вы можете изменить этот класс с помощью JS при нажатии кнопки.

Пример в SASS:

.stylesheet-1 { 
    .style-1 { 

    } 
    .style-2 { 

    } 
} 

.stylesheet-2 { 
    .style-1 { 

    } 
    .style-2 { 

    } 

    .style-3 { 

    } 

} 
Смежные вопросы