How can I do something similar to Html.ActionLink() except place the generated link around an Image instead of just spitting out the link?
Razor (View Engine):
<a href="#Url.Action("ActionName", "ControllerName")">
<img src="#Url.Content("~/Content/img/imgname.jpg")" />
</a>
ASPX (View Engine):
<a href="<%= Url.Action("ActionName", "ControllerName") %>">
<img src="<%= Url.Content("~/Content/img/imgname.jpg") %>" />
</a>
Obviously, if you do this more than once, write a helper for it. And fill in the other attributes of img/a. But this should give you the general idea.
Try something like this:
public static string ActionLinkWithImage(this HtmlHelper html, string imgSrc, string actionName)
{
var urlHelper = new UrlHelper(html.ViewContext.RequestContext);
string imgUrl = urlHelper.Content(imgSrc);
TagBuilder imgTagBuilder = new TagBuilder("img");
imgTagBuilder.MergeAttribute("src", imgUrl);
string img = imgTagBuilder.ToString(TagRenderMode.SelfClosing);
string url = UrlHelper.Action(actionName);
TagBuilder tagBuilder = new TagBuilder("a") {
InnerHtml = img
};
tagBuilder.MergeAttribute("href", url);
return tagBuilder.ToString(TagRenderMode.Normal);
}
Hope this helps
The first answer given by #Craig Stuntz is absolutely perfect but my concern is about if what will you do if you have Ajax.ActionLink instead of Html.ActionLink. Here I will explain easy solutions for both methods. You can do as the following for Html.ActonLink:
#Html.Raw(#Html.ActionLink("[replacetext]", "Index", "Home").ToHtmlString().Replace("[replacetext]", "<img src=\"/Contents/img/logo.png\" ... />"))
same concept can be applied for Ajax.ActionLink
#Html.Raw(#Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/Contents/img/logo.png\" … />"))
so this will be easy for you.
Edit:
ActionLink Image with Style Sheet or Class Name
With Style sheet
#Html.Raw(#Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/assets/img/logo.png\" style=\"width:10%\" ... />"))
With Class Name
<style>
.imgClass {
width:20%
}
#Html.Raw(#Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/assets/img/logo.png\" class=\"imgClass\" ... />"))
For more reference regarding ActionLink around Image visit ActionLink around Image in Asp.net MVC
more easy...
change your code by:
<p class="site-title">#Html.ActionLink(" ", "Index", "Home",
new
{
style = "background: url('" + Url.Content("~/images/logo.png") + "') no-repeat center right; display:block; height:50px;width:50px;"
})</p>
You can use url.content:
#Url.Content("~/images/img/slide.png")
this return relative path
You can create htmlhelper which can return image with link...
As parameters you will pass to htmlhelper values like image path and link and in htmlhelper you will use StringBuilder to format html of that linked image properly...
cheers
Related
How can I do something similar to Html.ActionLink() except place the generated link around an Image instead of just spitting out the link?
Razor (View Engine):
<a href="#Url.Action("ActionName", "ControllerName")">
<img src="#Url.Content("~/Content/img/imgname.jpg")" />
</a>
ASPX (View Engine):
<a href="<%= Url.Action("ActionName", "ControllerName") %>">
<img src="<%= Url.Content("~/Content/img/imgname.jpg") %>" />
</a>
Obviously, if you do this more than once, write a helper for it. And fill in the other attributes of img/a. But this should give you the general idea.
Try something like this:
public static string ActionLinkWithImage(this HtmlHelper html, string imgSrc, string actionName)
{
var urlHelper = new UrlHelper(html.ViewContext.RequestContext);
string imgUrl = urlHelper.Content(imgSrc);
TagBuilder imgTagBuilder = new TagBuilder("img");
imgTagBuilder.MergeAttribute("src", imgUrl);
string img = imgTagBuilder.ToString(TagRenderMode.SelfClosing);
string url = UrlHelper.Action(actionName);
TagBuilder tagBuilder = new TagBuilder("a") {
InnerHtml = img
};
tagBuilder.MergeAttribute("href", url);
return tagBuilder.ToString(TagRenderMode.Normal);
}
Hope this helps
The first answer given by #Craig Stuntz is absolutely perfect but my concern is about if what will you do if you have Ajax.ActionLink instead of Html.ActionLink. Here I will explain easy solutions for both methods. You can do as the following for Html.ActonLink:
#Html.Raw(#Html.ActionLink("[replacetext]", "Index", "Home").ToHtmlString().Replace("[replacetext]", "<img src=\"/Contents/img/logo.png\" ... />"))
same concept can be applied for Ajax.ActionLink
#Html.Raw(#Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/Contents/img/logo.png\" … />"))
so this will be easy for you.
Edit:
ActionLink Image with Style Sheet or Class Name
With Style sheet
#Html.Raw(#Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/assets/img/logo.png\" style=\"width:10%\" ... />"))
With Class Name
<style>
.imgClass {
width:20%
}
#Html.Raw(#Ajax.ActionLink("[replacetext]", "Index", "Home", new AjaxOptions { UpdateTargetId="dvTest"}).ToHtmlString().Replace("[replacetext]", "<img src=\"/assets/img/logo.png\" class=\"imgClass\" ... />"))
For more reference regarding ActionLink around Image visit ActionLink around Image in Asp.net MVC
more easy...
change your code by:
<p class="site-title">#Html.ActionLink(" ", "Index", "Home",
new
{
style = "background: url('" + Url.Content("~/images/logo.png") + "') no-repeat center right; display:block; height:50px;width:50px;"
})</p>
You can use url.content:
#Url.Content("~/images/img/slide.png")
this return relative path
You can create htmlhelper which can return image with link...
As parameters you will pass to htmlhelper values like image path and link and in htmlhelper you will use StringBuilder to format html of that linked image properly...
cheers
How to put image instead text in ActionLink button:
#Html.ActionLink("Edit-link", "Edit", new { id=use.userID })
So how to change text "Edit-link" to image?
Thanks for any idea.
do like this:
<a href="#Url.Action("Edit")" id="#use.userID">
<img src="#Url.Content("~/images/someimage.png")" />
</a>
or pass both action and controller name by using other override:
<a href="#Url.Action("Edit","Controller")" id="#use.userID">
<img src="#Url.Content("~/images/someimage.png")" />
</a>
UPDATE:
You can also create a custom Html Helper, and can reuse it in any View in application:
namespace MyApplication.Helpers
{
public static class CustomHtmlHelepers
{
public static IHtmlString ImageActionLink(this HtmlHelper htmlHelper, string linkText, string action, string controller, object routeValues, object htmlAttributes,string imageSrc)
{
var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
var img = new TagBuilder("img");
img.Attributes.Add("src", VirtualPathUtility.ToAbsolute(imageSrc));
var anchor = new TagBuilder("a") { InnerHtml = img.ToString(TagRenderMode.SelfClosing) };
anchor.Attributes["href"] = urlHelper.Action(action, controller, routeValues);
anchor.MergeAttributes(new RouteValueDictionary(htmlAttributes));
return MvcHtmlString.Create(anchor.ToString());
}
}
}
and use it in View:
#using MyApplication.Helpers;
#Html.ImageActionLink("LinkText","ActionName","ControllerName",null,null,"~/images/untitled.png")
Output HTML:
<a href="/ControllerName/ActionName">
<img src="/images/untitled.png">
</a>
Try this code :
#Html.Raw(#Html.ActionLink("Edit-link","Edit", new { id=use.userID }).ToHtmlString().Replace("Edit-link", "<img src=\"/Contents/img/logo.png\" ... />"))
or
<a href="#Url.Action("Edit Link","Edit",new {id = item.EId })">
<img src="#Url.Content("~/img/iconfinder_new-24_103173.png")" style="height:20px;width:20px;color:blue" title="Edit" />
</a>
Try this code. It will add an image linked to the Edit() action with the id set.
<li class="rtsLI" id="Summary"><span class="rtsTxt">Test</span></li>
Above I am replacing with following actionlink:
<li class="rtsLI" >#Html.ActionLink("test1", "Index", new { Area = "Area1", Controller = "controller1" }, new { #class = "rtsLink rtsTxt"})</li> "
At first css is working fine. But when using Actionlink, css not working. Thanks
The standard ActionLink helper always HTML encodes the link text. This means that you cannot use it if you want to render HTML inside. You have 3 possibilities:
Modify your CSS so that you don't need a span inside the link and so that the rtsTxt class could directly be applied to the link
Write a custom ActionLink helper that doesn't HTML encode the text and which would allow you to generate the same markup:
public static class ActionLinkExtensions
{
public static IHtmlString ActionLinkUnencoded(
this HtmlHelper htmlHelper,
string linkText,
string actionName,
object routeValues,
object htmlAttributes
)
{
var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
var link = new TagBuilder("a");
link.MergeAttributes(new RouteValueDictionary(htmlAttributes));
link.Attributes["href"] = urlHelper.Action(actionName, routeValues);
link.InnerHtml = linkText;
return new HtmlString(link.ToString());
}
}
and then:
<li>
#Html.ActionLinkUnencoded(
"<span class=\"rtsTxt\">User Security</span>",
"index",
new { area = "Tools", controller = "UserSecurity" },
new { #class = "rtsLink" }
)
</li>
Use the Url.Action helper:
<li class="rtsLI">
<a href="#Url.Action("index", new { area = "Tools", controller = "UserSecurity" })" class="rtsLink">
<span class="rtsTxt">User Security</span>
</a>
</li>
Best option will be to use #Url.Action extension method
<li class="rtsLI" id="Summary"><span class="rtsTxt">User Security</span></li>
Write code this way:
<li class="rtsLI" >#Html.ActionLink("<span class='rtsTxt'>User Security</span>", "Index", new { Area = "Tools", Controller = "UserSecurity" }, new { #class = "rtsLink"})</li>`
I have this link in clean HTML. I want to make it into a MVC ActionLink. But how is that possible. I cant understund, seems there is no easy way. OR?
<li class="active"><i class="icon-home icon-large"></i> Dashboard</li>
Any ideas?
You have several options for doing this.
Option 1:
<li class="active"><i class="icon-home icon-large"></i> Dashboard</li>
Option 2:
Write your own extension method for HtmlHelper, that takes in a String/MvcHtmlString and put it into the link tag, without html encoding it.
public static MvcHtmlString SpecialActionLink(this HtmlHelper html, String action, String controller, String innerHtml) {
TagBuilder tag = new TagBuilder("a");
tag.MergeAttribute("href", new UrlHelper(html.ViewContext.RequestContext).Action(action, controller));
tag.InnerHtml = innerHtml;
return new MvcHtmlString(tag.ToString(TagRenderMode.Normal));
}
(Haven't tested it, but should give you an idea on how to do it.)
<li class="active">
#Html.ActionLink("Dashboard", //Title
"Index", // Action
"Home", // Controller
new { #class = "home-icon"} // htmlAttributes
)
</li>
.home-icon{ /*Some CSS to set the background image (not tested) */
padding:16px;
background:transparent url('path-to-image.png') .... ;
}
You Can't use ActionLink. only way is #url.action
<span>This is a test</span>
I'm new to MVC and would like to add a link to something like ~/Destinations/35, where it would refer to the Index view of the Destinations controller, and 35 is the ID of the destination to be displayed.
Neither ActionLink() or RouteLink() appear to allow me to create a link such as this.
Also, I tried something like this:
<table>
#foreach (var d in ViewBag.Results)
{
<tr>
<td>
#Html.ActionLink(
String.Format("<b>{0}</b>", #Html.Encode(d.Title)),
"Details", "Destinations")
</td>
</tr>
}
</table>
But I get the following error on the ActionLink line, which I don't understand.
'System.Web.Mvc.HtmlHelper' has no applicable method named 'ActionLink' but appears to have an extension method by that name. Extension methods cannot be dynamically dispatched. Consider casting the dynamic arguments or calling the extension method without the extension method syntax.
Can someone help me create this link?
The first problem with your code is that you are trying to use HTML in the link text (the <b> tags) which is not possible because by design it always HTML encodes.
So assuming you didn't want HTML in the link you could do this:
#Html.ActionLink(d.Title, "Details", "Destinations", new { id = "35" }, null)
And assuming you need HTML inside the anchor you have a couple of possibilities:
Write a custom ActionLink helper which won't HTML encode the text (recommended) and then use like this:
#Html.MyBoldedActionLink(d.Title, "Details", "Destinations", new { id = "35" }, null)
Something along the lines:
<a href="#Url.Action("Details", "Destinations", new { id = "35" })">
<b>#d.Title</b>
</a>
and since I recommend the first approach here's a sample implementation of the custom helper:
public static class HtmlExtensions
{
public static IHtmlString MyBoldedActionLink(
this HtmlHelper htmlHelper,
string linkText,
string actionName,
string controllerName,
object routeValues,
object htmlAttributes
)
{
var anchor = new TagBuilder("a");
anchor.InnerHtml = string.Format("<b>{0}</b>", htmlHelper.Encode(linkText));
var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
anchor.Attributes["href"] = urlHelper.Action(actionName, controllerName, routeValues);
anchor.MergeAttributes(new RouteValueDictionary(htmlAttributes));
return new HtmlString(anchor.ToString());
}
}