Convert an HTML button to ActionLink
-
12-09-2019 - |
Question
I have an html button setup and functioning with a set range of required properties that I'd like to convert to a text-based link instead. Additionally, so I can familiarize myself with working html helpers and intellesense I'd like to see how to shoehorn these properties into an ActionLink:
<input type="button" id="RemoveRegistration_Submit<%=row.ID %>"
value="Remove From Cart"
onclick="$('#Step2_RemoveRegistrationForm input[name=id]').val('<%=row.ID %>'); $('#Step2_RemoveRegistrationForm').submit();"
align="right" />
thx
Solution
It shouldn't be that hard....but I think you mean Html.Link because ActionLink mean you need to generate link from route table.
<%= Html.Link("Remove from Cart", "#", new {onclick = "#Step2_RemoveRegistrationForm input[name=id]').val('<%=row.ID %>'); $('#Step2_RemoveRegistrationForm').submit();"}) %>
- param#1: linkText
- param#2: href
param#3: htmlAttributes
public static string Link(this HtmlHelper htmlHelper, string linkText, string href, object htmlAttributes) {
TagBuilder tagBuilder = new TagBuilder("a"){ InnerHtml = linkText; }
tagBuilder.MergeAttributes(htmlAttributes);
tagBuilder.MergeAttributes("href", href);
return tagBuilder.ToString(TagRenderMode.Normal);
}
and don't forget to <%@ Import Namespace="xxxxxx" %> on the view in order to use the extension method.
OTHER TIPS
Buttons can't act like links without javascript.
In general - that's a bad practice (search engines can't index your page correctly etc.).
I would recommend you to use anchor tags and make them look like a buttons.
But if you truly need it - this article provides an answer.
EDIT:
Sorry. Shot my answer little bit too fast.
This isn't exactly what you are asking (HtmlHelper is not involved) but that's how I would solve this problem:
in view i would define anchor (anchors without hrefs do pass W3 validation):
<a id='removefromcart_<%=row.ID%>' title='Remove from cart'
class='remove-link' />
in external javascript file:
var onclick = function(event){
event.preventDefault();
var link = $(event.targetSource());
//tag ids should be injected through view asp/cx
$('#Step2_RemoveRegistrationForm input[name=id]')
.val(link.attr('id').split('_')[1])
};
$('a[id^=removefromcart]').click(onclick);
in css:
a {cursor:pointer;} /*anchors without href by default haven't pointer*/
I believe it would be too messy to poke around with javascript in HtmlHelpers.
EDIT2:
Anchor text is defined inside tags. I always confuse that. And it seems that targetSource() is wrong too. Try to rewrite it: event.targetSource()=>event.target.