下拉列表未填充 ajax C#/ASP.NET MVC

Question

我正在嘗試在模態中填充下拉列表，但是我的下拉列表沒有填充，我不知道為什么。 我在下面提供了我的代碼。 我已經嘗試將 URL 設為InspectionController和Inspection但沒有得到任何結果。

我已經提到下拉菜單填充另一個 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);
    }
}

Answer 1

當您更改下拉值時會發生 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處理程序，因為您還不能更改該值。