CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
Himaan Singh
Himaan Singh

Reputation: 707

how can i send the value from a dropdown to controller in this scenario

here is my razor syntax -

   <div class="dropdown" style="position:relative">
<a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Filter By <span class="caret"></span></a>
<ul class="dropdown-menu">
    <li>
        <a class="trigger right-caret">Country</a>
        <ul class="dropdown-menu sub-menu">
            @foreach(var itemCountry in Model)
             {
                 if (itemCountry.country.Count != 0)
             {
                 var listCountry = new HashSet<string>(itemCountry.country);
                 foreach (string country in listCountry)
                 {    
                    <li><a href="#">@country</a></li>
                 }
              }
            }
        </ul>
    </li>
    <li><a class="trigger right-caret">City</a>
            <ul class="dropdown-menu sub-menu">
                @foreach (var itemCity in Model)
                {
                    if (itemCity.city.Count != 0)
                    {
                        var listcity  = new HashSet<string>(itemCity.city);
                        foreach (string city in listcity)
                        {
                          <li><a href="#">@city</a></li>
                        }
                    }
                }
        </ul>
    </li>

</ul>

my javascript fro dropdownmenu is this -

   <script type="text/javascript">

$(function () {
    $(".dropdown-menu > li > a.trigger").on("click", function (e) {
        var current = $(this).next();
        var grandparent = $(this).parent().parent();
        if ($(this).hasClass('left-caret') || $(this).hasClass('right-caret'))
            $(this).toggleClass('right-caret left-caret');
        grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
        grandparent.find(".sub-menu:visible").not(current).hide();
        current.toggle();
        e.stopPropagation();
    });
    $(".dropdown-menu > li > a:not(.trigger)").on("click", function () {
        var root = $(this).closest('.dropdown');
        root.find('.left-caret').toggleClass('right-caret left-caret');
        root.find('.sub-menu:visible').hide();
    });
});

in the above code i have populated the submenu of dropdown list with country and city names what i want is to select the one element of the country and send that information to controller as the number of countries or cities will differ how can i get the id and send that value to the controller

Upvotes: 0

Views: 63

Answers (2)

Kinjal Gohil
Kinjal Gohil

Reputation: 968

You can set name parameter in your view like this,

For Country

<li><a href="#">@country.name</a> <input type="hidden" name="Country" value="@country.id" /></li>

For City

<li><a href="#">@city.name</a> <input type="hidden" name="City" value="@city.id" /></li>

Now in your controller method you just call you values like below;

public ActionResult ControllerMethod(string Country = "", string City = "")
{
   // Write your code here
}

Upvotes: 0

Ilya Novojilov
Ilya Novojilov

Reputation: 889

Country and City objects should have a uniq ID, not only name.

so your HTML like this:

<li><a href="#" data-id="@country.id">@country.name</a></li>

same for ciy. So in you 'onClick' handler THIS will be the A element.

var id = this.getAttribute('data-id')
// pass the id to the controller

HTH

Upvotes: 1

Related Questions