Изменение раскрывающегося списка mvc не срабатывает

Я пытаюсь использовать 3 выпадающих списка на странице mvc, если я изменяю ddl 1, значения в ddl 2 должны измениться, а изменение ddl 2 должно изменить значения в ddl 3. Пока у меня есть этот код.... значения для ddl 1 установлены, но если я изменяю значение в ddl 1, ничего не происходит. ddl 2 не получает никаких значений, а «public JsonResult GetPapperByTypeId (int typeId)» вообще не запускается.

Что мне здесь не хватает?

Главная страница

                            @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "myForm", name = "papper_search" }))
                            {

                                            @Html.DropDownList("PrintType", ViewData["papperType"] as List<SelectListItem>, new { @class = "form-control" })
                                            <br />
                                            <br />
                                            @Html.DropDownList("Papper", new SelectList(string.Empty, "Value", "Text"), "Please select a paper", new { @class = "form-control" })

                                            <br />
                                            <br />
                                            @Html.DropDownList("PapperType", new SelectList(string.Empty, "Value", "Text"), "Please select a type", new { @class = "form-control" })

                            }





<script type="text/javascript" src="@Url.Content("~/js/jquery.min.js")"></script>
<script type="text/jscript">
$(function ()
{
    $('#PrintType').change(function ()
    {
        $.getJSON('/Home/GetPapperByTypeId/' + $('#PrintType').val(), function (data)
        {
            var items = '<option>Select Papper</option>';
            $.each(data, function (i, printtype)
            {
                items += "<option value='" + printtype.Value + "'>" + printtype.Text + "</option>";
            });
            $('#Papper').html(items);
        });
    });

    $('#Papper').change(function ()
    {
        $.getJSON('/Home/Citylist/' + $('#Papper').val(), function (data)
        {
            var items = '<option>Select PapperType</option>';
            $.each(data, function (i, pappertype)
            {
                items += "<option value='" + pappertype.Value + "'>" + pappertype.Text + "</option>";
            });
            $('#PapperType').html(items);
        });
    });
});
</script>

Контроллер дома

   public ActionResult Index()
    {

        var li = new List<SelectListItem>
        {
            new SelectListItem {Text = "Select", Value = "0"},
            new SelectListItem {Text = "Plain paper", Value = "1"},
            new SelectListItem {Text = "Heavy paper", Value = "2"},
        };
        ViewData["papperType"] = li;

    }

    //Action result for ajax call
    public JsonResult GetPapperByTypeId(int typeId)
    {
        var objallPappers = GetAllPappers().Where(m => m.TypeId == typeId).ToList();
        var obgpapper = new SelectList(objallPappers, "Id", "Name", 0);
        return Json(obgpapper, JsonRequestBehavior.AllowGet);
    } 


    public List<Papper> GetAllPappers()
    {
        var objPapper = new List<Papper>
        {
            new Papper {Id = 1, TypeId = 1, Name = "papper-1"},
            new Papper {Id = 2, TypeId = 2, Name = "papper-1"},
            new Papper {Id = 3, TypeId = 4, Name = "papper-1"},
            new Papper {Id = 4, TypeId = 1, Name = "papper-2"},
            new Papper {Id = 5, TypeId = 1, Name = "papper-3"},
            new Papper {Id = 6, TypeId = 4, Name = "papper-2"}
        };
        return objPapper;
    }               

person MTplus    schedule 29.11.2016    source источник
comment
вы получаете какую-либо ошибку. проверить в окне консоли   -  person SURJEET SINGH Bisht    schedule 29.11.2016
comment
Теперь я вижу, что получаю эту ошибку... TypeError: $ не является функцией, которая есть в моем jScript..   -  person MTplus    schedule 29.11.2016
comment
Это означает, что вы не включили jquery, или он неправильно загружен, или есть конфликт имен.   -  person    schedule 29.11.2016
comment
Спасибо Степан за информацию. теперь у меня все работает :)   -  person MTplus    schedule 29.11.2016


Ответы (1)


Проблема: в этой строке кода

$.getJSON('/Home/GetPapperByTypeId/' + $('#PrintType').val(), function (data)

Настоящая проблема в том, что /Home/GetPapperByTypeId/' + $('#PrintType').val()

Это закончится URL-адресом, например /Home/GetPapperByTypeId/SomeValue

Решение. Вам нужно, чтобы URL был похож на /Home/GetPapperByTypeId/?typeId=SomeValue.

обратите внимание на ?typeId=, добавленный в строку запроса. Поскольку действие вашего контроллера ожидает параметр с именем typeId

public JsonResult GetPapperByTypeId(int typeId)

Поэтому измените синтаксис в вашем jquery на

$.getJSON('/Home/GetPapperByTypeId/?typeId=' + $('#PrintType').val(), function (data)

Аналогичная проблема у вас есть в этой строке кода.

$.getJSON('/Home/Citylist/' + $('#Papper').val(), function (data) исправь и это..

person Rajshekar Reddy    schedule 29.11.2016
comment
Я не могу проверить, имеет ли это изменение какое-либо значение из-за TypeError: $ не является функцией, которую я получаю.... - person MTplus; 29.11.2016
comment
@MTplus вы получаете эту ошибку только тогда, когда файл jQuery не загружается должным образом на вашу страницу. Также измените свой "text/jscript" на "text/javascript", так как я не вижу необходимости в типе jscript в вашем коде. - person Rajshekar Reddy; 29.11.2016