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

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

本文关键字：窗口 加载 数据 链接 使用 AJAX 单击      更新时间：2023-09-26

我有一个 mvc 剃须刀页面，上面列出了几个使用剃刀 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);
}

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();
});
相关文章：