Example of multiple select check box list in MVC

Press Me

Add 3 files in bundel
 "~/Scripts/core.js",
 "~/Scripts/widget.js",
 "~/Scripts/multiselect.js"
Add one css file in
jquery.multiselect.css


@model MvcApplication5.ViewModel.EmpVM

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>EmpVM</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.CID)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.CID, new SelectList(Model.COUNTRYD,"CID","CNAME"), "Select", new { style = "width:200px"  })
            @Html.ValidationMessageFor(model => model.CID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.SID)
        </div>
        <div class="editor-field">
            <div>
                @Html.ListBoxFor(model => model.SID, new MultiSelectList(Model.STATED, "SID", "SNAME"), new { size = 3, style = "width:200px", @id = "ddl",@name="ddl" })
            </div>
            @Html.ValidationMessageFor(model => model.SID)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    $(function () {
        $('#ddl').multiselect();
        $('#CID').change(function(){
            $.getJSON('@Url.Action("Get")', { CID: $('#CID :selected').val() }, function (data)
            {
                $("#ddl").empty();
                $.each(data, function (i, j) {
                    $("#ddl").append($('<option>').text(j.SNAME).attr("value", j.SID));
                });
                $("#ddl").multiselect();
                $("#ddl").multiselect("refresh");
            });
        });
       
    });
    </script>
}

Some example of the event
---------------------------------------------------------------------------------------------------------------------
$('.ui-widget').multiselect("widget").find("input:checked").length

  $("#lstWorkgroup").multiselect({
        click: function (event, ui) {
            var count = $("#lstWorkgroup").multiselect("getChecked").map(function () {
                return this.value;
            }).get();
            if (count.length > 0)
            {

            }
        }
    });
$("#lstWorkgroup").multiselect({
        checkAll: function (event, ui) {
            $('#errormsgWorkgroup').empty();
        }
    });

Auto complete in MVC

autocomplete example
you have to add jquery libary file in bundle
  "~/Scripts/jquery-ui-1.8.24.js"


@model MvcApplication6.ViewModel.EMP

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>EMP</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.EID)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.EID)
            @Html.ValidationMessageFor(model => model.EID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.NAME)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NAME)
            @Html.ValidationMessageFor(model => model.NAME)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}



@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")


<script type="text/javascript">
    $(function () {


        $("#NAME").autocomplete({
            minLength: 0,
            source: '@Url.Action("Gets")',
            focus: function () {
            },
            select: function (event, ui) {
            }
        });


    });
</script>

}

controler

 public JsonResult Gets(string term)
        {
            using (TestEntities obj = new TestEntities())
            {
                return Json(obj.EMP1.Where(m => m.NAME.StartsWith(term)).Select(n => n.NAME).ToList(), JsonRequestBehavior.AllowGet);
            }
        }