.Net Core MVC, POST Action method not firing

Question

I am new to .Net Core MVC. Not able to call Filter action method through below jquery method. While clicking button, I get a 302 - Found response. But action method is not fired.
CSHTML

<form asp-controller="Employee" asp-action="UploadFile" method="post" enctype="multipart/form-data" id="EmployeeForm">                        
    <input type="file" name="file" />
    <button type="submit" value="Upload File" >UploadFile</button>
                        
    @Html.DropDownList("genderDropDown", ViewData["GenderList"] as List<SelectListItem>)
    @Html.DropDownList("bloodGroupDropDown", ViewData["BloodGroupList"] as List<SelectListItem>)
    <button type="button" id = "btnFilter" value="Filter" >Filter</button>    
</form> 

JQuery

$(document).ready(function() {
    $("#btnFilter").click(function(){
        var bGroup =  $( "#bloodGroupDropDown option:selected" ).text();
        var gender =  $( "#genderDropDown option:selected" ).text();     
        $.ajax({  
            url: "@Url.Action("Filter","Employee")",  
            type: 'POST',  
            dataType: 'json',                
            data:{
                bGroup: JSON.stringify(bGroup),
                gender: JSON.stringify(gender)
            },            
            success: function (Data) {  
                alert(data);                
            }
        });       
    });       
});

Action method

public IActionResult Filter(string bGroup, string gender)
{
    List<EmployeeViewModel> empList = new List<EmployeeViewModel>();
    return RedirectToAction("Index",empList);
}

Answer 1

You get 302 found message because Ajax is used to partially refresh the page, and redirection is not supported by default. In your code, if you interrupt the Filter Action, you can find that Ajax successfully called the method.

If you want to redirect to the Index page, the best way is not to use Ajax. Below is a work demo:

View:

<form asp-controller="Employee" asp-action="UploadFile" method="post" enctype="multipart/form-data" id="EmployeeForm">

    <input type="file" name="file" />
    <button type="submit" value="Upload File">UploadFile</button>

    @Html.DropDownList("genderDropDown", ViewData["GenderList"] as List<SelectListItem>)
    @Html.DropDownList("bloodGroupDropDown", ViewData["BloodGroupList"] as List<SelectListItem>)
    <button type="button" id="btnFilter" value="Filter">Filter</button>
</form>
@section Scripts
{
    <script>

        $("#btnFilter").click(function () {
            var bGroup = $("#bloodGroupDropDown option:selected").text();
            var gender = $("#genderDropDown option:selected").text();
            window.location.href = "/employee/filter?bGroup=" + bGroup + "&gender=" + gender;
        });

    </script>
}

Controller:

        public IActionResult Index()
        {         
            return View();           
        }
        public IActionResult Edit()
        {
            var genderDropDown = new List<SelectListItem>()
         {
             new SelectListItem(){Value="1",Text="China"} ,
             new SelectListItem(){Value="2",Text="America"}
         };
            ViewData["GenderList"] = genderDropDown;
            var bloodGroup = new List<SelectListItem>()
         {
             new SelectListItem(){Value="1",Text="Hello china"} ,
             new SelectListItem(){Value="2",Text="Hello America"}
         };
            ViewData["BloodGroupList"] = bloodGroup;
            return View();
        }
        [HttpPost]
        public IActionResult UploadFile(EmployeeViewModel employeeViewModel)
        {
            return Json("OK");
        }
        public IActionResult Filter(string bGroup, string gender)
        {
            List<EmployeeViewModel> empList = new List<EmployeeViewModel>() 
            {     
            };
            return RedirectToAction("Index", empList);
        }

Result: