Nazmul Badsha

Nazmul Badsha

  • NA
  • 402
  • 85.1k

Multi Select From Drop down.

Oct 14 2017 1:02 AM
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

Answers (3)