8

A similar question was already asked here but the answer did not solve my problem below.

How can I render a string to html? Basically, I need to pass a string to the view that has an "a" tag definition in it. What I want is to render it as an actual html link that is clickable.

View Model (simplified):

public class MyViewModel
{
    public string MyLink { get; set; }
}

In Controller (simplified):

public IActionResult Index()
{
    MyViewModel model = new MyViewModel();

    model.MyLink = "<a href="http://www.google.com">http://www.google.com</a>"

    return View(model);
}

In View (at first line): 

@model MyNamespace.ViewModel.MyViewModel

Then below, these html markups (1st lines after the numbers) displays the results (2nd lines). But none of them are actual links that you can click on.

1
@Model.MyLink
<a href="http://www.google.com">http://www.google.com</a>

2
<pre>@Html.Raw(@Model.MyLink)</pre>
<a href="http://www.google.com">http://www.google.com</a>

3
@Html.Encode(@Html.Raw(@Model.MyLink))
&amp;lt;a href=&amp;quot;http://www.google.com&amp;quot;&amp;gt;http://www.google.com&amp;lt;/a&amp;gt;

4 
@Html.Encode(@Model.MyLink)
result same as #3.

Any help will be appreciated. Thanks in advance.

Community
  • 1
  • 1
niki b
  • 989
  • 3
  • 10
  • 30
  • Depends on what you mean by "pass a string to the view". Your method uses an IActionResult and should be returning a view. If you don't want to return a view then you may want to use a json response back to an ajax call, then use jQuery to append the new html. – nurdyguy Jun 01 '16 at 20:21
  • Sorry to not be clear. The method is returning a view (model). This is what I am using in the view (@Model). I would edit my question if I can only figure out how lol. – niki b Jun 01 '16 at 20:24
  • Well, the *recommended* thing to do is just pass the data via the model and have the view itself render the html. But, you could pass the string into a javascript variable and then use jQuery to add it to the DOM. I really don't recommend this but it would technically work. – nurdyguy Jun 01 '16 at 20:26
  • I've updated my question to make it clear what the controller is returning to the view. Can you please include an example of what you are suggesting regarding the jQuery? – niki b Jun 01 '16 at 20:30
  • Inside of some – nurdyguy Jun 01 '16 at 20:33
  • I tried it, but it resulted to the same result as #1. It still did not render as an actual link. – niki b Jun 01 '16 at 20:38
  • Can you use the actual characters < instead of the url encoded versions? – nurdyguy Jun 01 '16 at 20:40
  • I'm open for the better solutions! How would I do this then "You should have the razor create it instead."? – niki b Jun 01 '16 at 20:41
  • Try the decodeURI() javascript function. http://www.w3schools.com/jsref/jsref_decodeuri.asp – nurdyguy Jun 01 '16 at 20:42
  • That data is coming from the database. I can probably replace the string to use the actual characters, but it is trickier as I may not catch everything that needs to be replaced. – niki b Jun 01 '16 at 20:43
  • I used the decodeURI but it produced the same result as #1. var myAnchor = "@Model.MyLink"; $('#MyDiv').append(decodeURI(myAnchor)); – niki b Jun 01 '16 at 20:48
  • Try #2 using what is talked about here: http://forums.asp.net/t/1108363.aspx?unescape+decodeURI+Javascript+equivalent+in+NET Also try using this in the controller before you save the variable onto the model. Some combination of that should work. – nurdyguy Jun 01 '16 at 20:50
  • Possible duplicate of [How to render HTML string in ASP.NET MVC?](http://stackoverflow.com/questions/15548797/how-to-render-html-string-in-asp-net-mvc) – emerson.marini Jun 01 '16 at 20:53
  • @nurdyguy. I cannot add a comment to your answer below, so I will just put my comment here ==> Oh okay, this is what you meant. I really cannot do this because the string from the database is not the link value itself but the entire html element for the anchor tag. I probably can parse it, which might also not be a good way, so I can take advantage of the razor engine. But I want to see first if there is a way I can just render the string as an actual html element. – niki b Jun 01 '16 at 20:54
  • @MelanciaUK. I saw that question. But as you can see above, the answer to that question with using Html.raw did not work for my case. – niki b Jun 01 '16 at 20:56
  • @MelanciaUK. I've updated my question so it will link to the question you listed and to clarify that the answer there did not solve my problem. Please remove the downvote. – niki b Jun 01 '16 at 21:06
  • I voted to close the question as a duplicate. It doesn't mean I've downvoted it. Votes are anonymous by the way. – emerson.marini Jun 01 '16 at 21:08
  • @nurdyguy. I'm new to MVC so do not know exactly yet how to make the "Microsoft.JScript.GlobalObject" for decodeURI accessible in the controller. I'll add comments here as soon as I have something to work. Thanks for your tips! – niki b Jun 01 '16 at 21:08
  • @MelanciaUK. Okay, gotcha. – niki b Jun 01 '16 at 21:09
  • To the person who downvoted the question, can you please explain why? At least I would know why for next time I will ask another question. – niki b Jun 01 '16 at 21:10
  • Use HttpUtility.HtmlDecode(url); in the controller and then Html.Raw in the view. I got that working on my local test. – nurdyguy Jun 01 '16 at 21:11
  • [Writing/outputting HTML strings unescaped](http://stackoverflow.com/questions/4281424/writing-outputting-html-strings-unescaped) – emerson.marini Jun 01 '16 at 21:14
  • [Rendering HTML as HTML in Razor](http://www.mikepope.com/blog/displayblog.aspx?permalink=2218) – emerson.marini Jun 01 '16 at 21:15
  • Okay, I will try to figure out first how I can make "HttpUtility" accessible to the controller. I tried adding "using System.Web" but that did not work. – niki b Jun 01 '16 at 21:16

1 Answers1

15

In the controller use 

model.MyLink = HttpUtility.HtmlDecode(url);

then in the view use 

@Html.Raw(Model.MyLink)

The first converts it to use

nurdyguy
  • 2,876
  • 3
  • 25
  • 32
  • Thanks for pointing me to the right direction! It looks like the WebUtility.HtmlDecode is the equivalent of HttpUtility.HtmlDecode for MVC 6 (or ASP.NET Core) RC1. This is what worked for me: In Controller => model.MyLink = WebUtility.HtmlDecode(model.MyLink); and in View => @Html.Raw(@Model.MyLink) – niki b Jun 01 '16 at 21:49
  • Awesome, glad you got it working! Sorry for all of the extra drawn-out comments. I misunderstood the original question so at first I was way off but at least we got it done in the end. – nurdyguy Jun 01 '16 at 21:53
  • No problem. I probably also should have made it more clear. In the end, it was your solution that solved it! Thanks again. – niki b Jun 01 '16 at 21:55