How to get links to URLs in text in ASP.NET MVC 4 with Razor syntax?

Question

I have a model with a text field. The text can contain several URLs. It does not have to contain URLs and it does not have a specific format.

Using

@Html.DisplayFor(model => model.TextWithSomeUrls)

the text and the URLs are displayed like normal text of course. I would like to get the URLs displayed as working individual links though. Is there a helper method for this in ASP.NET / Razor?

Edit: Right now the output is:

http://www.google.com, foo: bar;  http://www.yahoo.com

Which is exactly the content of the text field.

But I want to get the URLs and only the URLs rendered as links like this:

<a href="http://www.google.com">http://www.google.com</a>, foo: bar; <a href="http://www.yahoo.com">http://www.yahoo.com</a>

My solution:

public static partial class HtmlExtensions
{
    private const string urlRegEx = @"((http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?)";

    public static MvcHtmlString DisplayWithLinksFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
    {
        string content = GetContent<TModel, TProperty>(htmlHelper, expression);
        string result = ReplaceUrlsWithLinks(content);
        return MvcHtmlString.Create(result);
    }

    private static string ReplaceUrlsWithLinks(string input)
    {
        Regex rx = new Regex(urlRegEx);
        string result = rx.Replace(input, delegate(Match match)
        {
            string url = match.ToString();
            return String.Format("<a href=\"{0}\">{0}</a>", url);
        });
        return result;
    }

    private static string GetContent<TModel, TProperty>(HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
    {
        Func<TModel, TProperty> func = expression.Compile();
        return func(htmlHelper.ViewData.Model).ToString();
    }
}

This extension can now be used in views:

@Html.DisplayWithLinksFor(model => model.FooBar)

While that solution correctly replaces URL with links, it does not HTML-encode the contents of the field. — DasKrümelmonster
– DasKrümelmonster, Commented Sep 9, 2014 at 13:56

DasKrümelmonster · Accepted Answer · 2014-09-12 15:17:33Z

I had some issues with the solution:

It did not work for hostnames without dots, like localhost or any other LAN-URL
It did not work for URLs with spaces (minor issue)
It did not encode all the rest of my data. So if there is "< !--" in the database, the page would become truncated.
The URI is not escaped

I used the code from above, extended it a bit and ended up with this:

private static readonly Regex urlRegEx = new Regex(@"(?<!="")((http|ftp|https|file):\/\/[\d\w\-_]+(\.[\w\-_]+)*([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?)");
private static readonly Regex quotedUrlRegEx = new Regex(@"(?<!=)([""']|&quot;|&#39;)((http|ftp|https|file):\/\/[\d\w\-_]+(\.[\w\-_]+)*([\w\-\.,@?^=%&amp;:/~\+# ])*)\1");

public static MvcHtmlString DisplayWithLinksFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper,
    Expression<Func<TModel, TProperty>> expression,
    string templateName = null)
{
    var encodedHTML = htmlHelper.DisplayFor(expression, templateName);
    return MvcHtmlString.Create(ReplaceUrlsWithLinks(encodedHTML.ToHtmlString()));
}
private static string ReplaceUrlsWithLinks(string input)
{
    input = input.Replace(@"\\", @"file://").Replace('\\', '/');
    var result = quotedUrlRegEx.Replace(input, delegate(Match match)
    {
        string url = match.Groups[2].Value;
        return String.Format("<a href=\"{0}\">{1}</a>", Uri.EscapeUriString(url), ShortenURL(url));
    });
    return urlRegEx.Replace(result, delegate(Match match)
    {
        string url = match.ToString();
        return String.Format("<a href=\"{0}\">{1}</a>", Uri.EscapeUriString(url), ShortenURL(url));
    });
}
private static string ShortenURL(string url)
{
    url = url.Substring(url.IndexOf("//", StringComparison.Ordinal) + 2);
    if (url.Length < 60)
        return url;
    var host = url.Substring(0, url.IndexOf("/", StringComparison.Ordinal));
    return host + "/&hellip;";
}

Obviously not 100% tested for all URL schemes, but seems to work alright.

Example Input:

"\\02lanpc\abc\def\Bugs in the database.docx"
http://localhost:81/applications/2/?releaseNumber=1.1&buildNumber=2

Output:

<a href="file://02lanpc/abc/def/Bugs%20in%20the%20database.docx">02lanpc/abc/def/Bugs in the database.docx</a>

<a href="http://localhost:81/applications/2/?releaseNumber=1.1&amp;buildNumber=2">localhost:81/&hellip;</a>

Alex · Accepted Answer · 2013-10-07 09:26:50Z

2

There is no helper like that, but you can create your own custom helper or create a template for DisplayFor helper, which will contain logic you need.

answered Oct 7, 2013 at 9:26

Alex

1,7071 gold badge12 silver badges6 bronze badges

Comments

Flea777 · Accepted Answer · 2013-10-07 09:35:40Z

1

Try to write your own Html Helper, like the following.

public static string Urls(this HtmlHelper helper, string value)
{  
    var items = value.Split(';'); // use your delimiter
    var sb = new StringBuilder();
    foreach(var i in items)
    {
        if(IsUrl(i)) // write a static method that checks if the value is a valid url
            sb.Append("<a href=\"" + i + "\">" + i + "</a>,");
        else
            sb.Append(i + ",");
    }
    return sb.ToString();
}

And use like that

@Html.Urls(myValue)

edited Oct 7, 2013 at 9:35

answered Oct 7, 2013 at 9:30

Flea777

1,0229 silver badges21 bronze badges

2 Comments

Jan Deinhard Over a year ago

It's a normal text. I can't enforce a fomat like CSV. But thanks for the Html Helper hint. I guess that's the way to go.

Flea777 Over a year ago

Glad to have been helpful. However, inside your helper you could use a RegEx to replace every url with an html anchor. It should be ok also with simple and unstructured text.

SanketS · Accepted Answer · 2013-10-07 09:29:02Z

-2

You may use @Html.Action(actionName) if text contains mvc URL.

answered Oct 7, 2013 at 9:29

SanketS

9731 gold badge13 silver badges36 bronze badges

2 Comments

Jan Deinhard Over a year ago

There can be several URLs in the text. I want to have individual links for each URL.

SanketS Over a year ago

you can try normal anchor tag <a></a> instead of HTML helper.

Collectives™ on Stack Overflow

How to get links to URLs in text in ASP.NET MVC 4 with Razor syntax?

4 Answers 4

Comments

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related