Apply Ajax.ActionLink to a DIV using values from Model

Question

There are a few similar questions to this already, but they do not cover using values from the model to send as arguments to the controller.

Make DIV containing AJAX ActionLink clickable

Div as Ajax.ActionLink

Consider 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>
}

What I am trying to achieve is to apply that ActionLink to the entire DIV.

The problem when applying any of the JavaScript solutions is that I run into a problem of being unable to use JavaScript variables within Razor code (since one is client-side and the other server-side).

e.g:

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 question is, using ASP.Net MVC, how can I make an AJAX call from a DIV tag and pass the relevant ID to the controller?

Sort answer is no. `Ajax.ActionLink()` is a method that generates a `` tag. But why would you want to use `Ajax.ActionLink()` (which is now effectively obsolete - its not being supported in by the team in asp.net-core-mvc) when you can use the `$.ajax()` methods which give you far more flexibility. — , Feb 09 '17 at 04:44
But its unclear what your wanting to do here - the code in the first snippet uses `Ajax.ActionLink()` to generate a url based on `item.Id` which is a server side value - there is no javascript variables used in that code. If you do want to use a javascript variable in the `$.ajax()` method, then its just `var url = '@Url.Action("_ItemDisplay")' + '/' + yourVariable;` (assuming your using the default routes), or `var url = '@Url.Action("_ItemDisplay")' + '?id=' + yourVariable;` — , Feb 09 '17 at 04:47
@Stephen Thanks, I did not consider using Url.Action in the manner you described. That solves my problem perfectly. If you want to type that into an answer I'll accept. — Owen Pauling, Feb 09 '17 at 13:20
Still not clear where your javascrpt variable is coming from — , Feb 09 '17 at 22:44

score 0 · Accepted Answer · answered Jun 07 '19 at 13:37

0

The solution was simply to build the URL by concatenating the variable to the string generated by Url.Action:

'@Url.Action("_ItemDisplay")' + '/' + myVar

answered Jun 07 '19 at 13:37

Owen Pauling

11,349
20
53
64

Apply Ajax.ActionLink to a DIV using values from Model

1 Answers1