Question

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

这是我到目前为止使用我的ViewBag列表时没有任何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>
<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列表，那么当点击继续时可以保存所选的数量，因为我完全陷入了困境！

Answer 1

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

@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>

使用ViewBag Knockoutjs DropDownList

1 个答案: