In Mvc 3 razor view what is the best way to conditionally render html based on Nulls in the model

Question

This is I am sure an easy question but I am having trouble figuring this out.

I want to do something like this....

@(string.IsNullOrEmpty(Model.CustomerUrl) ? "" : <a href="@Model.CustomerUrl">Click me</a>)

This snippet doesn't work.

The mixing of the html with the razor syntax and the inclusion of quotes in the attributes of the tags is making it hard to figure out.

I love razor except figuring out this kind of stuff is really tripping me up.

I would love to just not render the following at all if the CustomerUrl was null or empty...

<p class="customerLink links"><a href="@Model.CustomerUrl">@Model.CustomerName</a></p>

EDIT
This is still not working for me...thanks for the suggestion though.

My issue is that the above code is ALREADY in a Razor Code Block. Here is my actual code that I cannot figure out...

EDIT NUMBER TWO - THE following code is now working

    @if (Model.Count() > 0)
    {
        foreach (var partner in Model)
        {
            <li>
                @Html.ActionLink(@partner.CustomerName, "Details", "Customer", new { id = Customer.AID }, null)<br />
                @partner.Street<br />
//this is what i cannot figure out!!
                @if(!string.IsNullOrEmpty(partner.Phone))
                    {
                        @partner.Phone@:<br />
                    }
                @partner.Distance<br />
            </li>
        }
    }

I preceded the nested block (the if) with the @ symbol. Then the markup
I had to delimit with @: Then it worked.

It seems yesterday when I tried to use a nested razor code block I got a compiler error BECAUSE I preceded it with an @. So now I am more confused than ever.

In fact...if I tried to surround my @partner.Phone with quotes like this... "@partner.Phone"@:</ br> I get another compiler error. Razor is great when it works but when it doesn't it is very confusing.

Seth

Solution 1

Don't do an inline if.

@if(!string.IsNullOrEmpty(Model.CustomerUrl))
{
    <a href="@Model.CustomerUrl">Click me</a>
}

'Nuff Said

Solution 2

 @if (Model.Count() > 0)
 {

Presumably before this line you had html display, so to denote to razor you're using code, you need the @ symbol.

    foreach (var partner in Model)
    {

You're within a code block already, so the @ symbol wouldn't work here.

        <li>

By using an html tag, razor realizes you're displaying HTML again. All content within here is assumed to be HTML. If you want to tell Razor you have code within here, you need to use the @ symbol to denote the code.

            @if(!string.IsNullOrEmpty(partner.Phone))
            {
                @partner.Phone@:<br />
            }

This is correct because you need to tell Razor you're using code again. Note if this if was directly ABOVE your list tag, you wouldn't use the @ symbol here, because you don't use the @ symbol when you're already within code.

"@partner.Phone" doesn't work for the same reason

if(something)
    ""

wouldn't work in C#. You're creating an object within code without using it.

Hope that helps explain it.

Solution 3

One of the suggestions that you will find on the Internet regarding conditional output and View is that the two should not be mixed together. If there is something that you need to display based on some condition then you should create an HTML Helper. However, in order to answer your question what you could do (if you don't want to bother with a helper) is something like this:

@if (!String.IsNullOrWhitespace(Model.CustomerUrl))
{
    <p class="customerLink links">
        <a href="@Model.CustomerUrl">@Model.CustomerName</a>
    </p>
}

Comments

[Seth Spearman]

I edited my question. Can you take a look again. What if it is already in a razor code block?

[Thinking Sites]

I'm just seeing this now, months later. This works inside a razor code block too. Just remove the @ from the if statement.

[porcus]

Very nice job of explaining this step by step! For a novice, I think this could be quite useful. I wish more code snippets on SO included commentary like this.

[Igor Mironenko]

I'm not actually sure whether you're suggesting to not use the code you've shown and you're criticizing it as being an "inline if" or whether you're suggesting that the code you've shown is actually the right way to do it... and the "inline if" is somewhere else

[Thinking Sites]

You can use the code shown. The original inline if that OP had suggested wouldn't work. An inline if is the (bool?true:false) syntax. What I was stating here is that the 'if' block statement I presented can work inside another code block as long as you remove the preceding @ symbol before the if.