how to make html.actionlink without text but with image inside - html

it is simple html:
<%--
<a href="?language=de">
<img src="/Images/Company/de.png" alt="Webseite auf Deutsch" style="border: 0;" />
</a>
--%>
i would like to make from them html.actionlink:
<%= Html.ActionLink("", "ChangeCulture", "Account", new { lang = "de", returnUrl = this.Request.RawUrl }, new { #style = "background-image: url(/Images/Company/de.png)", #class = "languageLink" }) %>
I would like to have my link without text. it doesn't work, null in a first parameter its not allowed. image is to short as normal. how can i use html.actionlink without text but with image??

Here is a solution.
<a href="<%= Url.RouteUrl("MyRoute", new { id = Model.Id }) %>">
<img src="myimage.png" alt="My Image" />.
</a>
Essentially, ActionLink is for text links and there isn't an equivalent for images, but you can use Url.RouteUrl to get the address for the link and put any HTML code you like inside of the anchor (W3C permitting of course).

This way is easiest (using Razor):
<img src="myimage.png" alt="My Image" />

based on a previous SO question (that was closed), here's a solution:
public static string ImageLink(this HtmlHelper htmlHelper,
string imgSrc, string alt,
string actionName, string controllerName, object routeValues,
object htmlAttributes, object imgHtmlAttributes)
{
UrlHelper urlHelper = ((Controller)htmlHelper.ViewContext.Controller).Url;
string imgtag = htmlHelper.Image(imgSrc, alt, imgHtmlAttributes);
string url = urlHelper.Action(actionName, controllerName, routeValues);
TagBuilder imglink = new TagBuilder("a");
imglink.MergeAttribute("href", url);
imglink.InnerHtml = imgtag;
imglink.MergeAttributes(new RouteValueDictionary(htmlAttributes), true);
return imglink.ToString();
}
the orignal can be found here: Is there an ASP.NET MVC HtmlHelper for image links?

Here is my humble contribution, using Razor (as an example) for when a Font Awsome character is used as an image:
<p>
#Html.ActionLink(" ", "Create", "RouteName", new { id = Model.ID }, new { #class = "fas fa-plus text-center" })
</p>
The character in between the two quotes is alt+255 (hit the ALT key, then key-in 255 on the num keyboard, then release the ALT key).
Indeed, neither "" nor " " nor string.Empty work with ActionLink, but alt-255 does. This is a very old trick (from the DOS days) to display a hidden blank character. So far I have not encountered any problems with this trick.

Related

React + Next js: Cross json values in component

first I'd like to thank you for your time trying to help. I am a designer and I suck at developing stuff, so I have no other option than to scream for help.
So this is the situation:
I was asked to add an image (country flag) that's gonna be dynamic, in an element that fetches info from a JSON file with, among others, Resorts (one of the elements being its country's long name, i.e. Australia) and Countries (by long name and shortcode, i.e. Australia, au).
I need to get the country shortcode printed in the img src, but the resort array is only containing its long name.
The code:
This is the way the JSON file presents the information:
{
"Countries":[
{"name":"Australia",
"code":"au",
"continent_code":"oc",
"slug":"australia"}],
"Continents":[
{"name":"Oceania",
"code":"oc",
"slug":"oceania"}],
"Resorts":[{
"id":"1",
"resort_name":"Resort Name",
"encoded_name":"resort-name",
...
"country":"Australia",
...}]
}
And this is my file bit:
const DesktopResort = ({resort}) => (
<Link href="/resort/[resort]" as={`/resort/${resort.encoded_name}`}>
<a target='_blank' className='resort-item'>
<div className="resort">
<div className="top">
<div className="title">{resort.resort_name}</div>
<img className="logo" src="/assets/img/resort-logo-sample.png" />
<span className="info">{`${resort.ski_network} - ${resort.region}`}</span>
// Down below is the "dynamic" file call
<img className="flag-icon" src={`/assets/img/flags/${resort.country}.svg`} />
</div>
<div className="arrow"><img src="/assets/img/arrow-link.png" /></div>
</div>
</a>
</Link>
)
I know its badly done right now, for this australian resort my image src is /assets/img/flags/Australia.svg and what I would need to print is of course /assets/img/flags/au.svg
How would you do it?
Thanks again!
I'd write a little helper function to look up a country code based on the country name.
Note: you'll need to handle what should happen if the country is not found, or the code is not there. I'm just defaulting to an empty string here.
const countryCode = name => {
const country = yourData.Countries.find(country => country.name === name);
return country && country.code || '';
};
Then use this when you're passing the src to your img.
<img
className="flag-icon"
src={`/assets/img/flags/${countryCode(resort.country)}.svg`}
/>

How can I add a caret to text passed to #Html.ActionLink in MVC5

I want to display
Username v
as the text displayed for the link.
I wanted to use <class = "caret"> but I can't pass it successfully and the HTML code is being printed next to Username.
In most cases the Html.ActionLink will do the trick, if you want more control over the href tag you can use #Url.Action.
Examples:
#Html.ActionLink(Model.Username, "Username", "Account", new { #class = "caret" })
HTML Result: <a class="caret" href="/Account/Username">SomeUsername</a>
<a class="caret" href="#Url.Action("Username", "Account")">#Model.Username</a>
HTML Result: <a class="caret" href="/Account/Username">SomeUsername</a>

Load html from returned string

I have the string and its returning function in the code-behind:
string xmlContents = "<ul><li>Installation<br /><ul><li>Startup</li><li>Getting there</li><li>Steps</li>" +
"<li>Pictures</li></ul></li><li>Usage<br /><ul><li>Tilbud pane</li><li>Report pane</li>" +
"</ul></li></ul>";
public String returnXml()
{
return xmlContents;
}
Then I call it in the aspx file:
<div id="treeviewMenu">
<%returnXml(); %>
</div>
When I simply write the html code (of the list) directly in the div - it's ok. But by passing the string - it doesn't work.
What am I doing wrong and how to fix it ?
Note: = sign whithout ; sign
Replace with this code:
<div id="treeviewMenu">
<%=returnXml() %>
</div
You can easily assign html to div by making div server accessible by adding runat="server"
HTML
<div id="treeviewMenu" runat="server"></div>
In code behind
treeviewMenu.InnerHTML = xmlContents;

If statement in HTML

Hello i have list of products this my html
<telerik:RadListBox ID="RadListBox1" runat="server" DataSourceID="LinqDataSourceCategories" Height="200px" Width="250px" CssClass="ui-droppable" >
<EmptyMessageTemplate>
No records to display.
</EmptyMessageTemplate>
<ItemTemplate >
<div class="ui-draggable ui-state-default" data-shortid="<%#Eval("ID")%>">
<em>Active : </em><span><%# Eval("LoadProduct") %></span><br />
<em>ProductId: </em><span><%# Eval("ProductId") %></span><br />
</div>
</ItemTemplate>
</telerik:RadListBox>
I have Active that is say if LoadProduct true or false
in client it look like this
<em>Acrive : </em>
<span>False</span>
<br>
<em>ProductId: </em>
<span>101-01-056-02</span>
<br>
<em>ShortID: </em>
<span class="ShortID" data-shortid="0">0</span>
<br>
I want to replace text with img ,i need to check if <%# Eval("LoadProduct") %> ==true put img scr=/green.png/ else img scr=/red.png/ that clien will look like this
<em>Acrive : </em>
<span><img src='green.jpg'/></span>
<br>
<em>ProductId: </em>
<span>101-01-056-02</span>
<br>
<em>ShortID: </em>
<span class="ShortID" data-shortid="0">0</span>
<br>
Sow how it can be done?
To add if statement to HTML,
or to catch event that building all elements and there check if LoadProduct==true and append html to item?
try this
<em>Active : </em><span><%# Convert.ToBoolean(Eval("LoadProduct")) ? "<img src='green.jpg'/>" : "<img src='red.jpg'/>"%></span><br />
Come to think of it, I don't really like the idea of back-end conditionals in front-end.
Code-behind is one thing and frontside is the other - it's not a good idea to mix it if it isn't inevitable.
The purest way to get that would be to set the variable (or a function, in your case) in code-behind and just to show it in front-end, like:
Code behind:
protected string GreenOrRed(bool isLoadProduct)
{
return isLoadProduct ? "green" : "red";
}
(the function or variable has to be at least protected in order to be accessible in aspx page, because the aspx page is the derivative from base class of aspx.cs )
front-end:
<span><img src='<%# GreenOrRed((bool)Eval("LoadProduct")) %>.jpg'/></span>
After that, remeber to add
this.DataBind();
in your Page_Load() function.
Let the code-behind decide, let the front-end only show the result.
<%
if((bool)Eval("LoadProduct") == true)
{
Response.Write("src='green.jpg'");
}
else Response.Write("src='red.jpg'");
%>
Try this
<img src='<%# (bool)Eval("LoadProduct") ? "green.jpg" : "red.jpg" %>'/>

How do I a embed a variable css style in a VB.NET xml string literal?

I would like to add a variable data to a string literal WITHIN the HTML tag
Dim locationOfImage as string = "http://blahblah......"
Dim xmlString = _
<div style="background:url(" <%= locationOfImage %> ")">
<h3>Some text</h3>
</div>
The above does not work, I can't quickly determine how to do this? Is this possible. I could achieve what I am attempting to do with a StringBuilder but want to use the xml literal if possible.
<div style="<%= String.Format("background:url('{0}')", locationOfImage) %>">