Question

已经有一些类似的问题，但它们不包括使用模型中的值作为参数发送到控制器。

Make DIV containing AJAX ActionLink clickable

在Razor视图中考虑以下代码：

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

我想要实现的是将ActionLink应用于整个DIV。

应用任何JavaScript解决方案时的问题是我遇到了无法在Razor代码中使用JavaScript变量的问题（因为一个是客户端而另一个是服务器端）。

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);
                }
            });
        });
};

所以我的问题是，使用ASP.Net MVC，如何从DIV标签进行AJAX调用并将相关ID传递给控制器？

Answer 1

解决方案只是通过将变量连接到Url.Action生成的字符串来构建URL：

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

使用Model中的值将Ajax.ActionLink应用于DIV

1 个答案: