How do I conditionally show a field in ASP.NET MVC Razor?

Question

I am very new to C# and ASP.NET MVC Razor. I want to show a field in my view if the field is not blank.

Code

<tr class="hide" id="trPhone2">
            <td class="editor-label">
                @Html.LabelFor(model => model.phone2)
            </td>
            <td>
                @Html.EditorFor(model => model.phone2)
            </td>
            <td>
                @Html.ValidationMessageFor(model => model.phone2)
            </td>
        </tr>

Now, I want to output that first <tr> line if the model.phone2 is "" and else output:

<tr id="trPhone2">

How do I do this using ASP.NET MVC Razor?

gwin003 · Accepted Answer · 2013-05-29 12:43:32Z

10

The syntax might not be perfect, but try this:

    @{ 
        var trClass = string.IsNullOrEmpty(Model.phone2) ? "hide" : ""; 
    }

    <tr class="@trClass" id="trPhone2">
        <td class="editor-label">
            @Html.LabelFor(model => model.phone2)
        </td>
        <td>
            @Html.EditorFor(model => model.phone2)
        </td>
        <td>
            @Html.ValidationMessageFor(model => model.phone2)
        </td>
    </tr>

answered May 29, 2013 at 12:43

gwin003

8,1626 gold badges41 silver badges60 bronze badges

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

1 Comment

Lucas Over a year ago

works like a charm! You can also do it like

@Html.ActionLink(" ", "action", "controller", new { id = id }, new { @class = "btn btn-default btn_details " + @trClass })

Andrei · Accepted Answer · 2013-05-29 12:42:46Z

8

@if (string.IsNullOrEmpty(Model.phone2))
{
    <tr class="hide" id="trPhone2">
}
else
{
    <tr id="trPhone2">
}

answered May 29, 2013 at 12:42

Andrei

56.8k10 gold badges92 silver badges114 bronze badges

6 Comments

dmikester1 Over a year ago

This looked nice and simple but it was throwing errors in my code. I think because I was mixing c# in with html.

Andrei Over a year ago

@dmikester1, show us your code, I believe the error can be easily fixed

dmikester1 Over a year ago

I ended up using one of the other answers. Thanks

dmikester1 Over a year ago

I pasted your code right in between my other HTML and it was saying there were two id's with trPhone2 and there was 2 open < tr > blocks.

Andrei Over a year ago

@dmikester1, you should have replaced the first line with the snippet above. Otherwise the snippet was inserting one <tr> tag and the first line of our code was inserting another one - seems like that was the problem. Anyway, its good to know you have found a solution.

|

Murtuza Kabul · Accepted Answer · 2013-05-29 12:43:46Z

Simply wrap this field in if condition

@if (Model.phone2=="")
{
    <tr class="hide" id="trPhone2">
}
else
{
    <tr id="trPhone2">
}
            <td class="editor-label">
                @Html.LabelFor(model => model.phone2)
            </td>
            <td>
                @Html.EditorFor(model => model.phone2)
            </td>
            <td>
                @Html.ValidationMessageFor(model => model.phone2)
            </td>
        </tr>

alternatively, you can simply skip the entire rendering of field like this

@if (Model.phone2!="")
{

    <tr id="trPhone2">
        <td class="editor-label">
                @Html.LabelFor(model => model.phone2)
            </td>
            <td>
                @Html.EditorFor(model => model.phone2)
            </td>
            <td>
                @Html.ValidationMessageFor(model => model.phone2)
            </td>
        </tr>
}

Which is a better approach as it removes the field entirely from the dom object so removes any possibility of being edited later.

SWeko · Accepted Answer · 2013-05-29 12:45:39Z

1

I would calculate the class name in a code block and output that. Something along the lines of:

@{
   var phone2ClassName = string.IsNullOrWhiteSpace(Model.phone2) ? "hide" : string.Empty;
}

<tr class="@phone2ClassName" id="trPhone2">
...

answered May 29, 2013 at 12:45

SWeko

30.9k11 gold badges74 silver badges107 bronze badges

Comments

Ali Adravi · Accepted Answer · 2014-09-30 14:02:38Z

0

If it is very complicated logic then use like this:

var trId = "";
if(Model[i].FeeType == (int)FeeTypeEnum.LateFee  
    || Model[i].FeeType == (int)FeeTypeEnum.WaivedFee)
{        
    trId=String.Format("{0}_{1}", @Model[i].ProductId, @Model[i].FeeType);
}
else
{
   trId = @Model[i].ProductId.ToString();
}  


<tr id="@trId" >

answered Sep 30, 2014 at 14:02

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

Collectives™ on Stack Overflow

How do I conditionally show a field in ASP.NET MVC Razor?

Code

5 Answers 5

1 Comment

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Code

5 Answers 5

1 Comment

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related