I recently encountered an issue that I couldn't resolve using an ActionLink, so I had to resort to using a regular hyperlink.
Both links are styled similarly on the page due to passing the same css conditions, but I observed two key differences between them:
- The text is selectable on the hyperlink, but not on the ActionLink
- When hovering over the ActionLink, the cursor changes to a hand icon instead of the pointer used for hyperlinks.
I always assumed that an ActionLink rendered a hyperlink, which would explain the shared css styling, but there are some distinct variations.
Would anyone have any suggestions on how to address this issue or propose an alternative solution for replacing an ActionLink with a hyperlink to invoke an AJAX function (resulting in a PartialView)?
UPDATE
Here is the HTML output: The first line represents the hyperlink, while the second shows the ActionLink.
<li><a id="load-partial">Test</a></li>
<li><a href="/Contact/List">Contact</a></li>
I included an id in the hyperlink so that it can trigger the following script to generate the view within a specific div. Unfortunately, attempts to replicate this functionality using an ActionLink only result in the view being displayed without its associated Layout views and formatting.
<script>
$(document).ready(function () {
$('#load-partial').click(function () {
$.ajax({
url: '/Contact/List/',
datatype: 'html',
success: function (data) {
$('#adminmain').empty().html(data);
}
});
});
});
</script>
Thank you very much.