带有 ViewBag 的 Knockoutjs DropDownList答案

【问题标题】：Knockoutjs DropDownList with ViewBag带有 ViewBag 的 Knockoutjs DropDownList
【发布时间】：2016-04-11 03:19:54
【问题描述】：

我的 ViewBag 中存储了一个 SelectList，我希望使用 Knockout js。

这是我目前使用没有任何 js 的 ViewBag 列表时的视图

@model IEnumerable<Site.Models.TicketsOrdered>
<head>
<title>Order</title>
<link rel="stylesheet" href="~/Content/TableSheet.css">
@using GeogSocSite.Models
</head>
<body>
<h1>Choose Your Tickets</h1>
<table align="center" cellspacing="2" border="1" data-bind='visible: gifts().length > 0'>
   <thead>
     <tr>
        <th align="center">Description</th>
        <th align="center">Price</th>
        <th align="center">Add</th>
    </tr>
    </thead>
    <tbody>
           @foreach (Site.Models.Ticket t in ViewBag.listTickets)
           {
            <tr>
                <td align="center">@t.Description</td>
                <td align="center">@t.Price</td>
                <td align="center">@Html.DropDownList("Quantity", (IList<SelectListItem>)ViewBag.Quantities) </td>

            </tr>
           }
    </tbody>
</table>
<div id="proceed">
    @Html.ActionLink("Proceed", "Order", "Order")
</div>
<div>
    @Html.ActionLink("Back to List", "Index","Events")
</div>

</body>

我希望能够在单击继续按钮时保存从下拉列表中选择的值

我查看了关于敲除 js 的文档并查看了示例，但许多都引用了级联下拉列表或刚刚在视图中创建的下拉列表，就像我在这里找到的示例一样

@model IEnumerable<Site.Models.TicketsOrdered>
<head>
<title>Order</title>
<link rel="stylesheet" href="~/Content/TableSheet.css">
@using GeogSocSite.Models
</head>
<body>
<h1>Choose Your Tickets</h1>
  <tr>
    <td class="label">Drop-down list:</td>
    <td><select data-bind="options: optionValues, value:  selectedOptionValue"></select></td>
 </tr>
  <tr>
        <td class="label">Selected option:</td>
        <td data-bind="text: selectedOptionValue"></td>
    </tr>
 <div id="proceed">
    @Html.ActionLink("Proceed", "Order", "Order")
</div>
<div>
    @Html.ActionLink("Back to List", "Index","Events")
</div>

</body>
<script type="text/javascript">
var viewModel = {
optionValues : ["Alpha", "Beta", "Gamma"],
selectedOptionValue : ko.observable("Gamma"),

};
ko.applyBindings(viewModel);
</script>

如果有人可以帮助我锻炼如何使用 Knockoutjs 和我的 ViewBag.quantities 列表，以便在单击继续时可以保存选择的数量，那太好了，因为我完全被卡住了！

【问题讨论】：

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

【解决方案1】：

您只需将data-bind 传递给它接受htmlAttributes 的Html Helper，所以：

@Html.DropDownList("Quantity", (IList<SelectListItem>)ViewBag.Quantities,"", new {data_bind=" value:  selectedOptionValue"});

您的代码将是这样的：

<h1>Choose Your Tickets</h1>
  <tr>
    <td class="label">Drop-down list:</td>
    <td>@Html.DropDownList("Quantity", (IList<SelectListItem>)ViewBag.Quantities,"", new {data_bind=" value:  selectedOptionValue"});</td>
 </tr>
  <tr>
        <td class="label">Selected option:</td>
        <td data-bind="text: selectedOptionValue"></td>
    </tr>
 <div id="proceed">
    <a data-bind="attr:{href: "@Url.Action("Order","Order")/"+ selectedOptionValue()}">Proceed</a>
    <!-- Or with querystring !-->
    <!-- <a data-bind="attr:{href: "@Url.Action("Order","Order")?quantity="+ selectedOptionValue()}">Proceed</a>!-->    
</div>
<div>
    @Html.ActionLink("Back to List", "Index","Events")
</div>

</body>
<script type="text/javascript">
    (function(){
        var viewModel = {
            selectedOptionValue : ko.observable(),
        };
        ko.applyBindings(viewModel);
    })();   
</script>

【讨论】：

感谢您的帮助，如果我使用 Html Helper 来保存单击 Proceed 后选择的数量，我需要在淘汰脚本中放入什么？谢谢。我知道我不能使用表单来提交数据，因为要提交多个数量。
@CatherineG 我更新了我的答案，别忘了标记为正确。