1

我有一个 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);
}
4

1 回答 1

2

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();
});
于 2016-02-21T11:21:53.597 回答