CODEWITHSUNDEEP
asp.net-mvc-3twitter-bootstrap
John John
John John

Reputation: 1

How can i use the bootstrap dropdowns and alerts instead of the @Html.DropDownList & alert for my asp.net MVC

i have the following view that contains an @Html.DropDownList :-

<fieldset> 
        <legend>Answer here</legend> 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.Description) 
        </div> 
        <div class="editor-field" data-toggle="dropdown"> 
            @Html.EditorFor(model => model.Description) 
            @Html.ValidationMessageFor(model => model.Description) 
        </div> 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.IsRight) 
        </div> 
        <div class="editor-field"> 
             @Html.DropDownList("IsRight", String.Empty) 
            @Html.ValidationMessageFor(model => model.IsRight) 
        </div>  
    </fieldset>

and the following Java Script that display a simple alert message:-

<script type="text/javascript">
    function removePartial2() {z
        alert('Deletion was successful'); 
        $(this).remove();
}
</script>

i have downloaded the associated script files (bootstrap-dropdown.js & bootstrap-alert.js) from bootstrap website, but i do not know how i can modify the above code to be able to use both the bootstrap dropdown and bootstrap alerts messages inside my asp.net MVC.? BR

Upvotes: 3

Views: 4631

Answers (3)

Rob Pemberton
Rob Pemberton

Reputation: 31

The out-of-the-box implementation is not going to work with boostrap. However, you can use "helpers" in razor to build the dd any way you like. This post from scottgu should help you out:

Upvotes: 0

vicentedealencar
vicentedealencar

Reputation: 933

As you can see in http://twitter.github.com/bootstrap/components.html#buttonDropdowns they are not meant to work like a .net dropdownlist as it don't keep the selected value, but you can do some workarounds in javascript. I would not recommend it...

Upvotes: 1

Beyers
Beyers

Reputation: 9108

You will have to reference the bootstrap CSS file as well, and you wont be able to use Html.DropDownList, you will have to format the html as per bootstrap's example, something in the lines of:

<ul class="nav pills">
     <li class="dropdown" id="menu1">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
          Dropdown
          <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
    </li>
</ul>

Similar with the alert:

<div class="alert">
  <a class="close" data-dismiss="alert">×</a>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Upvotes: 0

Related Questions