ASP.NET MVC 4 - 编辑视图上的级联下拉列表

时间:2016-11-30 00:16:51

标签: jquery asp.net-mvc

我正在尝试学习ASP.NET MVC 4(对我来说很容易......)并且在编辑视图上无法正常进行级联下拉列表工作。

我跟着this article并有一个级联下拉列表正确填充我的创建视图上的MSSQL数据库中的选项并保存到数据库,但我无法让下拉列表正确填充MSSQL数据库中已保存的值编辑记录时。

我觉得我应该能够编辑ajax函数,使其在编辑时填充现有值,但这可能是错误的方法。

非常感谢任何帮助。或者如果只是一种更好的方法,那也很棒。我一直在寻找大量的级联下拉列表示例,这些下拉列表在为数据库创建新条目时起作用,但没有一个在编辑时效果很好。

在我的控制器中,我有以下代码:

public JsonResult GetSubstations()
    {
        return Json(db.SubstationView.ToList(), JsonRequestBehavior.AllowGet);
    }

    public JsonResult GetFeedersBySubNumber(string Substation)
    {
        string Id = Substation;

        var feed = from a in db.FeederView where a.Substation == Id select a;

        return Json(feed);
    }

在我的编辑视图中,我有以下下拉列表:

<div class="form-group">
        @Html.LabelFor(model => model.Substation, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("Substation", new SelectList(string.Empty, "Value", "Text"), "Select Substation", new { @class = "form-control" })
            @*@Html.ValidationMessageFor(model => model.Substation, "", new { @class = "text-danger" })*@
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Feeder, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("Feeder", new SelectList(string.Empty, "Value", "Text"), "Select Feeder", new { @class = "form-control" })
            @*@Html.ValidationMessageFor(model => model.Feeder, "", new { @class = "text-danger" })*@
        </div>
    </div>        

我的编辑视图包含以下脚本:

<script>
    $(function () {
        $.ajax({
            type: "GET",
            url: "/Orders/GetSubstations",
            datatype: "Json",
            success: function (data) {
                $.each(data, function (index, value) {                        
                    $('#Substation').append('<option value="' + value.Substation + '">' + value.Substation + '</option>');
                });
            }
        });

        $('#Substation').change(function () {

            $('#Feeder').empty();

            $.ajax({
                type: "POST",
                url: "/Orders/GetFeedersBySubNumber",
                datatype: "Json",
                data: { Substation: $('#Substation').val() },
                success: function (data) {
                    $.each(data, function (index, value) {
                        $('#Feeder').append('<option value="' + value.Feeder + '">' + value.Feeder + '</option>');
                    });
                }
            });
        });
    });

0 个答案:

没有答案