Display HTML 5 Telephone number link in Razor

Question

I have the following question:

I would like to have a click-able telephone-number on my HTML5 Webpage. Normally I would simply use

<a href="tel: +123456789"> 123456789 </a>

But in my case, I get the number from a database and access the number lime this.

By now the code line looks like this:

<a href=""> @Html.DisplayFor(modelItem => item.AD_Tel)</a>

So how do I get the href to call the number, if it isn't a fixed number?

If something is unclear, please leave a comment and I will add missing information.

Answer 1

You should be able to do it like this:

<a href="tel:[email protected]_Tel">@Html.DisplayFor(modelItem => item.AD_Tel)</a>

Update:

Creating an HtmlHelper extension method will allow this to be used your views like this:

 @Html.TelephoneLink("00000000000")

or

  @Html.TelephoneLink(item.AD_Tel)

Extension code:

    public static MvcHtmlString TelephoneLink(this HtmlHelper htmlHelper, string telephoneNumber)
    {
        var tb = new TagBuilder("a");
        tb.Attributes.Add("href", string.Format("tel:+{0}", telephoneNumber));
        tb.SetInnerText(telephoneNumber);
        return new MvcHtmlString(tb.ToString());
    }