Hi zeeshanpas,
Please refer below sample.
Model
public class School
{
public string Subject { get; set; }
public string SchoolLevel { get; set; }
public string SelectCourse { get; set; }
public string SelectedCourses { get; set; }
public bool Ready_To_Take_multiple_session { get; set; }
public bool Need_To_take_a_demo_session { get; set; }
}
Controller
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Insert(List<School> schools)
{
// Code to insert in database;
return Json(schools[0]);
}
}
View
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript">
$(function () {
$('body').on("click", "[id*=btnMoveLeft]", function () {
var items = $(this).closest('.moveItem');
$(items).find($("[id*=ddlSelectedCourses]")).empty();
var options = $(items).find($("[id*=ddlCourses] option:selected"));
for (var i = 0; i < options.length; i++) {
var opt = $(options[i]).clone();
$(items).find($("[id*=ddlSelectedCourses]")).append(opt);
}
});
$('body').on("click", "[id*=btnDelete]", function () {
if ($('[id*=dvTutorCourse]').length > 1) {
$(this).closest('[id*=dvTutorCourse]').remove();
}
});
$("[id*=btnAdd]").on("click", function () {
var div = $("#dvTutorCourse").clone();
$("#dvDynamic").append(div);
});
$("[id*=btnInsert]").on("click", function () {
var datas = $('[id*=dvTutorCourse]');
var schools = [];
datas.each(function () {
var school = {};
school.Subject = $(this).find($("[id*=ddlSubject]")).val();
school.SchoolLevel = $(this).find($("[id*=ddlSchoollevel]")).val();
var courses = [];
var selectedCourses = $(this).find($("[id*=ddlSelectedCourses] option"));
selectedCourses.each(function () {
courses.push($(this).val());
});
school.SelectCourse = courses.join(',');
schools.push(school);
});
alert(JSON.stringify(schools));
$.ajax({
type: "POST",
url: "/Home/Insert",
data: JSON.stringify(schools),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
}
});
});
});
</script>
<div class="container">
<div class="panel panel-success toggle">
<div class="panel-heading">
<h4 class="panel-title">
Tutor Course Details</h4>
</div>
<div class="panel-body pt0 pb0" id="Tutorscourse">
<div class="form-horizontal group-border stripped">
<div id="dvTutorCourse">
<div class="form-group clearfix">
<div class="col-md-12">
<div class="row">
<div class="col-lg-6 col-md-6 fev-mb15">
<%:Html.Label("Subject")%>:
<%:Html.HiddenFor(m => m.Subject, new { @id = "hdnSubjectID" })%>
<%:Html.DropDownListFor(m => m.Subject, new List<SelectListItem>
{ new SelectListItem{Text="Maths", Value="Maths"},
new SelectListItem{Text="English", Value="English"},
new SelectListItem{Text="Science", Value="Science"},
new SelectListItem{Text="Social", Value="Social"}}, "Please select",
new { @id = "ddlSubject", @class = "fancy-select form-control", @tabindex = "2" })%>
</div>
<div class="col-lg-6 col-md-6">
<%:Html.Label("School Level ")%>
<%:Html.HiddenFor(m => m.SchoolLevel, new { @id = "hdnSchoolLevel" })%>
<%:Html.DropDownListFor(m => m.SchoolLevel, new List<SelectListItem>
{ new SelectListItem{Text="High", Value="High"},
new SelectListItem{Text="Middle", Value="Middle"},
new SelectListItem{Text="Low", Value="Low"}}, "Please select",
new { @id = "ddlSchoollevel", @class = "fancy-select form-control", @tabindex = "2" })%>
</div>
</div>
</div>
</div>
<div class="moveItem">
<div class="bootstrap-duallistbox-container row">
<div class="box1 col-md-6">
<label for="bootstrap-duallistbox-nonselected-list_duallistbox">
Select Courses</label>
<div class="btn-group buttons">
<button type="button" class="btn moveall btn-default col-sm-6 btn-block" title="Move all"
id="btnMoveAllLeft">
<i class="glyphicon glyphicon-arrow-right arrow-color"></i><i class="glyphicon glyphicon-arrow-right arrow-color">
</i>Move all
</button>
<button type="button" class="btn move btn-default col-sm-6 btn-block" title="Move selected"
id="btnMoveLeft">
<i class="glyphicon glyphicon-arrow-right arrow-color"></i>Move selected
</button>
</div>
<%:Html.ListBoxFor(m => m.SelectCourse, new List<SelectListItem>
{ new SelectListItem{Text="Course1", Value="C1"},
new SelectListItem{Text="Course2", Value="C2"},
new SelectListItem{Text="Course3", Value="C3"}},
new { @class = "fancy-select form-control", @id = "ddlCourses", @size = 10, @tabindex = "3" })%>
</div>
<div class="box1 col-md-6">
<label for="bootstrap-duallistbox-nonselected-list_duallistbox">
Selected Courses</label>
<div class="btn-group buttons">
<button type="button" class="btn removeall btn-default col-sm-6 btn-block" title="Remove all"
id="btnMoveAllRight">
<i class="glyphicon glyphicon-arrow-left arrow-color"></i><i class="glyphicon glyphicon-arrow-left arrow-color">
</i>Remove all
</button>
<button type="button" class="btn remove btn-default col-sm-6 btn-block" title="Remove selected"
id="btnMoveRight">
Remove selected <i class="glyphicon glyphicon-arrow-left arrow-color"></i>
</button>
</div>
<%:Html.ListBoxFor(m => m.SelectedCourses, new SelectList(Enumerable.Empty<SelectListItem>(), "CourseID", "CourseName"),
new { @class = "fancy-select form-control", @id = "ddlSelectedCourses", @size = 10, @tabindex = "4" })%>
</div>
</div>
<div class="bootstrap-duallistbox-container row">
<div class="col-md-12">
<input type="button" id="btnDelete" class="btn btn-warning pull-right" style="padding-right: 20px;"
value="Delete" tabindex="7" />
</div>
</div>
</div>
<hr />
</div>
<div id="dvDynamic">
</div>
<div class="form-group clearfix">
<div class="col-md-12">
<div class="row">
<div class="col-lg-6 col-md-6">
<%:Html.HiddenFor(m => m.Ready_To_Take_multiple_session, new { @id = "hdnchkReadytotakeMultipleSession" })%>
<%:Html.CheckBoxFor(m => m.Ready_To_Take_multiple_session, new { @id = "chkReadytotakeMultipleSession", @tabindex = "28" })%>
<%:Html.Label("Ready to take Multiple Session")%>
</div>
<div class="col-lg-6 col-md-6 fev-mb15">
<%:Html.HiddenFor(m => m.Need_To_take_a_demo_session, new { @id = "hdnNeedtotakeDemoSession" })%>
<%:Html.CheckBoxFor(m => m.Need_To_take_a_demo_session, new { @id = "NeedtotakeDemoSession", @tabindex = "29" })%>
<%:Html.Label("Need to take Demo Session")%>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-12 pull-right text-right">
<input type="button" id="btnAdd" class="btn btn-success" value="Add" tabindex="6" />
</div>
</div>
</div>
</div>
<input type="button" id="btnInsert" class="btn btn-success" value="Save" tabindex="6" />
</div>
Screenshot
