使用 Jquery AJAX 在部分视图中填充下拉列表答案

【问题标题】：Populate Dropdown in Partial View with Jquery AJAX使用 Jquery AJAX 在部分视图中填充下拉列表
【发布时间】：2017-09-14 19:38:48
【问题描述】：

我是 jquery 的新手，我正在尝试用我返回的结果填充我的下拉列表。我基本上有一个按钮，可以在一个 ajax 调用中打开部分视图，然后通过另一个 ajax 调用获取下拉数据。

这是我的按钮-

<button type="button" id="createIssueBtn" class="btn btn-lg btn-info" data-toggle="collapse" data-target="#PopUpDiv">I need to create an issue</button><br/>
<div id="PopUpDiv"></div>

这是页面上的javascript-

<script type="text/javascript">

    $(document).ready(function() {

        $('#createIssueBtn').bind("click", function () {
            $.ajax({

                url: '@Url.Action("OpenPopUp", "Issues")',
                dataType: 'html',
                success: function (html) {
                    $('#PopUpDiv').html(html);
                }
            }
        )
            $.ajax({

                dataType: "json",
                url: '@Url.Action("GetIssueTypes", "Issues")',
                success: function (data) {

                    $.each(data.IssueTypes, function (index, item) {

                        $("#selectIssueType").append(
                            $("<option></option>")
                                .text(item.IssueType)
                                .val(item.IssueID)
                            )
                    })
                }
            })
        })

    })
</script>

这是局部视图-

<div id="AddIssues"><br/>


<div >
<select id="selectIssueType">
    <option value="0">Select Issue Type...</option>
</select>
    </div>
    <br/>
    <div>Enter the details of the issue (be specific):</div>
    <div><input type="text" id="IssueDetails" /></div>
    <br/>
    <p>Location of Issue:</p>
    <div><input type="text" id="IssueLocation" /></div>
    <div>&nbsp;<br/></div>
</div>

我正在尝试填充选择。我取回了数据，但绑定让我失望了。

谢谢！

编辑

这是我的 IssueTypes 对象-

public class IssueTypes
    {
        public int IssueID { get; set; }

        public string IssueType { get; set; }
    }

编辑

这是问题控制器中的 GetIssueTypes 函数-

 public ActionResult GetIssueTypes()
        {
            List<IssueTypes> issuesList = new List<IssueTypes>();

            issuesList = issueService.GetAllIssueTypes().data.Select(w => new IssueTypes()
            {
                IssueID = w.IssueID,
                IssueType = w.IssueType
           }).ToList();

            return Json(issuesList, JsonRequestBehavior.AllowGet);
        }

【问题讨论】：

为什么不直接使用$('#createIssueBtn').click(function() {...});
您还没有解释您的问题中什么不起作用！。但是您的代码有多个问题，尤其是 ajax 是异步的，并且可能在您第一次 ajax 调用完成之前执行第二次 ajax 调用，这意味着您将 <option> 元素添加到 <select> 甚至还不存在。
@StephenMuecke 我无法绑定通过我的 Ajax 调用返回的数据。
再次阅读我的评论 :) - 您不能将元素添加到甚至还不存在的元素中 - 您需要在第一个 ajax 调用的成功回调中进行第二个 ajax 调用。这将解决眼前的问题，但您确实需要访问 MVC 站点并通过教程学习基础知识，包括如何使用 HtmlHelper 方法生成视图和绑定到模型
@StephenMuecke 好吧，这是有道理的。我把第二个电话放在了成功的范围内，但这并没有做任何事情。是的，我对 MVC 还很陌生，哈哈，现在只是想用 Ajax 学习绑定数据

标签： javascript jquery ajax asp.net-mvc partial-views

【解决方案1】：

我最终使用了 Angular JS。我的选择 ->

<div ng-controller="IssueTypes">
                <select id="issueTypeSelect" ng-model="issueTypeModel">
                    <option ng-repeat="issue in issueTypes" value="{{issue.IssueID}}">{{issue.IssueType}}</option>
                </select>
            </div>

我的 Angular 代码-

 var app = angular.module('Cartegraph', []);
    app.controller('IssueTypes', function IssueTypesController($scope, $http) {

        var url = '@Url.Action("GetIssueTypes", "Issues")';
        $http.get(url).then(function (response) {

            var _data = angular.fromJson(response);
            $scope.issueTypes = _data.data;
        })
    })

【讨论】：