Как исправить запрос вызова ajax

Question

Я пытаюсь отправить данные через ajax при изменении выпадающего списка, но вызов ajax не отправляет обратно на контроллер

Я уже пытаюсь поставить точку останова на контроллере для проверки, но вызов ajax не является обратной передачей.

HTML-код

<div class="col-md-6 col-sm-6">
@Html.DropDownList("CategoryId",null,new { @class = "form-control col-md-7 col-xs-12 ", required = "required", id = "CategoryDropDown",
        onchange="GetSubCategory()" })
</div> 

<div class="col-md-6 col-sm-6">
<select id="SubCategory" class="form-control col-md-7 col-xs-12" required="required"></select>
</div>

Ajax-код

    function GetSubCategory() {
        var stateId = $("#CategoryDropDown").val();
        $.ajax
            ({
                url: '/Home/GetSubCategory',
                type: 'POST',
                datatype: 'application/json',
                contentType: 'application/json',
                data: JSON.stringify({
                    stateId:+stateId
                }),
                success: function (result) {
                    $("#SubCategory").html("");
                    $.each($.parseJSON(result), function (i, SubCategory) {
                        $("#SubCategory").append($('<option></option>').val(SubCategory.Value).html(SubCategory.Text))
                    })
                },
                error: function () {
                    alert("Whooaaa! Something went wrong..")
                },
            });
    } 

код контроллера

[HttpPost]
public ActionResult GetSubCategory(int stateId)
{
           JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
            string result = javaScriptSerializer.Serialize(Logics.SubCategory(MainCatId));
            return Json(result, JsonRequestBehavior.AllowGet);
        }

Я ожидал, что вызов ajax будет работать нормально, и я 'я могу получить выпадающий список из этого метода

Answer 1

Можете ли вы попробовать это

отредактировано

   function GetSubCategory() {
        var stateId = $("#CategoryDropDown").val();
         var subCategory =  $("#SubCategory");
        $.ajax
            ({
                url: '/AdminDevVersion/Home/GetSubCategory',
                type: 'POST',
                datatype: 'application/json',
                contentType: 'application/json',
                data: JSON.stringify({ stateId:+stateId }),
                success: function (result) {
                 subCategory.empty(); // remove any existing options
                    $.each($.parseJSON(result), function (i, item) {
                        subCategory.append($('<option></option>').text(item.Text).val(item.Value))
                    })
                },
                error: function () {
                    alert("Whooaaa! Something went wrong..")
                },
            });
    } 

Answer 2

POST http://localhost/Home/GetSubCategory 404 (Not Found)

чтобы вы могли видеть, что моего проекта нет, поэтому я просто исправляю URL mu ajax на

var url = "/AdminDevVersion/Home/GetSubCategory";

Проблема была в URL, когда я вижу свою консоль, показывающую 404 не найденный контроллер из-за этого URL

Answer 3

Ваш синтаксис append должен быть похож на следующий код:

$("#SubCategory").append($('<option value="'+ SubCategory.Value +'">' + SubCategory.Text + '</option>')