Используйте Ajax, чтобы обновить значение двух выпадающих фильтров C# MVC

Question

Я разработал mvc веб-приложение, в котором у меня есть таблица с данными, которую я могу отфильтровать с помощью двух раскрывающихся списков (один, где я могу выбрать состояние значения данных, а другой, где я могу выбрать значение, если данные закрыты или нет - да / нет) я могу выбрать оба из них, и если я нажимаю кнопку «Отправить» для фильтрации, это работает. Теперь я хочу реализовать некоторые вызовы 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                      
            }
        })
    }