title: Bootstrap-Multiselect Dropdown passing parameter to controller using Jquery Ajax in ASP.NET MVC
body: <p>I have created the multiselect dropdown list using Bootstrap-multiselect and passing the selected parameter to controller in Asp.Net MVC 5 with help of Jquery Ajax. i have written the code for my searched result to filtered like states, industry type and etc., its working code.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var stateValues;
  var Industrytype;
  var capitalValues;
  var _CompanyStatus;
  
  $(document).ready(function () {
      $('#StateList').multiselect({
          buttonWidth: '400px',
          maxHeight: 200,
          enableCaseInsensitiveFiltering: true,
          includeSelectAllOption: true,
          enableClickableOptGroups: true,
          nonSelectedText: '-- Select State --',
          templates: {
              button: '&lt;button type="button" class="btn btn-light multiselect" data-toggle="dropdown"&gt;&lt;span class="multiselect-selected-text"&gt;&lt;/span&gt; &amp;nbsp;&lt;b class="fa fa-caret-down pull-right"&gt;&lt;/b&gt;&lt;/button&gt;',
              ul: '&lt;ul class="col-md-12 multiselect-container dropdown-menu"&gt;&lt;/ul&gt;',
              filter: '&lt;li class="multiselect-item filter sticky-top"&gt;&lt;div class="input-group"&gt;&lt;input class="form-control multiselect-search" placeholder="Search State here..." type="text"&gt;&lt;/div&gt;&lt;/li&gt;',
              filterClearBtn: '&lt;span class="input-group-btn"&gt;&lt;button class="btn btn-default btn-white btn-grey multiselect-clear-filter" type="button"&gt;&lt;i class="fa fa-times-circle red2"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/span&gt;',
              li: '&lt;li&gt;&lt;a href="javascript:void(0);"&gt;&lt;label&gt;&lt;/label&gt;&lt;/a&gt;&lt;/li&gt;',
              divider: '&lt;li class="multiselect-item divider"&gt;&lt;/li&gt;',
              liGroup: '&lt;li class="multiselect-item group"&gt;&lt;label class="multiselect-group"&gt;&lt;/label&gt;&lt;/li&gt;'
          }
      });
      $("#StateList").change(function () {
          stateValues = $("#StateList").val();
          $("#progress").show();
          AjaxRequest(stateValues, Industrytype, capitalValues, _CompanyStatus)
      });
  });
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function AjaxRequest(_StateList, _IndustryList, _RangeList, _StatusList) {
      $.ajax({
          type: "POST",
          url: '@Url.Action("BasicSearch","Home")',
          dataType: "html",
          contentType: "application/json; charset=utf-8",
          data: JSON.stringify({ CompanyStatus: _StatusList, searchWord: '@ViewBag.RadioButtonValue', authCapital: _RangeList, STRMSSelected: _StateList, currentFilter: '@ViewBag.CurrentSearch', industryType: _IndustryList }),
          success: function (data) {
              $("#progress").hide();
              $("#list").html(data);
          }
      });
  }
  </code></pre>
  
  <p></p>
  
  <p><strong>View Code</strong></p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet" /&gt;
  
  
  &lt;div class="col-md-12"&gt;
          &lt;hr /&gt;
          &lt;select id="StateList" multiple&gt;
              @foreach (var item in ViewBag.StateList)
              {
                  &lt;option value="@item"&gt;@item&lt;/option&gt;
              }
          &lt;/select&gt;
      &lt;/div&gt;
  </code></pre>