ASP.Net Core 3.1 Razor Pages event handler not working in production

Question

I am using ASP.NET 3.1 Core Razor Pages and trying to add real time interaction for my dropdown list upon the onchange event.

I have two dropdown list, first one is filled with governorates and the second will be filled with cities of the selected governorate using onchange event.

All things go well with me while working in development, but if I publish my project the real time interaction does not happen for the city drop down list and I get this error

GET http://localhost/SectorPlan/Update?handler=GetCitiesList&GovernorateId=15 404 (Not Found)

This is my code.

Update.cshtml.cs

public JsonResult OnGetGetCitiesList(int GovernorateId)
    {
        var cities = manageCities.GetCities().Where(c => c.GovId == GovernorateId).ToList();

        return new JsonResult(cities);
    }

Update.cshtml

        <div class="form-group">
            <label asp-for="Governarate.Id">Governorate Name</label>
            <select class="form-control governarateDropdown" asp-for="Governarate.Id" asp-items="@(new SelectList(Model.Governarates,"Id", "Name"))">
                <option selected disabled>Select Governorate</option>
            </select>
            <span asp-validation-for="Governarate.Id" class="alert-danger"></span>
        </div>

        <div class="form-group">
             <label asp-for="City.Id">City Name</label>
             <select class="form-control cityDropdown" asp-for="City.Id">
                 <option selected disabled>Select City</option>
              </select>
              <span asp-validation-for="City.Id" class="alert-danger"></span>
         </div>

JS Code

//Bind City dropdownlist
$(".governarateDropdown").change(function () {
    var govId = $(this).val();
    console.log(govId);

    $.ajax({
        type: "GET",
        url: '/SectorPlan/Update?handler=GetCitiesList',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: $.param({ GovernorateId: govId }),
        success: function (result) {
            //alert(JSON.stringify(result));
            var item = "";
            $(".cityDropdown").find('option').not(':first').remove();
            item += '<option selected disabled value="">Select City</option>'
            $.each(result, function (i, city) {
                console.log(city);
                item += '<option value="' + city.id + '">' + city.name + '</option>'
            });
            $(".cityDropdown").html(item);
        }, //End of AJAX Success function  

        failure: function (result) {
            //alert(result.responseText);
            console.log(result.responseText);
        }, //End of AJAX failure function  
        error: function (result) {
            //alert(result.responseText);
            console.log(result.responseText);
        } //End of AJAX error function  

    });
});

Any help will be appreciated.

Answer 1

did you try using the Url.PageLink method like so.

type: "GET",
url: "@Url.PageLink(pageHandler:"GetCitiesList", pageName:"/SectorPlan/Update",values: route values if you have any)",