下拉列表未使用Ajax C＃/ ASP.NET MVC填充

如何解决下拉列表未使用Ajax C＃/ ASP.NET MVC填充

我正在尝试在模态内填充一个下拉列表，但是我的下拉列表没有填充，我不确定为什么。我在下面提供了我的代码。我已经尝试将网址分别设为inspectionController和inspection，但没有得到任何结果。

我提到了dropdown menu populate another c# mvc json ajax，但有些困惑

模型：从T4模板自动生成的模型

public IDBSet<TradePartner> TradePartners { get; set; }

查看模型：

public class TradePartnerviewmodel
{
    public int Id {get; set;}
    ...
    public string ConstructionPhase{get;set;}
    ...
}

查看：

<td class="moveto" style="padding: 0" ng-hide="printMode">
    <div class="dropdown pull-right">
        <a class="btn btn-sm btn-link" data-toggle="dropdown">
            <b>move to</b>
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li>
                @if (appName.Contains("ABC"))
                {
                    <a class="btn btn-sm btn-link" data-toggle="modal" data-target="#moDalemailItem"><b>Email Item</b></a>
                }
            </li>
        </ul>
        <div id="moDalemailItem" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title" style="text-align-last: center">Email Item</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <form id="myForm">
                                <label for="ConstructionPhaseDropdown">ConstructionPhase</label>
                                <select class="form-control" id="ConstructionPhaseDropdown" name="ConstructionPhaseDropdown"></select>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</td>

               
<script type="text/javascript">
    $(document).ready(function () {
        $("#ConstructionPhaseDropdown").change(function () {
            $.ajax({
                type: 'GET',contentType: "application/json; charset=utf-8",data: {},url: "/inspection/TradePartner/",success: function (data) {
                    var a = '<option value="-1">Please select an item</option>';
                    for (var i = 0; i < data.length; i++) {
                        a += '<option value="-1"' + data[i].ConstructionPhase + '">' + '</option>'
                    }
                    $("#ConstructionPhaseDropdown").html(a);
                },error: function (a,jqXHR,exception) { }
            });
        });
    });
</script>

控制器方法：

public class inspectionController : Controller
{
    public ActionResult TradePartner()
    {
        return Json(db.TradePartners.Select(x => new
        {
            ConstructionPhase = x.ConstructionPhase
        }).ToList(),JsonRequestBehavior.ALlowGet);
    }
}

解决方法

更改下拉值时会发生AJAX操作：

$("#ConstructionPhaseDropdown").change(function () {
    // populate the drop-down
});

但是您不能更改下拉值，因为它没有值：

<select class="form-control" id="ConstructionPhaseDropdown" name="ConstructionPhaseDropdown"></select>

因此您永远无法调用该操作来填充下拉列表。

听起来好像您想在页面加载时填充它：

$(document).ready(function () {
    $.ajax({
        // your current AJAX code
    });
});

基本上不能删除包装了整个内容的change处理程序，因为您还不能更改该值。