Написание динамических значений CSS inview для episerver

Question

Я пытаюсь редактировать представление в EPIserver.Я хочу позволить нашим пользователям определять ширину встроенных видео YouTube.Я создал новое поле формы, которое необходимо заполнить, и затем я использую это значение как процентную ширину моего класса "sizer".

Первоначально у меня было следующее представление:

<section>
    <div class="container">
        <div class="row">
            <div class="sizer">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item"
                            src=@Model.VideoURL
                            frameborder="0"
                            allow="autoplay; encrypted-media"
                            @Model.AllowFullScreen></iframe>
                </div>
            </div>
        </div>
    </div>
</section>

Затем я собрал некоторую логику, чтобы динамически создавать атрибут стиля, только если переменная заполнена.

Моя идея заключалась в том, чтобы сделать следующее:

@{ 

    var SizerStyle = ""; 
    if (!String.IsNullOrEmpty(Model.CustomVideoWidthPercent)) {
        SizerStyle = "style=\"width:";  
        SizerStyle += @Model.CustomVideoWidthPercent;
        SizerStyle += "%; margin: 0 auto\"";


    }

}

Но когда я объединяю эти два вида так:

<section>
    <div class="container">
        <div class="row">
            <div class="sizer" @SizerStyle>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item"
                            src=@Model.VideoURL
                            frameborder="0"
                            allow="autoplay; encrypted-media"
                            @Model.AllowFullScreen></iframe>
                </div>
            </div>
        </div>
    </div>
</section>

Я получаюэто в браузере:

<div class="sizer" style="50.6%;" margin="" 0="" auto="&quot;>

Я не понимаю, что здесь происходит.Кажется, здесь есть какая-то логика для перехвата и обработки css / html?

Answer 1

Вам необходимо распечатать его без какой-либо кодировки HTML:

<div class="sizer" @Html.Raw(SizerStyle)>

Все, что вы печатаете в представлении Razor, автоматически кодируется, если только оно не реализует IHtmlString или не является MvcHtmlString.