I have a tag and I'm using Razor syntax. Im using the @url.Action html helper to pass a parameter to a method on a controller to retrieve the picture. But I want to have this picture as a link so when the user click the picture it would go to the controller and open a different view. So I tried the both ways show below but it's telling me that it's missing a "}" for "Tryone". And for "Trytwo" its not giving me any errors but it does not show me the picture as a link. Any ideas of the wright way to do this?
tryone
@foreach (var p in Model)
{
<a href= "@Url.Action("Index","Home")>
<img width="50" height="50"
src= "@Url.Action("GetImage", "Sells", new {p.ItemID })" />
</a>
}
trytwo
@foreach (var p in Model)
{
<img href="@Url.Action("Index","Home")" width="50" height="50"
src= "@Url.Action("GetImage", "Sells", new {p.ItemID })" />
}
An issue with your first attempt is that the href
attribute is missing a closing quotation mark before the ending angle brace.
@foreach (var p in Model)
{
<a href= "@Url.Action("Index","Home")">
<img width="50" height="50"
src= "@Url.Action("GetImage", "Sells", new {p.ItemID })" />
</a>
}
trytwo is not working because img
does not support href
attribute.
Use your first approach with correct syntax - add quote (") at the end of href
value.
I would recommend that you extend HtmlHelper
.
Something like this:
public static class HtmlHelperExtensions
{
public static MvcHtmlString ActionImageLink(this HtmlHelper helper, string controller, string action, object parameters, object linkHtmlAttributes, string src, object imageHtmlAttributes)
{
var urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
var url = String.IsNullOrWhiteSpace(controller) ? action : urlHelper.Action(action, controller, parameters);
var imgTagBuilder = new TagBuilder("img");
var imgUrl = urlHelper.Content(src);
imgTagBuilder.MergeAttribute("src", imgUrl);
if (imageHtmlAttributes != null)
{
var props = imageHtmlAttributes.GetType().GetProperties();
props.ToList().ForEach(prop => { imgTagBuilder.MergeAttribute(
prop.Name,
imageHtmlAttributes.GetType().GetProperty(prop.Name).GetValue(imageHtmlAttributes, null) as String);
});
}
var image = imgTagBuilder.ToString(TagRenderMode.SelfClosing);
var aTagBuilder = new TagBuilder("a");
aTagBuilder.MergeAttribute("href", url);
if (linkHtmlAttributes != null)
{
var props = linkHtmlAttributes.GetType().GetProperties();
props.ToList().ForEach(prop =>
{
aTagBuilder.MergeAttribute(
prop.Name,
linkHtmlAttributes.GetType().GetProperty(prop.Name).GetValue(linkHtmlAttributes, null) as String);
});
}
aTagBuilder.InnerHtml = image;
return MvcHtmlString.Create(aTagBuilder.ToString());
}}
Then you can use it in your cshtml page:
@Html.ActionImageLink("Controller", "action/url", null, null, Url.Content("image/location"), null)
remember to create a reference to your extension class.
References:
Extending HtmlHelpers: http://www.codeproject.com/Tips/720515/Custom-HTML-Helper-for-MVC-Application
Extension Methods: https://msdn.microsoft.com/en-us/library/bb383977.aspx
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.