Razor 中不正确的三元运算

Question

我有这个 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);";

但这并没有添加模型值，而是将其写为字符串。如何插入值？

Answer 1

尝试在三元内使用单引号

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

Answer 2

您必须混合搭配单引号和双引号才能完成这项工作！例如：

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'