如何在 mvc 5 中基于静态下拉列表过滤数据库记录

Question

我想根据数据库列 QtyRecieved、QtyRecieved 和 Void 使用静态 html dropdwonlist

过滤数据库记录

QtyRecieved,QtyRecieved 是小数，void 是布尔值

这是我试过的

@Html.DropDownList("Filter", new List<SelectListItem>

           {
              new SelectListItem{ Text="Open", Value = "0" },
              new SelectListItem{ Text="Partial", Value = "1" },
              new SelectListItem{ Text="All", Value = "2" }
           })

我已经使用ajax向控制器发送请求

$("#Filter").change(function () {
    var listval = $("select option:selected").text();
        $.ajax({
            type: "GET",
            url: "@Url.Action("Index", "MaterialRequest")",
            data: { id: listval }
        });
    });

在我的控制器中，我已经设置了 else if 条件来显示记录 i want, when Open is selected it show records where QtyRecieved == QtyRequested

when Partial is selected it show records where QtyRecieved < QtyRequested and Void = True

和

选择所有，则将显示所有记录

请帮助我查询以过滤记录或显示任何替代方法

public ActionResult Index(string listval)
        {
            if (listval == "Open")
            {
                ViewBag.Items = db.Query<MaterialDeptItemVw>("Select mt.MaterialRequestId, mt.TDate, d.DepartmentName, it.ItemName, mt.QtyRequested, mt.Comment, mt.RecievedDateTime , u.UnitName from MaterialRequest mt INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId INNER JOIN Items it ON mt.ItemId = it.ItemId INNER JOIN Units u ON it.UnitId = u.UnitId where QtyRecieved = QtyRequested");
            }
            else if (listval == "Partial")
            {
                ViewBag.Items = db.Query<MaterialDeptItemVw>("Select mt.MaterialRequestId, mt.TDate, d.DepartmentName, it.ItemName, mt.QtyRequested, mt.Comment, mt.RecievedDateTime , u.UnitName from MaterialRequest mt INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId INNER JOIN Items it ON mt.ItemId = it.ItemId INNER JOIN Units u ON it.UnitId = u.UnitId where QtyRecieved < QtyRequested and Void = 0");
            }
            else if (listval == "All")
            {
                ViewBag.Items = db.Query<MaterialDeptItemVw>("Select mt.MaterialRequestId, mt.TDate, d.DepartmentName, it.ItemName, mt.QtyRequested, mt.Comment, mt.RecievedDateTime , u.UnitName from MaterialRequest mt INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId INNER JOIN Items it ON mt.ItemId = it.ItemId INNER JOIN Units u ON it.UnitId = u.UnitId");
            }

            return View();
        }

Answer 1

您的代码有几个问题：

1) 动作方法声明为 public ActionResult Index(string listval) 而在 AJAX 回调中你有 data: { id: listval } 参数，因此 AJAX 调用从未到达控制器动作，因为它调用具有不同的参数名称。

2) return View()在使用AJAX时不适用，需要returnJSON数据或局部视图更新目标DOM元素来自 AJAX 个结果。

因此，您应该将参数名称更改为与 AJAX data 参数完全匹配并使用 return Json():

public ActionResult Index(string id)
{
    // using DRY principle, just write the same part of the query in a string variable
    // and add another part depending on case value inside switch block below
    string baseQuery = @"Select mt.MaterialRequestId, mt.TDate, 
                         d.DepartmentName, it.ItemName, 
                         mt.QtyRequested, mt.Comment, 
                         mt.RecievedDateTime , u.UnitName from MaterialRequest mt 
                         INNER JOIN Department d ON mt.DepartmentId = d.DepartmentId 
                         INNER JOIN Items it ON mt.ItemId = it.ItemId 
                         INNER JOIN Units u ON it.UnitId = u.UnitId";

    switch (id)
    {
        case "Open":
            baseQuery += " where QtyRecieved = QtyRequested";
            break;

        case "Partial":
            baseQuery += " where QtyRecieved < QtyRequested and Void = 0";
            break;

        case "All":
            break; // not doing anything

        default: goto case "All";
    }

    // create a list of object from query results
    var items = db.Query<MaterialDeptItemVw>(baseQuery).ToList();

    // return JSON data to populate target element
    return Json(items, JsonRequestBehavior.AllowGet);
}

然后修改 AJAX 调用以根据 returned 数据更新目标 DOM 元素：

$("#Filter").change(function () {
    var listval = $("select option:selected").text();
    $.ajax({
        type: "GET",
        url: '@Url.Action("Index", "MaterialRequest")',
        data: { id: listval },
        success: function (result) {
           // an example to update target element
           $('#targetElementID').html(result);
        },
        error: function (xhr, status, err) {
           // error handling
        }
    });
});

如何在 mvc 5 中基于静态下拉列表过滤数据库记录

How to filter database records based on static dropdownlist in mvc 5

javascript

c#

ajax

asp.net-mvc

petapoco