0

データベース内にリストのリストがあります。私のビューには、カテゴリを含む DropDownList があります。カテゴリには多くのリストが含まれています。

特定のカテゴリを選択すると、そのカテゴリが選択されているリストのみを表示したいと考えています。

私の主な心配は、ListingController で SortListing メソッドを呼び出す JQuery を生成する方法です。

現在の HTML (Razor) は次のとおりです。

@Html.DropDownListFor(m => m.Categories, Model.Categories, "Select a Category")

私のSortListingメソッド：

public List<Listing> SortListing(string categoryId)
{
    var listings = new List<Listing>();

    foreach (var listing in _service.ListAllEntities<Listing>())
    {
        if (listing.CategoryId == categoryId)
        {
            listings.Add(listing);
        }
    }

    return listings;
}

編集私は以下を持っています。categoryGuid を入力すると、null が来ます。

これは私のコードです:

    $(function () {
        $('#SelectedCategoryGuid').change(function () {
            var url = $(this).data('url');
            var categoryId = $(this).val();
            $.ajax({
                url: url,
                type: 'GET',
                cache: false,
                data: { categoryId: categoryId },
                success: function (result) {
                    // TODO: manipulate the result returned from the controller action
                }
            });
        });
    });

</script>

<h2>Index</h2>
@Html.ActionLink("Create New Listing", "Create")
<br/>
<strong>Filter Listings</strong>
@Html.DropDownListFor(
    m => m.SelectedCategoryGuid, 
    Model.Categories, 
    "Select a Category", 
    new {
        id = "SelectedCategoryGuid",
        data_url = Url.Action("SortListing", "Listing") 
    }
)
4

1 に答える 1

3

私の主な心配は、ListingController で SortListing メソッドを呼び出す JQuery を生成する方法です。

実際には、私の回答全体でカバーしようとする他の心配もあるはずです.

DropDownListForヘルパーに問題があります。選択したカテゴリ値と間違ったカテゴリのリストの両方をバインドするために、モデルで同じプロパティを使用しました。DropDownListFor ヘルパーの最初のパラメーターは、ビュー モデルのプリミティブ型プロパティを指すラムダ式を表します。

@Html.DropDownListFor(
    m => m.CategoryId, 
    Model.Categories, 
    "Select a Category", 
    new { 
        id = "categoryDdl",
        data_url = Url.Action("SortListing", "Listing") 
    }
)

次に、イベントをサブスクライブして.change()AJAX リクエストをトリガーします。

$(function() {
    $('#categoryDdl').change(function() {
        var url = $(this).data('url');
        var categoryId = $(this).val();
        $.ajax({
            url: url,
            type: 'GET', 
            cache: false,
            data: { categoryId: categoryId },
            success: function(result) {
                // TODO: manipulate the result returned from the controller action
            }
        });
    });
});

SortListing問題があるため、コントローラーのアクションを見てみましょう。ASP.NET MVC の標準規約では、コントローラー アクションが ActionResults を返す必要があることが規定されています。あなたの場合、いくつかを返しているようですList<Listing>。したがって、最初に決定しなければならないのは、使用したいフォーマットです。1 つの可能性は、これらのリストを JSON 形式の値として返すことです。

public ActionResult SortListing(string categoryId)
{
    var listings = _service
        .ListAllEntities<Listing>()
        .Where(x => x.CategoryId == categoryId)
        .ToList();

    return Json(listings, JsonRequestBehavior.AllowGet);
}

この場合、AJAX 成功コールバック内で、このリストのコレクションを受け取り、DOM を更新する必要があります。

success: function(result) {
    // result represents an array of listings
    // so you could loop through them and generate some DOM elements
}

もう 1 つの可能性は、コントローラー アクションが部分的なビューを返すようにすることです。

public ActionResult SortListing(string categoryId)
{
    var listings = _service
        .ListAllEntities<Listing>()
        .Where(x => x.CategoryId == categoryId)
        .ToList();

    return PartialView("Listings", listings);
}

すると、対応する部分ビューが表示されます。

@model List<Listing>
@foreach (var listing in Model)
{
    <div>@listing.SomeProperty</div>
}

次に、成功のコールバック内で、プレースホルダーを含む一部を更新します。

success: function(result) {
    $('#SomeDivIdThatWrapsAroundTheListingsPartial').html(result);
}

要約すると、コントローラ アクションで JSON を返してから、JavaScript を使用して対応する DOM ツリーを手動で構築するか、対応するマークアップを既に含む部分ビューを返し、この部分で含まれている div を単に更新することができます。

于 2012-09-18T15:32:00.500 に答える