从控制器中剔除选择值答案

【问题标题】：Knockout select values from controller从控制器中剔除选择值
【发布时间】：2016-06-14 06:05:27
【问题描述】：

我得到控制器的响应

    [HttpGet]
    public JsonResult GetItems(string date)
    {
        IList<dough> modelList = new List<dough>();
        modelList.Add(new dough { Type = "framed" });
        modelList.Add(new dough { Type = "unframed" });
        modelList.Add(new dough { Type = "soft" });
        return Json(modelList, JsonRequestBehavior.AllowGet);
    }

并以这种方式显示它

<table>
<thead>
    <tr><th>Waste</th></tr>
</thead>
<tbody data-bind="foreach: items">
    <tr>
        <td><select data-bind="options: $root.availableWastes, value: Waste, optionsText: 'Type'"></select></td>
    </tr>
</tbody>
</table>

结果

主要问题是如何显示从控制器获取的具有默认值的项目？需要解决什么问题？

控制器：

public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public JsonResult GetItems(string date)
    {
        IList<dough> modelList = new List<dough>();
        modelList.Add(new dough { Type = "framed" });
        modelList.Add(new dough { Type = "unframed" });
        modelList.Add(new dough { Type = "soft" });
        return Json(modelList, JsonRequestBehavior.AllowGet);
    }
}
class dough
{
    public string Type { get; set; }
}

索引.cshtml

@{
ViewBag.Title = "Index";
}

<script src="~/Scripts/knockout-2.2.0.js"></script>

<button data-bind="click: loadItems">Load</button>
<table>
<thead>
    <tr><th>Waste</th></tr>
</thead>
<tbody data-bind="foreach: items">
    <tr>
        <td><select data-bind="options: $root.availableWastes, value: Waste, optionsText: 'Type'"></select></td>
    </tr>
</tbody>
</table>

<script>
function MyViewModel() {
    var self = this;

    self.availableWastes = [{ Type: "framed", score: 0 },
                            { Type: "soft", score: 1 },
                            { Type: "unframed", score: 2 }];

    self.items = ko.observableArray();
    var date = new Date();
    self.loadItems = function () {
        var date = new Date();
        debugger;
        $.ajax({
            cache: false,

            type: "GET",

            url: "Home/GetItems",

            data: { "date": date },

            success: function (data) {

                var result = "";
                self.items.removeAll();
                $.each(data, function (id, item) {
                    self.items.push({ Waste: item.Type });
                });
            },

            error: function (response) {
                alert('eror');
            }
        });
    }
}
ko.applyBindings(new MyViewModel());
</script>

【问题讨论】：

标签： asp.net-mvc-4 knockout.js

【解决方案1】：

看起来您想预先选择值。

将 self.items 与 Type name 和 Waste 更新为 observable：

self.items.push({ Waste: ko.observable(item.Type), Type: item.Type });

然后在 optionsValue 绑定中使用它：

<select data-bind="options: $root.availableWastes, value: Waste, optionsText: 'Type', optionsValue: 'Type'">

截图：

【讨论】：