Although there are similar questions on this topic already, they do not address the specific issue of using values from the model as arguments for the controller.
Make DIV containing AJAX ActionLink clickable
Div as Ajax.ActionLink
Take a look at the following code in a Razor view:
@foreach (var item in Model)
{
<div class="itemDisplay">
<img src="~/Images/@item.DisplayImage" />
@Ajax.ActionLink($"Item {item.Id}", "_ItemDisplay", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "itemDisplay", LoadingElementId = "ajax-loader", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, null)
</div>
}
The goal here is to apply the ActionLink to the entire DIV.
The challenge arises when attempting to use JavaScript variables within Razor code due to the client-side and server-side distinction.
For example:
function updateItemDisplay(itemId) {
$('#itemDisplay')
.click(function () {
$.ajax({
url: '@Url.Action("_ItemDisplay", new { id = *cannot use a JS variable here!* })',
type: "GET",
success: function (result) {
$('#itemDisplay').html(result);
}
});
});
};
So my query is, with ASP.Net MVC, how can I initiate an AJAX call from a DIV tag and pass the relevant ID to the controller?