Rockstart
Rockstart

Reputation: 2377

DropDown value not getting submitted in MVC

I am using Bootstrap3 in my MVC5 application.

When I use @HtmlHelper.DropDownFor to show a drop down list, bootstrap styles are not getting applied for the combo box in Internet Explorer.

So as a workaround, I wrote a custom code to show a drop down list.

  <div class="col-md-6 dropdown">
       <button class="col-md-6 form-control input-sm dropdown-toggle" data-val="true" role="button" id="SystemSize" name="dropdown1" data-toggle="dropdown" value="llll">
             <span class="caret pull-right"></span>
        </button>

        <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdown1">
            @foreach (var item in items)
             {
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">@item.Text</a></li>
             }
        </ul>    
  </div>

I referred the following bootstrap link to come up with this approach.

I wrote Jquery to update the text of the button on click of the anchor links in the drop down.

The problem is when I submit the form, this button's text is not getting posted.

How do I solve this?

Upvotes: 0

Views: 632

Answers (1)

Saranga
Saranga

Reputation: 3228

Normally we use Selects instead of drop-down inside forms. Check following link;

http://getbootstrap.com/css/#forms-controls

Example:

<select class="form-control">
    @foreach(var item in items)
    {
        <option value="@(item.Value)" >@item.Text</option>
    }
</select>

If you want to use the Drop-down, then you can use hidden field as follow to store the value and set the value within the function you wrote to update the text.

<input type="hidden" id="SystemSize" name="SystemSize" value="">

Thanks!

Upvotes: 1

Related Questions