在淘汰赛中将数组推到 select 仅提供一个选项

Question

我正在使用 MVC 和 Razor View 我正在尝试使用淘汰模型将从控制器接收的数据绑定到 select，如果我尝试直接推送动态数组，我只有一个选项像这个

只有一个选项select：

我确信我遗漏了一些愚蠢的东西，我已经尝试 return 一个新的 SelectList 并使用 optionsText 和 optionsValue 但没有不要做这项工作。我确定淘汰模型是正确的，因为如果我写

viewModel.dliveryDates.push("option1","option2");

它按预期工作

这是我的控制器代码，它从数据库中读取一些数据并将其发送回视图

[HttpPost]
public JsonResult GetDeliveryDates(string code)
{
    OrderHeaderPageModel instance = ObjectFactory.Create<OrderHeaderPageModel>();
    instance.DeliveryDateRanges = PopulateDeliveryDateRanges(code);
    return Json(instance.DeliveryDateRanges.ToArray());
}

这是我的查看代码

@Html.DropDownList("deliveryranges", new SelectList(string.Empty, "Code", "Description"), "- Seleziona -", new { @data_bind = "options:dliveryDates" })

最后是我的淘汰赛模型

function OrderHeaderViewModel() {
    var self = this;
    self.save = function () {
        return true;
    }
    self.dliveryDates = ko.observableArray([]);
}

var viewModel = new OrderHeaderViewModel();
ko.applyBindings(viewModel, el);

$("#ordertypes").change(function () {
    var postUrl = "/checkout/getdeliverydates";
    $("#deliveryranges").empty();
    $.post(postUrl,
        {
            code: $("#ordertypes").val(),
            __RequestVerificationToken: Sana.Utils.getAntiForgeryToken()
        }, function (data) {
            var arry = [];
            var array = $.map(data, function (value, index) {
                return [value];
            });
            $.each(data, function (i, data) {
                arry.push(data.Code);
            });  
            viewModel.dliveryDates.push(arry);
        }
    );
})

Answer 1

看起来代码正在做一些额外的工作来映射 ajax 回调中未使用的数据。希望以下代码对您有所帮助。

function OrderHeaderViewModel() {
  var self = this;
  self.getData = function() {

    //function to simulate filling the array from the server.
    var data = ["Item 1", "Item 2", "Item 3", "Item 4"];
    self.dliveryDates(data);

    var mappedData = data.map(function(item, index) {
      return {
        id: index,
        description: item

      };
    });
    viewModel.mappedDliveryDates(mappedData);

  }
  self.save = function() {
    return true;
  }
  //added to put the selected values in
  self.selectedValue = ko.observable();
  self.selectedMappedValue = ko.observable();

  self.mappedDliveryDates = ko.observableArray([]);
  self.dliveryDates = ko.observableArray([]);

}

var viewModel = new OrderHeaderViewModel();
ko.applyBindings(viewModel);

$("#ordertypes").change(function() {
  var postUrl = "/checkout/getdeliverydates";
  $("#deliveryranges").empty();
  $.post(postUrl, {
    code: $("#ordertypes").val(),
    __RequestVerificationToken: Sana.Utils.getAntiForgeryToken()
  }, function(data) {
    // if the data needs to be transformed and is already an array then you can use
    var mappedData = data.map(function(item, index) {
      return {
        id: index,
        description: item
      };
    });
    // If the data is already in the format that you need then just put it into the observable array;
    viewModel.mappedDliveryDates(mappedData);
    viewModel.dliveryDates(data);
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

Server Data Values -
<select data-bind="options: dliveryDates, value:selectedValue, optionCaption: 'Choose...'"></select>
<br/> Mapped Values -
<select data-bind="options: mappedDliveryDates, optionsText:'description', value: selectedMappedValue, optionCaption: 'Choose...'"></select>
<br/>
<button data-bind="click: getData">Load Data</button>
<br/>
<br/>
<pre data-bind="text: ko.toJSON($root)"></pre>

在淘汰赛中将数组推到 select 仅提供一个选项

Pushing array to select in knockout gives just one option

model-view-controller

razor

knockout.js