MVC级联下拉列表不使用Jquery填充第二个下拉列表

时间:2017-02-06 13:03:53

标签: jquery model-view-controller

我一直在努力解决这个问题整整2个小时,我不知道出了什么问题,我创建了一个MVC项目,添加了一个选择选项的模型,当第一个项目被选中时需要填充第二个下拉菜单。代码似乎工作正常,虽然在第二个下拉列表中没有填充任何内容,但我确实获得了200 Ok响应。请看下面的男女同校。

控制器代码:

public ActionResult Register()
{
    List<SelectListItem> list = new List<SelectListItem>() {
        new SelectListItem(){ Value="1", Text="Microsoft"},
        new SelectListItem(){ Value="2", Text="Apple"},
        new SelectListItem(){ Value="3", Text="Others"}
    };

    RegisterViewModel programming = new RegisterViewModel();
    programming.types = new SelectList(list, "Value", "Text");
    programming.languanges = new SelectList(new List<SelectListItem>(), "Value", "Text");

    return View(programming);
}

[HttpPost]
public JsonResult GetLanguages(string typeSelected)
{
    int type = int.Parse(typeSelected);
    List<SelectListItem> list = new List<SelectListItem>();

    if (type == 1)
    {
        list.AddRange(new List<SelectListItem>()
        {
            new SelectListItem(){ Value="3", Text="Asp"},
            new SelectListItem(){ Value="4", Text="BASIC"},
            ....
        });
    }
    else if (type == 2)
    {
        list.AddRange(new List<SelectListItem>()
        {
            new SelectListItem(){ Value="2", Text="AppleScript"},
        });
    }
    else
    {
        list.AddRange(new List<SelectListItem>()
        {
            new SelectListItem(){ Value="1", Text="ActionScript"},
            new SelectListItem(){ Value="7", Text="Clojure"},
            ....
        });
    }

    RegisterViewModel programming = new RegisterViewModel();
    programming.languanges = new SelectList(list, "Value", "Text");

    return Json(new { programming.languanges });
}

这是我的htmkl下拉定义

<div class="form-group">
    @Html.Label("Software Company", new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.DropDownListFor(m => m.selectedType, Model.types, "--Select a type--")
    </div>
</div>
<div class="form-group">
    @Html.Label("Software Created By this company", new { @class = "col-md-2 control-label" })
   <div class="col-md-10">
       @Html.DropDownListFor(m => m.selectedLanguange, Model.languanges, "--Select a language--")
   </div>
</div>

这是我调用动作控制器方法的脚本

$(function () {
    $('#selectedType').change(function () {
        debugger;
        var typeSelected = $('#selectedType :selected').val();
        typeSelected = typeSelected == "" ? 0 : typeSelected;
        //When select 'optionLabel' we need to reset it to default as well. So not need 
        //travel back to server.
        if (typeSelected == "") {
            $('#selectedLanguange').empty();
            $('#selectedLanguange').append('<option value="">--Select a language--</option>');
            return;
        }

        //This is where the dropdownlist cascading main function
        $.ajax({
            type: "POST",
            url: "GetLanguages",                            //Your Action name in the DropDownListConstroller.cs
            data: "{'typeSelected':" + typeSelected + "}",  //Parameter in this function, Is cast sensitive and also type must be string
            contentType: "application/json; charset=utf-8",
            dataType: "json"

        }).done(function (data) {
            //When succeeded get data from server construct the dropdownlist here.
            if (data != null) {

                $('#selectedLanguange').empty();
                $.each(data.languanges, function (index, data) {
                    $('#selectedLanguange').append('<option value="' + data.Value + '">' + data.Text + '</option>');
                });
            }
        }).fail(function (response) {
            if (response.status != 0) {
                alert(response.status + " " + response.statusText);
            }
        });
    });
});

脚本失败并返回200 OK。请协助。

0 个答案:

没有答案
相关问题