c# - ASP.NET MVC AJAX Call to Controller Not Returning any Data

Question

I'm trying to call an ASP.NET MVC controller using an AJAX Call. Basically I want to return customer details based on the ID selected from a dropdownlist. On debugging, controller is being hit and returning data in JSON format however, on debugging javascript, it never gets to success, failure or error.

Here is the code I'm using:

View:

<script type="text/javascript">
    $(document).ready(function () {
        $("#CustomerId").select2({
            placeholder: "Select a customer"
        });

        $("#CustomerId").change(function () {
            var param = $("#CustomerId Option:Selected").val();
           
            $.ajax({
                type: 'GET',
                data: { Id: param },
                url: '/QuickInvoices/GetCustDetails',
                
                success: {
                    function(response) {
                       
                        if (response != null) {
                            alert("hello");
                            $('customer_CompanyName').val(response.CompanyName);
                        }
                        else {
                            alert("something went wrong!");
                        }
                    }
                },
                failure: function (response) {
                    alert('failed');
                },
                error: function (response) {
                    alert('error' + response.responseText);
                }
            });
        });
    });
</script>

Controller:

[HttpGet]
public JsonResult GetCustDetails(int Id)
{
    Customer customer = db.Customers.Where(x => x.Id == Id)
                                    .SingleOrDefault<Customer>();

    return Json(customer, JsonRequestBehavior.AllowGet);
}

Can someone help please?

Answer 1

Please try below Code sample and check the Request & Response of network tab you will get batter Idea

 $(document).ready(function () {
        $("#CustomerId").select2({
            placeholder: "Select a customer"
        });
        $("#CustomerId").change(function () {
            var param = $("#CustomerId Option:Selected").val();
                   $.ajax({  
                        type: "POST",  
                        url: '@Url.Action("GetCustDetails", "QuickInvoices")',
                        data: { Id: param },  
                        dataType: "json"  
                        contentType: 'application/json; charset=utf-8',  
                        success: function(data) {  
                            alert(data.msg);  
                        },  
                        error: function() {  
                            alert("Error occured!!")  
                        }  
                    });  
        });
    });