drop down list not getting updated on selection change - model-view-controller

Question

PFB my code. I have designed a drop down list using bootstrap in asp.net mvc. The contents of the list are static and hard coded. When selection is changed in drop down, the latest item is not updated. I am attaching my code as well as the screenshot of the issue. In drop down list, even if I select Assigned, the status list is not getting updated.
the status field is not changing to assigned or in progress<div class="dropdown">
<button class="btn btn-default dropdown-toggle" runat="server" type="button" id="dropdownStatus" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Status
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownStatus">
<li>Assigned</li>
<li>In Progress</li>
<li>Resolved</li>
</ul>
</div>

Answer 1

You'll have to use Javascript to update the model if you use a bootstrap dropdown. Just keep a hidden for on the page, then attach a handler to the dropdown's change.
One thing to note is that Bootstrap dropdowns don't fire a change event. You'll have to attach handlers to the individual items. Something like this:
$('.dropdown-menu a').click(function(e) {
// set the hidden field to the new value
var newValue = $(this).text();
$('#foo').val(newValue);
});
#Html.HiddenFor(m => m.myProperty, new {id = "foo"})
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" runat="server" type="button" id="dropdownStatus" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Status
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownStatus">
<li>Assigned</li>
<li>In Progress</li>
<li>Resolved</li>
</ul>
</div>
Of course, if you don't really need a Bootstrap dropdown, and perhaps only need it to look like it, you could do it very easily by just using a regular HTML dropdown and styling it like a bootstrap dropdown:
#Html.DropDownListFor(m => m.myProperty, new {#class = "form-control"})
form-control is a bootstrap css class that makes your input controls more Bootstrap-like. It's not exactly the same though (although I like it better), so the choice will be up to you.