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

Javascript 单击链接时使用AJAX在剑道窗口中加载数据,javascript,jquery,asp.net-mvc,kendo-ui,kendo-window,Javascript,Jquery,Asp.net Mvc,Kendo Ui,Kendo Window,我有一个mvc razor页面,其中使用razor foreach循环列出了几个产品项: @foreach (var product in Model) { <h2>@product.Title</h2> <div>product.Description</div> <a href="#" class="lnkViewRatings">View Reviews</a> } asp.net MVC控

我有一个mvc razor页面,其中使用razor foreach循环列出了几个产品项:

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

    <a href="#" class="lnkViewRatings">View Reviews</a>
}
asp.net MVC控制器操作方法:

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

    return Json(prodReviews);
}

来自您的评论

如何将产品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>
    }

但是我有问题
。有什么问题?错误消息?没有具体的错误消息,但没有任何东西工作正常。看起来我走对了吗?我正试图弄清楚如何在带有模板的窗口中列出返回的数据,以及如何将产品id传递给click事件。您的问题只是传递ProcId吗?我觉得你剩下的代码看起来不错。你真的帮我解决了我的一个问题。我不知道新的数据属性。在使用jQuery时,这将是一个救命稻草。在此之前,我一直在做类似onclick=“returnmyfunction(@product.Id)”。。我想我现在唯一需要弄清楚的是如何使用剑道模板系统在窗口中列出所有的产品评论。到目前为止,我在窗口中看到了json。您最初使用模板获得的窗口是否正确?就像在剑道演示站点中硬编码值一样?不确定你的意思,但不仅仅是当用户单击我想在dialog.refresh中添加模板的链接时。下面是我正在查看的文档:我相信我只需要弄清楚如何对json数据进行forloop并输出我需要的内容。下面是我正在查看的其他文档:但是,它们只显示简单的模板示例。。对于我的数据,我有一个json形式的产品评论列表。是的,我理解,在这个例子中看一下,确保它首先能够工作。稍后,您可以让它只在用户单击时打开。是的,我让它与基本示例一样,使用我指定的任何div作为窗口初始化窗口。唯一的区别是我删除了.data(“kendoWindow”).center().open();因为我不想在页面加载时像他们那样做。我更新了我的代码,以显示到目前为止我所拥有的JavaScript。
public IActionResult GetReviews(int productId)
{
    var prodReviews = _repository.GetProductReviews(productId);

    return Json(prodReviews);
}
 @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>
    }
$(".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();
});