Question

如何在代码隐藏中格式化自己的属性？我的想法是覆盖CSS内联样式，所以我在我的模型中添加了一个属性。

public string GetBannerBackgroundStyle
{
    get
    {
       return !string.IsNullOrEmpty(GetBannerImageMediaUrl) ? string.Format("style=background-image: url('{0}')", GetBannerImageMediaUrl) : string.Empty;
    }
}

在视图中，我只需在HTML上设置属性

<div class="anything" @Model.GetBannerBackgroundStyle></div>

然而输出被扰乱。它会产生一些但不正确的东西，好像引号没有关闭一样。

有什么更好的想法吗？提前谢谢！

更新：

public HtmlString GetBannerBackgroundStyle
{
    get
    {
        return new HtmlString(!string.IsNullOrEmpty(GetBannerImageMediaUrl) ? string.Format("style=background-image: url('{0}')", GetBannerImageMediaUrl) : string.Empty);
    }
}

这似乎不起作用：s

UPDATE2：

public IHtmlString GetBannerBackgroundStyle
{
    get
    {
        return new HtmlString(!string.IsNullOrEmpty(GetBannerImageMediaUrl) ? string.Format("style=\"background-image: url('{0}')\"", GetBannerImageMediaUrl) : string.Empty);
    }
}

这确实有效^^

Answer 1

你需要让你的财产返回IHtmlString告诉Razor不要逃避它。

但是，首先，如果URL包含标记或引号，您需要自己正确地转义它。

Answer 2

来自MSDN：

Razor语法@运算符在将文本呈现给HTTP响应之前对文本进行HTML编码。这会导致文本在网页中显示为常规文本，而不是被解释为HTML标记。

您可以使用Html.Raw方法（如果您不想/无法更改您的媒体资源以返回HtmlString，请记住正确的方式是SLaks建议的那个：

当指定的文本表示不应编码的实际HTML片段并且您要将其呈现为HTTP响应的标记时，请使用Raw方法。

<div class="anything" @Html.Raw(Model.GetBannerBackgroundStyle)></div>

那就是说我不会把这个逻辑放在你的模型中。一个辅助方法，一些JavaScript ...但我不会将样式与数据混合。在您的示例中，它应该是：

<div class="anything"
    style="background-image: url('@Model.GetBannerImageMediaUrl')">

请注意，您的代码也是错误的，因为HTML style属性的您缺少引号：

if (!String.IsNullOrEmpty(GetBannerImageMediaUrl))
    return String.Empty;

return String.Format("style=\"background-image: url('{0}')\"", GetBannerImageMediaUrl);
                          ---^                          ---^

Answer 3

下面的代码段怎么样？

<div class="anything" @(Model != null && !string.IsNullOrWhiteSpace(GetBannerImageMediaUrl) 
? "style=background-image: url('" + GetBannerImageMediaUrl + "')" 
 : string.Empty)></div>

Razor中的动态Html属性格式

3 个答案: