如何根据下拉列表选择更改从数据库中过滤列表或记录?

时间:2019-01-24 13:37:19

标签: jquery ajax asp.net-mvc

我希望能够在下拉列表中选择一个区域并过滤列表以显示来自所选区域的记录

这是我用来过滤列表的方法。我在我的jquery ajax函数中调用相同的方法

    public IEnumerable<Sale> SortByRegion(string Regions)
    {
        var SortList = from a in db.Sales
                       where a.Region.Contains(Regions)
                       select a;

        return SortList.ToList();
    }

这是我正在使用jquery ajax调用用于过滤列表的mcv方法的函数。

        function SortByRegion(Regions) {
            var Regions = $('#Regions').val();

            $.ajax({
                type: 'GET',
                url: '@Url.Action("SortByRegion", "Sales")',
                url: '/Sales/SortByRegion',
                data: { Regions: Regions },
                success: function (result) {
                    $('#Index').html(result);
                },
                error: function(xhr, status, err){

                }
            });

<select name="Regions" id="Regions" onchange="SortByRegion()">
    <option selected="selected" id="PlaceHolder">---Please Select Region---</option>
    <option id="Central">Central</option>
    <option id="East">East</option>
    <option id="West">West</option>
</select>

2 个答案:

答案 0 :(得分:0)

您是否研究过.change()

https://api.jquery.com/change/

说明将事件处理程序绑定到“更改” JavaScript事件,或在元素上触发该事件

$( "#Regions" ).change(function() {
  SortByRegion($(this).val());
});

此方法是.on( "change", handler )

的快捷方式

EDIT (更多代码)之后:将函数从function SortByRegion(Regions) {更改为function SortByRegion() {,因为您没有向其传递任何值。

答案 1 :(得分:0)

首先,您的控制器返回IEnumerable,它将返回包含结果类型的字符串消息:

System.Collections.Generic.List`1[TypeOfYourSaleObject]

您必须将控制器对ActionResult的响应更改为

return Json(list, JsonRequestBehavior.AllowGet);

然后您将不必重新绑定您的下拉列表。 您还可以将该下拉列表移至局部视图,并以特定模型返回html作为局部视图。

您可以将其更改为:

        [HttpGet]
        public ActionResult SortByRegion(string Regions)
        {
            var SortList = from a in db.Sales
                           where a.Region.Contains(Regions)
                select a;

            return Json(SortList.ToList(), JsonRequestBehavior.AllowGet);
        }

向您的ajax请求添加其他属性:

dataType: "json"

,然后将您选择的内容与json结果重新绑定。如果那是您想要的方式。