Question

我有以下问题：

我希望在HTML5网页上有一个可点击的电话号码。通常我会简单地使用

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

但在我的情况下，我从数据库中获取数字并访问数字石灰。

现在代码行看起来像这样：

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

那么，如果号码不是固定号码，如何让href拨打该号码？

如果不清楚，请发表评论，我会添加缺失的信息。

Answer 1

你应该能够这样做：

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

<强>更新

创建一个HtmlHelper扩展方法将允许使用这样的视图：

 @Html.TelephoneLink("00000000000")

或

  @Html.TelephoneLink(item.AD_Tel)

分机代码：

    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());
    }

Answer 2

根据hutchonoid的回答：

    public static MvcHtmlString TelephoneLinkFor<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, object htmlAttributes = null)
    {
        var data = ModelMetadata.FromLambdaExpression(expression, helper.ViewData);            
        var tb = new TagBuilder("a");
        tb.Attributes.Add("href", string.Format("tel:+{0}", data.Model));
        tb.SetInnerText("" + data.Model);
        return new MvcHtmlString(tb.ToString());
    }

用法：@Html.TelephoneLinkFor(model => model.PhoneNumber)

Answer 3

延伸@ john-marston的答案，延伸到@Hutchonoid的那个......

可以通过首先通过正则表达式运行数字来改进帮助程序。这会删除通常添加到电话号码的+，(，)，-或空格。一旦下降到原始数字，就可以添加+，我们也确保它现在是唯一的。

var regEx = new Regex("[^0-9]");
var phoneNumber = regEx.Replace(data.Model.ToString(), "");
tb.Attributes.Add("href", $"tel:+{phoneNumber}");

此外，这是一个 .NET Core版本

using System;
using System.Linq.Expressions;
using System.Text.Encodings.Web;
using System.Text.RegularExpressions;
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.ViewFeatures.Internal;

namespace Microsoft.AspNetCore.Mvc.Rendering
{
    public static class HtmlHelpers
    {
        public static IHtmlContent TelephoneLinkFor<TModel, TValue>(this IHtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression)
        {
            var data = ExpressionMetadataProvider.FromLambdaExpression(expression, helper.ViewData, helper.MetadataProvider);
            var tb = new TagBuilder("a");
            var regEx = new Regex("[^0-9]");
            var phoneNumber = regEx.Replace(data.Model.ToString(), "");
            tb.Attributes.Add("href", $"tel:+{phoneNumber}");
            tb.InnerHtml.Append("" + data.Model);

            var stringWriter = new System.IO.StringWriter();
            tb.WriteTo(stringWriter, HtmlEncoder.Default);
            var tagAsString = stringWriter.ToString();
            return new HtmlContentBuilder().SetHtmlContent(tagAsString);
        }
    }
}

仍然使用@Html.TelephoneLinkFor(x => x.PhoneNumber)

实施

Answer 4

您是否曾尝试将电话号码放在变量中并将其放入href =“HERE”？

Answer 5

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

在Razor中显示HTML 5电话号码链接

5 个答案: