@{
    List<string> cities = ViewBag.Cities;
}

<div>
    <label>Select an item</label>
    <div id="list" style="width:250px;height:200px"></div>
</div>
<p>
    <b>SelectedIndex: <span id="lbSelIdx"></span></b>
</p>
<p>
    <b>SelectedValue: <span id="lbSelVal"></span></b>
</p>

<c1-list-box id="list" selected-index="0" selected-index-changed="selectedIndexChanged">
    <c1-items-source source-collection="@cities"></c1-items-source>
</c1-list-box>

@section Description{
    This sample shows the basic usage of the ListBox control.
}

@section Scripts{
    <script>
    function selectedIndexChanged(sender) {
        document.getElementById('lbSelIdx').innerHTML = sender.selectedIndex;
        document.getElementById('lbSelVal').innerHTML = sender.selectedValue;
    }
    </script>
}