使用ajax更新ViewBag下拉列表

时间:2015-06-06 20:29:23

标签: ajax json asp.net-mvc drop-down-menu

我正在使用数据视图传递数据的级联下拉列表。

控制器:

public ActionResult Index()
{
    ViewBag.States = new SelectList(db.PLStates, "PLStateID", "PLStateName");
    ViewBag.Cities = new SelectList(db.PLCitys, "PLCityID", "PLCityName");

    return View();
}

[HttpPost]
public JsonResult GetCity(int SelectedStateId)
{
    SelectList result = new SelectList(db.PLCitys.Where(x => x.PLStateID == 3), "PLCityID", "PLCityName");

    return Json(result);
    //return Json(ViewBag.Cities = new SelectList(db.PLCitys.Where(x => x.PLStateID == 3), "PLCityID", "PLCityName"));
}

HTML:

<script type="text/javascript">
    $(document).ready(function () {
        $("#States").change(function () {
            var SelCity1 = $("#States").val();
            $("#Cities").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetCity")',
                dataType: 'JSON',
                data: { SelectedStateId: SelCity1 },
                success: function (Cities) {
                    ViewBag.Cities = Cities;

                    $("#Cities").append('Cities');
                    alert("success" + Cities);
             },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
            return false;
        })
    });

</script>

<div>
    @Html.DropDownList("States", "Select one")
    @Html.DropDownList("Cities", "Select one")
</div>

在警报中,我可以看到json返回对象,但是城市下拉列表清空后没有任何值。为什么ddl.cities没有填充重复值?

另外一个问题是如何将样式添加到下拉列表?

1 个答案:

答案 0 :(得分:0)

您必须使用从控制器返回的Json数据通过js手动向城市下拉选项。

至于造型。您可以使用@class html属性通过向外部css类添加&#34;样式&#34; =到html属性或样式来内联样式。