如何在此方案中将值从下拉列表发送到控制器

时间:2016-05-11 05:21:54

标签: javascript jquery asp.net-mvc

这是我的剃刀语法 -

   <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>

我的javascript来自dropdownmenu就是这个 -

   <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();
    });
});

在上面的代码中我填写了下拉列表的子菜单,其中包含国家和城市名称我想要的是选择国家的一个元素并将该信息发送给控制器,因为国家或城市的数量会有所不同 我怎样才能获得id并将该值发送给控制器

2 个答案:

答案 0 :(得分:1)

国家和城市对象应具有uniq ID,而不仅仅是名称。

所以您的HTML就像这样:

<li><a href="#" data-id="@country.id">@country.name</a></li>
对于ciy来说同样如此。 所以在你'onClick'处理程序中,这将是A元素。

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

HTH

答案 1 :(得分:0)

您可以在视图中设置名称参数,如下所示

国家

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

对于城市

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

现在在您的控制器方法中,您只需要调用下面的值;

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