Question

I’ve got a real simple ASP.NET MVC4 app that uses JQuery Mobile and displays a list of users and their information. 3 fields off the model are phone numbers. These fields can contain a null value, so I’d like to link the phone number using <a href="tel:" if it exists, and nothing if not. I came up with this:

<div data-role="fieldcontain">
    <label for="textinput1"><strong>Office Phone:</strong></label>
    if(!@String.IsNullOrEmpty(user.OfficePhone)){
        <a href="tel:@user.OfficePhone"><input name="" id="textinput1" value="@user.OfficePhone" type="text" readonly="true"/></a>
    } else {
        <input name="" id="textinput" value="@user.OfficePhone" type="text" readonly="true"/>
    }
</div>

But would think there’s a cleaner, better way to do this. Are there any other options or am I stuck with writing out the <input> tag twice in both conditions?

Answer 1

This is untested code. Hopefully it gets the idea across:

@{string pref="tel:"}
@if(String.IsNullOrEmpty(user.OfficePhone))
{pref="";
}


<div data-role="fieldcontain">
    <label for="textinput1"><strong>Office Phone:</strong></label>
        <a href="@(pref):@(user.OfficePhone)"><input name="" id="textinput1" value="@(pref)@(user.OfficePhone)" type="text" readonly="true"/></a>
</div>