Dynamic Html Attribute format in Razor

Question

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

Please note that your string does not have quotes, so not sure what you actually expect - "style=background-image: url('{0}')". Also to improve sample code consider replacing GetBannerImageMediaUrl with inline string constant (like string BannerImageMediaUrl="/foo/bar.jpg"; that matches your string). and possibly expected/actual output instead of "didn't seem to work:s". — Alexei Levenkov
– Alexei Levenkov, Commented Oct 29, 2014 at 14:35
@Alexei I thought HTML would "correct" the quotes but that doesn't seem to happen. Hence I had to escape them as Adriano suggests in his answer. The default image is on CSS level. I only needed an attribute if the image is not null. This to avoid unnecessary inline style. — Tim Vermaelen
– Tim Vermaelen, Commented Oct 29, 2014 at 14:40
Tim Vermaelen, I think you are talking about ability to omit quotes for attributes in HTML and indeed it is possible for most cases. But "style" have to have them as it contains more than just alphanumeric values - see w3.org/TR/1999/REC-html401-19991224/intro/sgmltut.html#h-3.2.2 — Alexei Levenkov
– Alexei Levenkov, Commented Oct 29, 2014 at 14:45
Hence I've tried it with single quotes but that didn't seem to work. It's Razor that's the second player in this problem. Webforms is probably gonna be just fine the way I tried at first. — Tim Vermaelen
– Tim Vermaelen, Commented Oct 29, 2014 at 14:50
Single quotes would work fine - as long as you've remove them from url(... in the style where they are optional - "style='background-image: url({0})'". — Alexei Levenkov
– Alexei Levenkov, Commented Oct 29, 2014 at 14:53

Adriano Repetti · Accepted Answer · 2014-10-29 14:38:46Z

3

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);
                          ---^                          ---^

edited Oct 29, 2014 at 14:38

answered Oct 29, 2014 at 14:23

Adriano Repetti

67.5k20 gold badges144 silver badges215 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tim Vermaelen Over a year ago

It was indeed the quotes. Thought I had tried it before but probably not 100% as I did try many things with @, ', " and \".

SLaks · Accepted Answer · 2014-10-29 14:09:55Z

3

You need to make your property return an IHtmlString to tell Razor to not escape it.

First, however, you need to properly escape it yourself, in case the URL has tags or quotes.

answered Oct 29, 2014 at 14:09

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

3 Comments

SLaks Over a year ago

new HtmlString(text)

Tim Vermaelen Over a year ago

It didn't work :s I'll update my answer with what I've tried.

SLaks Over a year ago

@TimVermaelen: How doesn't it work? What happens?

noobed · Accepted Answer · 2014-10-29 14:27:47Z

3

How about the code snippet below?

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

answered Oct 29, 2014 at 14:27

noobed

1,33911 silver badges28 bronze badges

1 Comment

Tim Vermaelen Over a year ago

I really wanted to avoid this kind of tricks, thanks for the attempt tho ^^

Collectives™ on Stack Overflow

Dynamic Html Attribute format in Razor

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related