Razor 中的动态 Html 属性格式 [英] Dynamic Html Attribute format in Razor

问题描述

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

公共字符串 GetBannerBackgroundStyle{得到{返回 !string.IsNullOrEmpty(GetBannerImageMediaUrl) ?string.Format("style=background-image: url('{0}')", GetBannerImageMediaUrl) : string.Empty;}}

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

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

然而，输出被打乱了.它生成了一些东西，但不正确，就好像引号没有关闭一样.

有更好的想法吗?
提前致谢！

更新:

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

这似乎不起作用:s

更新 2:

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

这确实有效^^

解决方案

来自 MSDN:

<块引用>

Razor 语法@ operator HTML 编码文本，然后将其呈现给 HTTP 响应.这会导致文本在网页中显示为常规文本，而不是被解释为 HTML 标记.

那是您可以使用 Html.Raw 方法的地方(如果您不想/无法更改您的属性以返回 HtmlString，请记住 正确的方法是SLaks建议的方法):

<块引用>

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

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

也就是说，我不会将该逻辑放入您的模型中.一个辅助方法，一些 JavaScript ……但我不会将样式与数据混合在一起.在您的示例中，它应该是:

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

if (!String.IsNullOrEmpty(GetBannerImageMediaUrl))返回 String.Empty;return String.Format("style=\"background-image: url('{0}')\"", GetBannerImageMediaUrl);---^ ---^

How can I format my own attribute in the codebehind? The idea is to overwrite CSS inline style so I added a property to my Model.

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

In the view I simply set the property on the HTML

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

The output however is scrambled. It generates something but not properly as if the quotes weren't closed.

Any better ideas?
Thanks in advance!

UPDATE:

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

This didn't seem to work :s

UPDATE2:

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

This did work ^^

解决方案

From MSDN:

The Razor syntax @ operator HTML-encodes text before rendering it to the HTTP response. This causes the text to be displayed as regular text in the web page instead of being interpreted as HTML markup.

That's where you can use Html.Raw method (if you don't want/can't change your property to return an HtmlString, please remember that right way to do it is that one as suggested by SLaks):

Use the Raw method when the specified text represents an actual HTML fragment that should not be encoded and that you want to render as markup to the HTTP response.

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

That said I wouldn't put that logic inside your model. An helper method, some JavaScript...but I wouldn't mix styling with data. In your example it should be:

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

Please note that your code was also wrong because you're missing quotes for HTML style attribute:

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

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

这篇关于Razor 中的动态 Html 属性格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！