CODEWITHSUNDEEP
jqueryasp.net-mvcpostasp.net-mvc-5asp.net-ajax
Lazy Programer
Lazy Programer

Reputation: 171

Asp.net MVC 5 Ajax POST throws exception 404 (Not Found) after application is published

Everything works fine locally (When i run with localhost), But after i published to IIS and runs, it throws exception in browser console

POST http://xx.xxx.x.x/Dashboard/FilterData 404 (Not Found)

Below is my code, I am using a button to call this javascript function

VIEW - Index

<script type="text/javascript">

    function btnFilterClick() {

        var txtFDate = $("#dpFrom");
        var txtTDate = $("#dpTo");
        var ddBranches = $("#ddBranches");
        var ddBrands = $("#ddBrands");

        $.ajax({
            type: "POST",
            url: "/Dashboard/FilterData",
            data: '{FromDate: "' + txtFDate.val() + '", ToDate: "' + txtTDate.val() + '", SelectedBranches : "'+ ddBranches.val()+'", SelectedBrands : "'+ ddBrands.val()+'" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success:
                function (r)
                {
                    chartPurchaseVsSales.data.datasets[0].data = r.listSalesData;
                    chartPurchaseVsSales.data.datasets[1].data = r.listPurchaseData;
                    chartPurchaseVsSales.data.labels = r.xAxisNameForPurchaseAndSales;
                    chartPurchaseVsSales.update();


                }
        });


    }

    </script>

Controller - DashboardController

    [HttpPost]
    [Authorize]
    public JsonResult FilterData(DashboardModel modelX)
    {
        DashboardModel model = new DashboardModel();
        model.xAxisNameForPurchaseAndSales = new string[] { };
        model.xAxisNameForStock = new string[] { };



        *Skipped some codes to make it simple*

        return Json(model);

    }

Any idea whats wrong here ? I am newbie in web developments! Help Me!

Upvotes: 3

Views: 2444

Answers (3)

Lazy Programer
Lazy Programer

Reputation: 171

I changed to '@Url.Action("FilterData", "Dashboard")' and it works fine! Thank you, guys.

Below is my code

 $.ajax({
        type: "POST",
        url: '@Url.Action("FilterData", "Dashboard")',
        data: '{FromDate: "' + txtFDate.val() + '", ToDate: "' + txtTDate.val() + '", SelectedBranches : "'+ ddBranches.val()+'", SelectedBrands : "'+ ddBrands.val()+'" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success:
            function (r)
            {
                chartPurchaseVsSales.data.datasets[0].data = r.listSalesData;
                chartPurchaseVsSales.data.datasets[1].data = r.listPurchaseData;
                chartPurchaseVsSales.data.labels = r.xAxisNameForPurchaseAndSales;
                chartPurchaseVsSales.update();


            }
    });

Upvotes: 3

Nguyễn Văn Phong
Nguyễn Văn Phong

Reputation: 14208

Solution 1

You can change from url: "/Dashboard/FilterData", like below

url: '@Url.Action("FilterData", "Dashboard")'

Solution 2

In HTML

<input type="hidden" value="@Url.Action("FilterData", "Dashboard")" id='url' />

In Jquery

url: $("#url").val()

Upvotes: 3

Ganesh Prasad Preetham
Ganesh Prasad Preetham

Reputation: 132

you need to change the URL in your ajax request to URL: '/YourAppName/Controller/ActionResult', after publishing it on IIS. This is why the URL should never be hardcoded. You can use a hidden field in your razor page and populate the URL like @Url.Action("FilterData", "Dashboard") and read it from there. I hope it helps.

Upvotes: 0

Related Questions