Question

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

当我选择特定类别时，我希望仅显示已选择类别的列表。

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

这是当前的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置为空。

这是我的代码：

    $(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的部分。

ASP.NET MVC按DropDownList中的Selected项排序列表

1 个答案: