javascript - 单击链接时使用 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 Controller 操作方法:

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

    return Json(prodReviews);
}

Answer 1

来自您的评论

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