Question

I have just solved an issue I had which couldn’t be solved (to my limited knowledge) with an ActionLink so I used a regular hyperlink.

When these two links are rendered on the page, they are styled very similar to each other as they pass the same css conditions, however they aren’t exactly the same in two ways that I have noticed:

• The text is selectable on the hyperlink where is isn’t on the ActionLink
• When hovering over the ActionLink, the cursor changes to a hand rather than a pointer, the hyperlink stays with the pointer.

I was under the impression that an ActionLink renders a hyperlink which would explain why they are both styled by the css, but there are obviously some differences.

Does anyone know how to fix this, or suggest another solution to replacing an ActionLink with a hyperlink to call an AJAX function (which returns a PartialView)?

UPDATE

This is the rendered HTML. The first is the hyperlink, then second is the ActionLink.

<li><a id="load-partial">Test</a></li> 
<li><a href="/Contact/List">Contact</a></li>

The reason I have an id in the hyperlink is so that it will run the following script to create the view in a specific div. I can’t seem to replicate this using an ActionLink as it just return the view on it’s own without the Layout views and completely unformatted.

<script>
$(document).ready(function () {
    $('#load-partial').click(function () {
        $.ajax({
            url: '/Contact/List/',
            datatype: 'html',
            success: function (data) {
                $('#adminmain').empty().html(data);
            }
        });
    });
});
</script>

Thanks very much.

Answer 1

An ActionLink is nothing more than a server-side helper method that emits an HTML A tag. There is nothing else special about it.

If you are seeing differences in behavior / rendering, view the HTML source that is rendered and look for differences there.

There are very few things you cannot accomplish with an ActionLink that would require you to hand-code the A tag. Did you post a separate question about the problem you could not solve using it?

UPDATE (based on your posted HTML)

The hyperlink is missing a href so it will not do anything when clicked.

If you need to add an ID to your ActionLink, you can do something like:

@Html.ActionLink("Contact (this is the text)", "List", "Contact", 
    new { someQueryStringParameter = 42 }, 
    new { id="load-partial" })

That example shows how to generate

<a id="load-partial" href="/Contact/List?someQueryStringParameter=42">Contact (this is the text)</a>

Keep in mind the ID should be unique on a given HTML page.