使用 Ajax 更新两个下拉列表过滤器的值 C# MVC

Question

我已经开发了一个 mvc Web 应用程序，其中我有一个包含数据的表，我可以使用两个下拉列表进行过滤（一个我可以选择数据的值状态，另一个我可以选择数据的值是否关闭 - 是/否）我可以同时选择它们，如果我按下按钮提交过滤它就可以了。现在我想实现一些 ajax 调用，比如当我选择一个下拉列表的值时会自动更新结果表，但我无法将下拉列表的值传递给控制器​​，谁能帮助我，谢谢

<table  id="tb2">    
    <tr>
        <th>
            <h4> LIST : @Html.DropDownList("stato", "ALL ")</h4>
        </th>
        <th>
            <h4>ARCHVIED : @Html.DropDownList("closed", "ALL ")</h4>
        </th>
        <th>
            <input type="submit" value="Filter" class="btn btn-info" />
        </th>
    </tr>
</table>

这是控制器：

public ActionResult Filter(string stato,  string closed)
    {
        List<Card> cards = new List<Card>();

        List<Closed> closedList = new List<Closed>();
        closedList.Add(new Closed("False"));
        closedList.Add(new Closed("True"));
        ViewBag.stato = new SelectList(myApi.GetState(), "Name", "Name");
        ViewBag.closed = new SelectList(closedList, "Id", "Name");

        if ((stato != null && stato != "") || (closed != null && closed != ""))
        {
            foreach (var card in model)
            {
                if (card.IdList == stato || stato == "")
                {
                    if (card.Closed == closed || closed == "")
                    {
                        cards.Add(card);
                    }
                }
            }
            return View(cards);
        }
        return View(model);
    }

这是我的 jquery

jQuery(document).ready(function ($) {
var drpdown1 = $("#Dropdown1Id");
var drpdown2 = $("#Dropdown1Id");
drpdown1.on('change', function () {
    $.ajax({
        type: "GET",
        url: " /Select/Filter",
        data: { stato: drpdown1.val(), closed: drpdown2.val() },
        success: function (res) {
            var dropValue1 = drpdown1.val();
            var dropValue2 = drpdown2.val();
            stato = dropValue1;
            closed = dropValue2;
        }
    })
})
});

但它不起作用，我是 ajax 新手，需要一些帮助

Answer 1

更改您的 html 给出按钮单击的方法。为两个下拉菜单提供 ID，然后编写如下 ajax 函数

function YourMethod() {
        var drpdown1= $("#Dropdown1Id").val();
        var drpdown2= $("#Dropdown2Id").val();
        $.ajax({
            type: "GET",
            url: "/ControllerName/Filter",
            data: { stato: drpdown1,closed:drpdown2},
            success: function(res) {
               //Your work here                      
            }
        })
    }