CODEWITHSUNDEEP
javascriptjqueryajaxtwitter-bootstrapmodel-view-controller
Aoren
Aoren

Reputation: 105

JS to get the value of Bootstrap dropdown

Can someone help me out?

I've been days trying to get the selected option in a bootstrap dropdown by C# custom helper methods, HTML, and so on... but I think the only way is by a script. I know literally zero of JS but if you want to throw me an article I will read it gladly and try to understand it so no worries. In fact I want to understand everything web-related but I'm saving javascript for later. The thing is, I must do this now.

In the dropdown there are two options and using MVC I need to send to the Controller either true, false or null by the selected value (null if none was selected).

Dropdown

                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="height:28px">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li class="dropdown-header">Sort by</li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Selected</a></li>
                            <li><a href="#">Unselected</a></li>
                        </ul>
                    </div>

Controller

                    public ActionResult Index(bool? export = null) {  

                    ViewData["export"] = export;  

                    //To do stuff

                    return View();
                   }

Any idea of how to achieve this?

Upvotes: 0

Views: 544

Answers (2)

G-Host
G-Host

Reputation: 376

Since you use bootstrap, jquery is included in your code, you can attach the event to dropdown click

$('.dropdown-menu li a').click(function() {
    console.log($(this).data('value'));
});

and edit html anchor in this way

<li><a href="#" data-value="true">Selected</a></li>
<li><a href="#" data-value="false">Unselected</a></li>

This will print true/false in console, use alert instead to show a popup window.

Upvotes: 0

JDupont
JDupont

Reputation: 1352

Check this out:

https://msdn.microsoft.com/en-us/library/dd504972(v=vs.118).aspx

There is an overload for ActionLink that allows you to specify a route value object. It would look something like this:

<li>@Html.ActionLink("Selected", "Index", "Home", new { export = true }, null)</li>

I'm just guessing your controller is Home and the null at the end is because the overload is expecting an html attributes object as well.

Upvotes: 2

Related Questions