Como criar componente dropdown com checkbox ASP.NET MVC

Neste post irei demonstrar a criação de um componente  dropdown com checkbox para selecionar as opções desejadas.

Para começar podemos criar uma classe estática para criar o componente que será utilizado numa página razor.

 public static class Extensions

{

        public static MvcHtmlString DropdownCheckbox(this HtmlHelper helper, string placeholder, IEnumerable<SelectListItem> selectList, object htmlAttributes)
        {
            string items = "";
            string rodape = "";
            if (htmlAttributes == null)
            {
                htmlAttributes = new { };
            }
            var attributes = new ExpandoObject() as IDictionary<string, Object>;
            foreach (PropertyInfo property in htmlAttributes.GetType().GetProperties())
            {
                attributes.Add(property.Name, property.GetValue(htmlAttributes));
            }
            
            string idDropdown = "dropdown-" + attributes["data_grid"];
            if (!selectList.Any())
            {
                items += "<li class='col-sm-12 col-md-12'>Sem resultado para " + placeholder + ".</li>";
            }
            else
            {
                rodape += "<div>" +
                            "<div class='col-sm-12 col-md-12'>" +
                                "<div class='col-sm-4 col-md-4'>" +
                                    "<span onclick='ComboboxCheckbox.SelecionarTodos(this);' class='btn' title='Selecionar Todos'><i class='fa fa-lg fa-check-square-o'></i></span></div>" +
                                "<div class='col-sm-4 col-md-4'>" +
                                    "<span class='btn' onclick='ComboboxCheckbox.SelecionarNenhum(this);' title='Selecionar Nenhum'><i class='fa fa-lg fa-square-o'></i></span></div>" +
                                "<div class='col-sm-4 col-md-4'>" +
                                    "<span class='btn' onclick='ComboboxCheckbox.InverterSelecao(this);' title='Inverter Seleção'><i class='fa fa-lg fa-arrows-v'></i></span></div>" +
                            "</div>" +
                        "</div>";
                foreach (var lista in selectList)
                {
                    items += "<li class='col-sm-12 col-md-12'>" +
                                "<label onclick='ComboboxCheckbox.ExibirQuantidade(this,true)'>" +
                                    "<input type='checkbox' name='" + attributes["name"] + "[]' data-texto='" + placeholder + "' data-grid='" + attributes["data_grid"] + "' value='" + lista.Value + "' >&nbsp;" + lista.Value + " - " + lista.Text + "" +
                                "</label>" +
                            "</li>";
                }
            }
            string component = "<div id='" + idDropdown + "'>" +
                    "<div class='dropdown'>" +
                        "<a class='btn btn-default' type='button'>" +
                            "<span>Selecione os " + placeholder + "</span>" +
                            "<span class='caret'></span>" +
                        "</a>" +
                        "<div class='checkbox dropdown dropdown-menu'>" +
                            "<ul class='dropdown-menu-items' style='" + attributes["style"] + ";  overflow-y: scroll;overflow-x: hidden;'>" 
                            + items +
                                 
                            "</ul>" +
                            "<ul><li class='divider'></li></ul>" +
                        rodape+
                        "</div>" +
                   " </div" +
                  "</div>" +
                            "<script type='text/javascript'>" +
                                "$(function(){" +
                                    "$('#"+idDropdown+" a').on('click', function (event) {" +
                                        "$(this).parent().toggleClass('open');" +
                                    "});" +
                                "});" +
                            "</script>";
            
            return new MvcHtmlString(component);
        }

} 

Posteriormente podemos escrever a parte em javascript.

var ComboboxCheckbox = {
                SelecionarTodos: function (el) {
                    $(el).parent().parent().parent().parent().find(".dropdown-menu-items INPUT[type='checkbox']").prop("checked", true);
                    this.ExibirQuantidade(el,false);
                },
                SelecionarNenhum: function (el) {
                    $(el).parent().parent().parent().parent().find(".dropdown-menu-items INPUT[type='checkbox']").prop("checked", false);
                    this.ExibirQuantidade(el,false);
                },
                InverterSelecao: function (el) {
                    $(el).parent().parent().parent().parent().find(".dropdown-menu-items INPUT[type='checkbox']").each(function () {
                        $(this).prop("checked", !$(this).is(":checked"));
                    });
                    this.ExibirQuantidade(el,false);
                },
                ExibirQuantidade: function (el, clickpeloCheckBox) {
                    var quantidade = 0;
                    var texto;
                    if (clickpeloCheckBox) {
                        texto = $($(el).parent().parent().find("INPUT[type='checkbox']")[0]).data("texto");
                        
                        $(el).parent().parent().find("INPUT[type='checkbox']").each(function () {
                            if ($(this).is(":checked"))
                                quantidade++;
                        });
                        $($(el).parent().parent().parent().parent().find("a span")[0]).text(quantidade + " " + texto + " selecionados");
                    } else {
                        texto = $($(el).parent().parent().parent().parent().find(".dropdown-menu-items INPUT[type='checkbox']")[0]).data("texto");
                        $(el).parent().parent().parent().parent().find(".dropdown-menu-items INPUT[type='checkbox']").each(function () {
                            if ($(this).is(":checked"))
                                quantidade++;
                        });
                        $($(el).parent().parent().parent().parent().parent().find("a span")[0]).text(quantidade + " " + texto + " selecionados");
                    }
                }

            }

Na view index.cshtml o componente pode ser chamado da seguinte maneira:

<div class="col-xs-12 col-md-12">
     <div class="form-group col-sm-12 col-md-12">
         <label>Depósitos</label>
         @Html.DropdownCheckbox("depósitos", (IEnumerable<SelectListItem>)ViewBag.DepositosEnum, new { @data_grid = ViewBag.GridId, @name = "Deposito", @style = "width:300px;height:auto;" })
     </div>
 </div>

A ViewBag.DepositosEnum que está no componente pode ser preenchida no controller da view index, passando alguma coleção de IEnumerables<SelectListItem>.