从AJAX填充DropdownList(ASP.NET MVC)

时间:2017-06-02 08:13:09

标签: c# jquery asp.net ajax asp.net-mvc

我的视图中有下拉列表

 @Html.DropDownList("Question1", null, "Вопрос 1", htmlAttributes: new {@class = "form-control", @style = "height:40px;margin-bottom: 20px;"})

我有AJAX调用,显示所有问题

这是

 function question_update() {
    $(".count").empty();
    $.ajax({
        url: '@Url.Action("QuestionsList", "Questions")',
        contentType: 'application/json; charset=utf-8',
        type: 'GET',
        dataType: 'json',
        processData: false,
        success: function (result) {
            var email = result;
            var edit = '@Url.Content("~/Images/Edit.png")';
            var delete_ = '@Url.Content("~/Images/Delete.png")';
            // console.log(result[0].Name);
            for (var i = 0; i <= email.length - 1; i++) {
                var arrow  = '@Url.Content("~/Images/plus_plus.png")';
                var questionHtml = '<div class = "title" style="margin-top:15px;margin-left:15px;margin-bottom:10px;">'
                    +
                    '<img class="click" src="'
                    + arrow
                    + '">' +
                    '<span class="test">' +
                    '<input type="text" class="testclass" readonly value="' +
                    result[i].Quest + '">' +
                    '<a style="margin-left:25px;">' +
                    '<img src="' + edit + '"/>' +
                    '<img style="margin-left:10px;" src="' + delete_ + '"/>' +
                    '</div>' +
                    '<div class ="content" style="margin-left:60px; width: 80%; height: 100px; background: white;">' +
                    '<div style="width: 100%">' +
                    '<div style="float:left; width: 50%;">' +
                    '<b style="margin-left: 40px;">' + "Время на ответ"  + '</b>' +
                    '<b>' + ":" + '</b>' +
                    '<span>' + "Время на подготовку" +'</span>'+
                    '</div>' +
                    '<div style="float:right; width: 50%;">' +
                    '<b>' + result[i].TimeForAnswer + '</b>' +
                    '<b>' + ":" + '</b>' +
                    '<b>' + result[i].TimeForReady + '</b>'+
                    '</div>' +
                    '</div>' +
                    '</div>';
                $(".count").append(questionHtml);

成功后,我需要更新下拉列表中的值

我就这样做了

  function question_update() {
    $(".count").empty();
    $.ajax({
        url: '@Url.Action("QuestionsList", "Questions")',
        contentType: 'application/json; charset=utf-8',
        type: 'GET',
        dataType: 'json',
        processData: false,
        success: function (result) {
            var email = result;
            var edit = '@Url.Content("~/Images/Edit.png")';
            var delete_ = '@Url.Content("~/Images/Delete.png")';
            // console.log(result[0].Name);
            for (var i = 0; i <= email.length - 1; i++) {
                var arrow  = '@Url.Content("~/Images/plus_plus.png")';
                var questionHtml = '<div class = "title" style="margin-top:15px;margin-left:15px;margin-bottom:10px;">'
                    +
                    '<img class="click" src="'
                    + arrow
                    + '">' +
                    '<span class="test">' +
                    '<input type="text" class="testclass" readonly value="' +
                    result[i].Quest + '">' +
                    '<a style="margin-left:25px;">' +
                    '<img src="' + edit + '"/>' +
                    '<img style="margin-left:10px;" src="' + delete_ + '"/>' +
                    '</div>' +
                    '<div class ="content" style="margin-left:60px; width: 80%; height: 100px; background: white;">' +
                    '<div style="width: 100%">' +
                    '<div style="float:left; width: 50%;">' +
                    '<b style="margin-left: 40px;">' + "Время на ответ"  + '</b>' +
                    '<b>' + ":" + '</b>' +
                    '<span>' + "Время на подготовку" +'</span>'+
                    '</div>' +
                    '<div style="float:right; width: 50%;">' +
                    '<b>' + result[i].TimeForAnswer + '</b>' +
                    '<b>' + ":" + '</b>' +
                    '<b>' + result[i].TimeForReady + '</b>'+
                    '</div>' +
                    '</div>' +
                    '</div>';
                $(".count").append(questionHtml);

                $.ajax({
                    url: '@Url.Action(" QuestionsList_new", "Questions")',
                    contentType: 'application/json; charset=utf-8',
                    type: 'GET',
                    dataType: 'json',
                    processData: false,
                    success: function (result) {
                        var $vacancy = $("#Question1");
                        $vacancy.empty();
                        $.each(result, function (a, b) {
                            $vacancy.append('<option value="' + b.Value + '">' + b.Text + '</option>');
                        });
                    }
                });
            }
        }
    });
}

但我没有在DropdownList中看到任何更新。

我的问题在哪里?

更新

一切都好。但我有新问题。在我的下拉列表中,我有undefined

<select class="form-control" id="Question1" name="Question1" style="height:40px;margin-bottom: 20px;"><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option><option value="undefined">undefined</option></select>

我如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

根据您从服务器返回的result变量的示例数据:

{ ID = 1048, Quest = "тест" }

你的.each循环需要如下所示:

$.each(result, function (a, b) {
  $vacancy.append('<option value="' + b.ID + '">' + b.Quest + '</option>');
});

属性&#34; text&#34;和&#34;价值&#34;你试图访问的数据并不存在于数据中,因此为什么你得到了#34; undefined&#34;。您需要使用所涉及的实际属性的名称。

相关问题