MVC - RouteLink and Image - asp.net-mvc

I'd like this output:
<a href="\Catalog\Flooring">
<img src="http://site.com/dot.jpg" width="100px" height="100px" alt="" />
<span>Some text here</span>
</a>
using a RouteLink similar to:
<%= Html.RouteLink(myFPV.ProductTypeName, "CatalogType", new { controller = "Catalog", action = "Types", group = myFPV.ProductGroupName, type = myFPV.ProductTypeName })%>
I cannot figure out how to add an <img> and <span> (with text) tags inside my <a> tag.
Make sense?

The first parameter of the RouteLink method is for the link text. But unfortunately, it gets encoded automatically, so you cannot send <, > characters to it. (Well, you can. But they'd get encoded.)
Take a look at this page.
Route values are URL encoded automatically. For example, the string “Hello World!” is
encoded to “Hello%20World!”.
Rendering Image Links
Unfortunately, you can’t use the
Html.ActionLink() helper to render an
image link. Because the
Html.ActionLink() helper HTML encodes
its link text automatically, you
cannot pass an tag to this
method and expect the tag to render as
an image.
Instead, you need to use the
Url.Action() helper to generate the
proper link. Here’s how you can
generate a delete link with an image:
<a href="<%= Url.Action("Delete") %>">
<img src="../../Content/Delete.png" alt="Delete" style="border:0px" />
</a>

I suggest use the Url.RouteUrl.
<a href="#Url.RouteUrl("Default", new { action = "Index", controller = "Department", id = 1 })">
<img src="http://site.com/dot.jpg" width="100px" height="100px" alt="" /> </a>

There is a better option to do that. you should try some thing like
<a href="#Url.RouteUrl("index-lang")">
<img src="~/images/logo.png" alt="">
</a>
where the "index-lang" is the route name in route mapping table.

Related

How to pass any hyperlink or div id to another page in MVC?

here is my code to display images on the page
#foreach (var i in Model)
{
<li>
<a href="#i.Image" class="fancybox" data-fancybox-group="gallery" id="#i.Id">
<img src="#i.Image" alt="" class="img-responsive">
</a>
</li>
}
in this code i want to get the id of clicked image hyperlink on the next page i want to display this image , and some other attributed based on id from database
any suggestions please
You can use the Url.Action helper method to build the url to another action method and pass the image id as a querystring parameter.
<a href="#Url.Action("Details","Image",new {imageId=i.Id})"
class="fancybox" data-fancybox-group="gallery" >
<img src="#i.Image" alt="" class="img-responsive" />
</a>
When razor executes the above code, It will generate markup like this for the a tag.
<a href=/"Image/Details?imageId=123"
Where 123 could the id of the image in your loop iteration.
Assuming you have a Details action method in your ImageController which accepts the image id in a parameter named imageId
public ActionResult Details(int imageId)
{
// imageId param will have the id of the clicked image.
// you can get the details of the image using the id and return something to the view.
// To do : Return something
}

Get anchor tag value when anchor tag is inside for each loop

<c:forEach items="${customer.iscutomer}">
<div>
<i>${customer.customerNumber}. </i>
<li>
${customer.customerName}
</li>
</div>
</c:forEach>
i don't know how to get customer name in Struts2 when user selects any hyerlink(customer name come from customer object).
You can use Struts anchor tag and add parameter to the URL.
<s:a href="url"><s:param name="customerName">${customer.customerName}</s:param>CustomerName</s:a>
Note, that you can use EL in the body of the tag.
May be this can help you to start:
<c:forEach items="${customer.iscutomer}">
<div>
<i>${customer.customerNumber}. </i>
<li>
<s:a name="foo" namespace="bar">
<s:param name="customerName">${customer.customerName}</s:param>
<s:param name="customerNubmber">${customer.customerNumber}</s:param>
</s:a>
</li>
</div>
Please consider I find that the s:a url does not add parameters to link. Now your generated link will be /foo/bar/action?customerName=joe&customerNumber=1
No in your JS you can have:
$('a').bind('click',function(){
var url = ($(this).attr('href'));
var customerName= getURLParameter(url, 'customerName');
var customerNumber= getURLParameter(url, 'customerNumber');
//calling the ajax function
pop(cat, typ)
});
If you want to have ajax calls please have a look at struts 2 jquery plugin.

Set image to Html ActionLink

Html.ActionLink("Edit", "ActionResult", new { CustomerId= DataBinder.Eval(c.DataItem, "CustomerId") }, new { target = "_blank" })
How can i make html.actionlink as image (set image)
Any help will be greatly apreciated.
An ActionLink is, pretty much by definition, a link. The Html.ActionLink method you're calling even accepts the text of the link as its first parameter, so you can expect it to be a text link.
But with slightly more manual HTML, you can create an a tag around an img tag using the same target URL. Just use Url.Action instead of Html.ActionLink. Maybe something like this:
<a href="#Url.Action("ActionName", "ControllerName", new { CustomerId= DataBinder.Eval(c.DataItem, "CustomerId") })" target="_blank">
<img src="yourImage.png" alt="Image Text" />
</a>

In ASP.Net MVC how do you generate facebook links?

In ASP.Net MVC, how do you generate the following link?
<a class="facebook" rel="nofollow" target="_blank" href="http://www.facebook.com/sharer.php?u=HTTP://myreallycoolsite.com/somegroup/somechildgroup/some_title/">some_title</a>
The current page is
HTTP://myreallycoolsite.com/somegroup/somechildgroup/some_title/
and it needs to be used as a parameter of the external link.
Here it is in razor:
#{
// you can inline this instead
var Param = Url.Encode(Url.Action("action", "controller", new{ /*params*/ });
^^^^^
// or for the current page's URL (hat tip #Dismissile)
Param = Url.Encode(Request.Url.ToString());
}
<a class="facebook"
rel="nofollow"
target="_blank"
href="http://www.facebook.com/sharer.php?u=#Param">some_title</a>
^^^^^^
If you're not using Razor, it looks like this (or at least close to this):
<%
// you can inline this instead
var Param = Url.Encode(Url.Action("action", "controller", new{ /*params*/ });
^^^^^
// or for the current page's URL (hat tip #Dismissile)
Param = Url.Encode(Request.Url.ToString());
%>
<a class="facebook"
rel="nofollow"
target="_blank"
href="http://www.facebook.com/sharer.php?u=<%=Param%>">some_title</a>
^^^^^^
Create the link as normal and put #Request.Url.ToString() in it. If you need to dynamically put the some_title text in there then you will need to do one of a few different things. If it is part of the route, then you could pull it from RouteData. If it is the title of your page you could probably use ViewBag.Title. If it is completely arbitrary you might just need to use a regex.
<a class="facebook" rel="nofollow" target="_blank" href="http://www.facebook.com/sharer.php?u=#Request.Url.ToString()">some_title</a>
Try this one
<a href="#"
onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),
'facebook-share-dialog',
'width=626,height=436');
return false;">
Share on Facebook
</a>

ASP.NET MVC images and other static content url

I just edited my route for a user details page to look like this:
routes.MapRoute(
"UserDetails", // Route name
"{controller}/{action}/{id}/{title}", // URL with parameters
new { controller = "Users", action = "Details", id = UrlParameter.Optional, title = UrlParameter.Optional } // Parameter defaults
);
Now when my url looks like this: localhost/Users/Details/1/ShawnMclean
Images do not load both from the controller and the site.master. (no idea why the css and javascript had correct urls though). If the url is localhost/Users/Details/1 then everything loads fine.
My img in site.master and Details.aspx looks like this in the old url:
<img src="../../Content/Images/logo3.png" />
but when the url gets an additional parameter, the image is actually located at ../../../Content/Images/logo3.png
Is there a way to make images and other static content's url change?
Try linking your images like this:
<img src="/Content/Images/logo3.png" />
or if that doesn't work you could always use a helper for your links
<img src="<%= Url.Content("~/Content/Images/logo3.png") %>" />
one other way could be
<img src="#Url.Content("~/Content/Images/logo3.png")" />
You can try using a helper:
<img src='<%= Url.Content( "~/Content/Images/pic.jpg" ) %>' alt="My Image" />
You can try this,
<img src="<%=Url.Content("~/Content/Images/logo.png")%>" alt="logo" title="Logo" />

Resources