1

Razor foreachループを使用して、いくつかの製品アイテムがリストされているmvc razorページがあります。

@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 に答える