MVC 淘汰赛选择标签值赋值答案

【问题标题】：MVC knockout select tag value assignmentMVC 淘汰赛选择标签值赋值
【发布时间】：2017-06-09 16:52:31
【问题描述】：

我正在尝试从 ajax 调用加载选择标签。我可以加载 select 语句，但是当我尝试分配值时它失败了。感谢您的帮助！

HTML 代码

<select data-bind="value: state, options: allStates, optionsText: 'name', optionsValue: 'abbreviation', optionsCaption:'Please pick a state...'" class="form-control" id="state" name="state"></select>'

var cSource = function (data) {
    var self = this;'
    self.state = ko.observable(data.state);
    self.allStates = ko.observableArray([]);

// get the list of states from the server
$.getJSON('@Url.Action( "AllStates", "Home" )', function(myData) {
    // myDate is a list of states
    self.allStates(myData);
});

Not Assigned

var modelData = @Html.Raw( Json.Encode( Model ) );  // does not contain a list of states
    mySource = new cSource(modelData); 
    ko.applyBindings(mySource);

C# 对象

public static List<cStates> usStates()
 {
        List<cStates> myStates = new List<cStates>();
        myStates.Add( new cStates() { abbreviation = "AL", name = "ALABAMA" } );
        myStates.Add( new cStates() { abbreviation = "AK", name = "ALASKA" } );
        ....
        return myStates;
 }

控制器

public ActionResult AllStates()
  {
        return Json( ChoiceProducts.States.BLL.cStates.usStates(), JsonRequestBehavior.AllowGet);
  }

如果我从 javascript json 对象加载状态，它就可以工作。

var states = [{"name": "Alabama","abbreviation": "AL"},{"name": "Alaska",
    "abbreviation": "AK"},.....
self.state = ko.observable(data.state);
self.allStates = ko.observableArray(states);

Properly Assigned

【问题讨论】：

您是否尝试更新 ajax 调用中的状态？或者您是说在页面加载时永远不会分配该值？
如果失败了怎么办？向我们展示控制台中的错误
在页面加载时永远不会分配该值。 self.state = ko.observable(data.state); // 这行不行
那么我们需要更多的代码。就像什么叫cSource 和data 是空的还是未定义的？ data 或 data.state 很可能在页面加载时为空，但如果没有更多代码，很难说出位置和原因。
我添加了绑定和一些图片。我希望这会有所帮助。

标签： javascript c# jquery asp.net-mvc knockout.js

【解决方案1】：

您需要使用淘汰赛的ko.utils.arrayMap 来获取来自服务器的数据。在应用绑定之前，请执行以下操作：

var mappedState = ko.utils.arrayMap(stateObjectFromServer, function(item) {
    return new State(item.name, item.abbreviation);
});

这里有一个很好的资源来帮助你：

http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html

【讨论】：

【解决方案2】：

控制器，我添加了

ViewBag.myStates = ChoiceProducts.States.BLL.cStates.usStates();

HTML，我添加了

self.allStates = ko.observableArray(@Html.Raw( Json.Encode( ViewBag.myStates ) ));

它奏效了。我不必那样做一个单独的 ajax 调用。

【讨论】：