单击 link 时，使用 AJAX 在 Kendo Window 中加载数据

Question

我有一个 mvc razor 页面，其中使用 razor foreach 循环列出了多个产品项目：

@foreach (var product in Model)
{
    <h2>@product.Title</h2>
    <div>product.Description</div>

    <a href="#" class="lnkViewRatings">View Reviews</a>
}

我的目标： 单击任何带有 css class 'lnkViewReviews' 的 link 我希望 kendo window 打开并显示列表使用 ajax 请求对该产品的所有评论。该请求将是 GET 类型，并且根据单击 link 的产品，数据参数将是 productId。

这正是我想要的（请告诉我是否还有更好的方法）：

用户点击所列产品之一的查看评论link。
一个对话框 window 打开并拉入我可以指定的某种模板中的产品评论列表。

以下是我根据 kendo 文档进行的尝试，但我遇到了问题。你能告诉我一个实现这个的好方法吗？

HTML

<div id="dialog">
    <p>This is static text in my dialog window</p>
</div>

JavaScript

$("#dialog").kendoWindow({
    visible: false
});
var dialog = $("#dialog").data("kendoWindow");

$(".lnkViewReviews").click(function (e) {
    e.preventDefault();

    dialog.refresh({
        url: "/Products/GetReviews",
        data: { productId: $(this).attr('data-product-Id') },
    });

    dialog.open().center();
});

asp.netMVC控制器动作方法：

public IActionResult GetReviews(int productId)
{
    var prodReviews = _repository.GetProductReviews(productId);

    return Json(prodReviews);
}

Answer 1

From your comments

how to pass the product id to the click event.

您可以使用新的 data-* 属性来保存任何元素中的值。

 @foreach (var product in Model)
    {
        <h2>@product.Title</h2>
        <div>product.Description</div>

        <a href="#" data-product-Id="@product.Id" class="lnkViewRatings">View Reviews</a>
    }

而你的Jquery可以

$(".lnkViewReviews").click(function (e) {
    e.preventDefault();

    dialog.refresh({
        url: "/Products/GetReviews",
        data: { productId: $(this).attr('data-product-Id') } //You can retrieve product Id from the element itself
    });

    dialog.open().center();
});

单击 link 时，使用 AJAX 在 Kendo Window 中加载数据

Loading data in a Kendo Window with AJAX when a link is clicked

javascript

asp.net-mvc

jquery

kendo-ui

kendo-window