Question 69670 in Ajax Question posted in
You can find the official documentation here.

Can not pass parameters from JQuery AJAX to controller

I am calling a method in JQuery like this

      var data = {
            'minAge': minAge,
            'MaxAge': maxAge,
            'ProductType': ProductType,
            'ProductSubject': ProductSubject,
            'ordering': '@Ordering.NotOrder',
            'Searchkey': "",
            'CatId': @Context.Request.Query["CatId"]
        }
       
        $.ajax({
            contentType: 'application/x-www-form-urlencoded',
            dataType: 'json',
            type: "POST",
            url: '/ApplyFilter',
            data: data,
            success: function (data) {
                // something happens
            }
        })

in Controller

    [HttpPost]
        public ViewComponentResult ApplyFilter(InvokeRequest invokerequest)
        {
            return ViewComponent("GetProducts",invokerequest);
        }


 public class InvokeRequest
    {
        public Ordering ordering { get; set; }
        public string Searchkey { get; set; }
        public string CatId { get; set; }        
        public int MinAge { get; set; }
        public int MaxAge { get; set; }
        public int ProductType { get; set; }
        public int ProductSubject { get; set; }
              
    }

but when I call the JQuery, the invoke request is always empty but in the view JavaScript is populated correctly, it seems the parameters cannot pass to the controller

Tags:

3

Answers


  1. 0

    Your post request is probably not sending data correctly:
    I see you are telling ajax to encode data two diffents ways:
    contentType: ‘application/x-www-form-urlencoded’ and dataType: ‘json’ you should use one or another and if you tell json you should json.stringify(data) here: data: data,

    also you can test your controller using curl.

    Login or Signup to reply.
  2. 0

    I have a test in my side and it worked for me. I test in an asp.net core 5 mvc project. And I created the same InvokeRequest as yours.

    @{
    ViewData["Title"] = "Home Page";
}

    <button id="btn1">test</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        var data = {
                'minAge': 1,
                'MaxAge': 10,
                'ProductType': 0,
                'ProductSubject': 0,
                'Searchkey': "",
                'CatId': "id1"
            }
        $("#btn1").click(function(){
            $.ajax({
                url:'https://localhost:44323/home/sendData',
                data:data,
                //dataType: 'json',//if we define the dataType, you need to make sure the response is a json
                type: "POST",
                success:function(da){
                    alert(da);
                }
            })
        })
    
    </script>
    
    
    //my controller
    [HttpPost]
    public string sendData(InvokeRequest req) {
        return "success";
    }
//if keep using `dataType: 'json',` then use follow action
[HttpPost]
public JsonResult sendData(InvokeRequest req) {
    var a = req.CatId;
    return Json(a);
}

    enter image description here

    Login or Signup to reply.
  3. 0

    If you are using ASP.NET Core
    Just add ‘[FromForm]’

    public ViewComponentResult ApplyFilter([FromForm] InvokeRequest invokerequest)

    Result image here

    FromFormAttribute Class

    https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.mvc.fromformattribute?view=aspnetcore-6.0

    Model Binding in ASP.NET Core

    https://learn.microsoft.com/en-us/aspnet/core/mvc/models/model-binding?view=aspnetcore-6.0

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search