Multi Select From Drop down.

Question

I want to use Multi-Select from Dropdown.

 

How it Possible ?

 

#My View Code:

@using System.Data

@using Newtonsoft.Json

@model FTSSolution.Models.Released_Employee

@{

ViewBag.Title = "Create";

DataTable tbl = (DataTable)ViewBag.UserDetails;

//EnumerableRowCollection<DataRow> rows = from user in tbl.AsEnumerable()

// where user.Field<int>("empid") == Model.empID

// select user;

//DataRow dr = (DataRow)rows.FirstOrDefault();

}

@using (Html.BeginForm())

{

@*<div class="CustomErr">

@Html.ValidationMessage("CustomError")

</div>*@

@Html.AntiForgeryToken()

@Html.ValidationSummary(true)

<div style="padding: 5px; font-weight: bold; text-align: center">

@Html.ValidationMessage("CustomError")

</div>

<div class="col-md-2">

@Html.ActionLink("Back to Index", "Index", "", new { @class = "btn btn-info btn-block" })

</div>

<div class="panel panel-success">

<div class="panel-heading">

@*<button type="button" class="close" data-dismiss="modal">&times;</button>*@

<h3 class="panel-title">Released Employee - Entry</h3>

</div>

<div class="panel-body">

<input type="hidden" id="ViewData" data-value="@JsonConvert.SerializeObject(tbl) " />

<div class="form-group row">

<div class="col-md-2">

<label class="control-label pull-right small">Employee Code :</label>

</div>

<div class="col-md-4">

@Html.DropDownList("empID", new SelectList(ViewBag.UserList, "Id", "Name"), new { @Id = "ddlUser", @class = "form-control btn-block", @onchange = "userDetails()" })

@Html.ValidationMessageFor(model => model.empID) (Here I Want use multi select for EmpID)

@Html.Hidden("empCode", new SelectList(ViewBag.UserList, "Id", "Name"), new { @Id = "ddlUser", @class = "form-control btn-block", @onchange = "userDetails()",style = "display:none;" })

@Html.ValidationMessageFor(model => model.empCode)

</div>

</div>

<div class="form-group row">

<div class="col-md-2">

<label class="control-label pull-right small">Name : </label>

</div>

<div class="col-md-4">

<label id="Name" data-value=""></label>

</div>

</div>

<div class="form-group row">

<div class="col-md-2">

<label class="control-label pull-right small">Joining Date : </label>

</div>

<div class="col-md-4">

@*@Html.TextBoxFor(model => model.dtJoin, new { @placeholder = "Joining Date", @class = "form-control", @id = "datepicker" })

@Html.ValidationMessageFor(model => model.dtJoin)*@

<label id="dtJoin" data-value=""></label>

@*@Html.Label(@dr["CatName"].ToString(), new { @ID = "dtJoin" })*@

@*@Html.TextBoxFor(model => model.dtJoin, new { @placeholder = "Joining Date", @class = "form-control", @id = "datepicker" })

@Html.ValidationMessageFor(model => model.dtJoin)*@

</div>

</div>

<div class="form-group row">

<div class="col-md-2">

<label class="control-label pull-right small">Released Date : </label>

</div>

<div class="col-md-4">

@Html.TextBoxFor(model => model.dtReleased, new { @placeholder = "Released Date", @id = "datepicker1", @class = "form-control" })

@Html.ValidationMessageFor(model => model.dtReleased)

</div>

</div>

<div class="form-group row">

<div class="col-md-2">

<label class="control-label pull-right small">Remarks : </label>

</div>

<div class="col-md-4">

@Html.TextBoxFor(model => model.Remarks, "", new { @class = "form-control btn-block" })

@Html.ValidationMessageFor(model => model.Remarks)

@*@Html.TextBoxFor(model => model.CardNo, "2", new { @class = "form-control btn-block", style = "display:none;" })

@Html.TextBoxFor(model => model.dtJoin, "2", new { @class = "form-control btn-block", style = "display:none;" })

@Html.TextBoxFor(model => model.empCode, "2", new { @class = "form-control btn-block", style = "display:none;" })*@

</div>

</div>

<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px;

top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001;

opacity: .8; filter: alpha(opacity=70);display:none">

<p style="position: absolute; top: 20%; left: 40%; color: whitesmoke; font:message-box">

<img src="~/Content/DataTables/images/submit_process.gif">

</p>

</div>

</div>

<br />

<br />

<br />

<div class=" panel-footer clearfix">

<div class="form-group">

<div class="col-md-2">

<input type="submit" value="Submit" class="btn btn-success btn-block" onclick="return confirm('Is your Input Data Correct ?')"/>

</div>

<div class="col-md-2">

@Html.ActionLink("Back to List", "Index", "", new { @class = "btn btn-info btn-block" })

</div>

@*<div class="col-md-2">

<button type="button" id="m" class="btn btn-block btn-warning" data-dismiss="modal">Close</button>

</div>*@

</div>

</div>

</div>

}

<script src="~/Scripts/jquery-2.1.3.min.js"></script>

<script src="~/Scripts/select2.min.js"></script>

<script language="javascript" type="text/javascript">

$('select').select2();

$(document).ready(function () {

$("#datepicker").datepicker({ dateFormat: 'dd-MM-yy' });

$("#datepicker1").datepicker({ dateFormat: 'dd-MM-yy' });

});

function userDetails() {

var x = $("#ddlUser").val();

var data1 = $("#ViewData").data("value");

var data = JSON.stringify(eval("(" + data1 + ")"));

var json = JSON.parse(data);

for (var i = 0; i < json.length; i++) {

if (json[i].empid == x) {

$("#Name").text(json[i].empname.toString());

$("#dtJoin").text(json[i].dtJoin.toString());

}

}

}

@*function JavascriptFunction() {

var url = '@Url.Action("PostMethod", "Home")';

$("#divLoading").show();

$.post(url, null,

function (data) {

$("#PID")[0].innerHTML = data;

$("#divLoading").hide();

});

}*@

$(".display tr").click(function () {

$(this).find(".foo").each(function () {

//alert($(this).val());

});

});

</script>

 

The view will be like this;

 

 

 

Thanks in Advance

Nazmul