Turn bank information into a Link
I am making a site in which brings a string from the bank but I want this string to be informed as follows, instead of it will appear a button that the user will click and this button will open the url that is the text that ta in the string that in the case is the Download Link.
<dt>
@Html.DisplayNameFor(model => model.Link)
</dt>
<dd>
@Html.DisplayFor(modelItem => item.Link)
</dd>
Here I bring the string item to appear on the screen, but I want it to be a button that opens the URL that is itself.
2 answers
You can use the component called Html.ValueFor, it returns the value contained in the attribute called Inside the href, and then stylize the <a> (if you want you can use my css). That is, imagining that your string is a link of the same type "www.google.com", just put this in your View by swapping "click here" for the text of your button.
<a class="button-style" href="@Html.ValueFor(m => m.Link)">Clique aqui</a>
CSS style for button:
.button-style {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
The simplest way to do this is to use tag <a> by passing its url from the model to the attribute href. You can also use Bootstrap classes to style your button.
<a href="http://@modelItem.Link" class="btn btn-primary">Site</a>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<a href="http://www.google.com.br" class="btn btn-primary">Site</a>If you want to use Razor you can create your own helper.
public static class LinkHelper
{
public static string ExternalLink(this HtmlHelper helper, string url, string text)
{
return String.Format("<a href='http://{0}' target="_blank" class="btn btn-primary">{1}</a>", url, text);
}
}
Using Help.
@Html.ExternalLink("www.google.com", "Google")
Source: https://www.codeproject.com/Questions/864248/How-can-I-add-links-to-external-web-sites-in-mvc