CODEWITHSUNDEEP
javascriptc#asp.net-mvcknockout.js
mara19
mara19

Reputation: 121

Knockoutjs DropDownList with ViewBag

I have a SelectList stored in my ViewBag and I wish to use Knockout js.

This is my View so far when using my ViewBag list without any 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>

I want to be able to save the values selected from the dropdownlist when the proceed button is clicked

I have looked at the documentation on knockout js and looked at the examples but many refer to cascading dropdowns or dropdowns which are just created in the View like the example I found here

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

If anyone can help me workout how to use Knockoutjs and my ViewBag.quantities list so that the quantities selected can be saved when proceed is clicked that would be great as I'm totally stuck!

Upvotes: 0

Views: 1026

Answers (1)

Joel R Michaliszen
Joel R Michaliszen

Reputation: 4222

You just need to pass the data-bind to the Html Helper it accepts htmlAttributes, so :

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

Your code will be like that:

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

Upvotes: 1

Related Questions