ASP.NET MVC 按 DropDownList 中的选定项对列表进行排序

Question

我的数据库中有一个列表。在我的视图中，我有一个包含类别的 DropDownList。一个类别包含许多列表。

当我选择一个特定的类别时，我希望只显示那些选择了该类别的列表。

我主要担心的是如何生成 JQuery 以在我的 ListingController 中调用我的 SortListing 方法。

这是当前的 HTML（Razor）：

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

我的排序列表方法：

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") 
    }
)

Answer 1

我主要担心的是如何生成 JQuery 来调用我的 SortListing 我的 ListingController 中的方法。

实际上，您应该还有其他担忧，我将在我的回答中尝试涵盖。

您的 DropDownListFor 助手有问题。您在模型上使用了相同的属性来绑定选定的类别值和错误的类别列表。 DropDownListFor 帮助器的第一个参数表示一个 lambda 表达式，指向视图模型上的原始类型属性：

@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>。所以你必须决定的第一件事是你想使用的格式。一种可能性是将这些列表作为 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
}

另一种可能性是让您的控制器操作返回部分视图：

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。