单击链接时使用 AJAX 在 Kendo 窗口中加载数据

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 类“lnkViewReviews”的任何链接时，我希望打开剑道窗口并使用 ajax 请求显示该产品的所有评论列表。该请求将是 GET 类型，并且根据单击链接的产品，数据参数将是 productId。

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

1. 用户点击所列产品之一的查看评论链接。
2. 会打开一个对话窗口，并在我可以指定的某种模板中拉入该产品评论的列表。

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

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.net MVC 控制器动作方法：

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

    return Json(prodReviews);
}

Answer 1

From your comments

如何将产品ID传递给点击事件。

您可以使用新的 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();
});