Неправильная троичная операция в Razor - PullRequest
Новая
       22

Неправильная троичная операция в Razor

0 голосов
/ 27 февраля 2019

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

<div 
     class="@(Model.HeroBannerImageSmall ? "--imageSmall" : "--image")"
     style="@(Model.isSelected ? "background-position-x: "@Model.CropPositionX"% background-position-y: "@Model.CropPositionY"%; " : "background-position: @Model.UniformCropPosition%; ")
                 background-image: url(@Model.ContentUrl)">

</div>

В соответствии со стилями 

               var imageClass = Model.HeroBannerImageSmall ? "hero__background hero__background--imageSmall" : "hero__background hero__background--image";
                var imageStyles = Model.isSelected ? "background-position-x: Model.CropPositionX%; background-image: url(Model.ContentUrl);" : "background -position: Model.CropPosition%; background-image: url(Model.ContentUrl);";

, но это не добавляет значения модели, а просто записывает его в виде строки.Как мне вставить значение?

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

Попробуйте использовать одинарные кавычки внутри троичного 

<div
   class='@(Model.HeroBannerImageSmall ? "--imageSmall" : "--image")'
   style='@(Model.isSelected ? "background-position-x:@Model.CropPositionX" % "background-position-y:@Model.CropPositionY"&; : "background-position:@Model.UniformCropPosition"&;')
   background-image: url(@Model.ContentUrl)'>
</div>
0 голосов
/ 27 февраля 2019

Вы должны смешивать и сочетать одинарные и двойные кавычки, чтобы сделать эту работу!Например: 

class='@(Model.HeroBannerImageSmall ? "--imageSmall" : "--image")'

Потенциально может быть легче читать, если вы вытащите его в ветвь кода перед div.то есть: 

@{
    var imageClass = Model.HeroBannerImageSmall ? "--imageSmall" : "--image";

    var imgageStyle = Model.isSelected ? 
              "background-position-x: " + Model.CropPositionX + "% background-position-y: " + Model.CropPositionY + "%;" : 
              "background-position: " + Model.UniformCropPosition + "%; ";
     imgageStyle += "background-image: url(" + Model.ContentUrl + ")";

}



class='@imageClass' style='@imageStyle'
...