Asp.net mvc ASP.NET MVC按DropDownList中的选定项排序列表

Asp.net mvc ASP.NET MVC按DropDownList中的选定项排序列表,asp.net-mvc,Asp.net Mvc,我的数据库中有一个列表。在我看来,我有一个包含类别的下拉列表。一个类别包含许多列表 当我选择一个特定的类别时,我只希望显示那些选择了该类别的列表 我主要担心的是如何生成JQuery以在我的ListingController中调用我的SortListing方法 以下是当前的HTML Razor: @Html.DropDownListFor(m => m.Categories, Model.Categories, "Select a Category") 我的排序方法: public Lis

我的数据库中有一个列表。在我看来,我有一个包含类别的下拉列表。一个类别包含许多列表

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

我主要担心的是如何生成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设置为空

这是我的代码:

    $(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") 
    }
)
我主要担心的是如何生成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
            }
        });
    });
});

现在让我们看一下您的SoLTScript控制器动作,因为它存在问题。在ASP.NET MVC中,标准约定规定控制器操作必须返回ActionResults。在你的情况下,你似乎返回了一些列表。所以你首先要决定的是你想要使用的格式。一种可能是将这些列表作为JSON格式的值返回:

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

    return Json(listings, JsonRequestBehavior.AllowGet);
}
另一种可能是让控制器操作返回局部视图:

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>
}
因此,为了重述一遍,您可以让控制器操作返回JSON,然后使用javascript手动构建相应的DOM树,或者返回一个已包含相应标记的局部视图,并使用该局部视图刷新一些包含div的视图

我主要担心的是如何生成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
            }
        });
    });
});

现在让我们看一下您的SoLTScript控制器动作,因为它存在问题。在ASP.NET MVC中,标准约定规定控制器操作必须返回ActionResults。在你的情况下,你似乎返回了一些列表。所以你首先要决定的是你想要使用的格式。一种可能是将这些列表作为JSON格式的值返回:

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

    return Json(listings, JsonRequestBehavior.AllowGet);
}
另一种可能是让控制器操作返回局部视图:

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

因此,为了重述一遍,您可以让控制器操作返回JSON,然后使用javascript手动构建相应的DOM树,或者返回一个已包含相应标记的部分视图,并使用此部分刷新一些包含div的部分视图。

Hi Darin。我正在研究你的答案!谢谢你的详细回答!你好,达林。我正在研究你的答案!谢谢你的详细回答!