I have some AJAX code in my JavaScript which is not showing any success or failure alert.

  function AttemptHouseViewingAppointment(house) {

    var imgOfHouse = $(house).attr("value");
    $.ajax({
        type: "POST",
        url: '@Url.Action("AttemptHouseViewingAppointment", "Viewing")',
        dataType: "json",
        data: ({
            userId: @Model.UserId,
            appointmentKey: '@Model.Key',
            chosenHouse: imgOfHouse 
        }),
        success: function (data) {
            alert(data);
            if (data.success) {
                alert(data.message);
            } else { alert(data.Message) }
        },
        error: function (xhr) {
            alert(xhr.responseText);
        }
    });

};

The above function is called when I click an image on the screen. This part works fine as I have set a breakpoint on my ASP controller and I can see the relevant action being called. C# code below:

    public ActionResult AttemptHouseViewingAppointment(int userId, string appointmentKey, int chosenHouse)
    {
        string selecteHouseName = $"./house-code-icons/{chosenHouse}.png";

        var house = 
            _ctx.houses.Where(x => x.HouseID == userId && x.Icon == chosenHouse)
                        .FirstOrDefault() ?? null;

        if(house != null)
        {
            var member = _ctx.User.FirstOrDefault(x => x.Id.Equals(userId));

            _ctx.Appointments.Add(new ViewingModel
            {
                House = chosenHouse,
                UserId = userId
            });

            _ctx.SaveChanges();

            return Json(new { success = true, message = "Appointment Confirmed!" });
        }
        else
        {
            return Json(new { success = false, message = "Sorry, a booking has already been made!" });
        }
    }

Even though, the return Json lines are being hit and returned to the page, there is no alert popup on my page to let user know if success or not. Please let me know if any questions.

Thanks