I am currently able to postback mvc web controller and view. However I want to do the model binding for the mvc service application but the checkbox binding details wont come during runtime. Will you please advise?
Your design does not follow MVC fundamental coding patterns. Unfortunately, there's a lot of problems with your code and general design. One example is setting a property after model binding takes place. The HTML helpers look at the model state which are the values passed to the action.
The code example below focuses on the original subject which is maintaining the state of checkboxes and model binding.
ViewModel
public class TimeSheetViewModel
{
public TimeSheet TimeSheet { get; set; }
}
public class TimeSheet
{
public List<DailyList> DailyList { get; set; }
}
public class DailyList
{
public bool IsMealBreakWaived { get; set; }
}
Controller
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
TimeSheetViewModel model = new TimeSheetViewModel()
{
TimeSheet = new TimeSheet()
{
DailyList = new List<DailyList> {
new DailyList()
{
IsMealBreakWaived = true,
},
new DailyList()
{
IsMealBreakWaived = false,
},
new DailyList()
{
IsMealBreakWaived = true,
},
new DailyList()
{
IsMealBreakWaived = false,
},
new DailyList()
{
IsMealBreakWaived = true,
},
new DailyList()
{
IsMealBreakWaived = false,
},
new DailyList()
{
IsMealBreakWaived = true,
},
}
}
};
return View(model);
}
[HttpPost]
public ActionResult Index(TimeSheetViewModel model)
{
return Json(model);
}
}
View
@model MvcDemo.Controllers.TimeSheetViewModel
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>TimeSheetViewModel</h4>
<hr />
<div id="timesheet">
@for (int i = 0; i < Model.TimeSheet.DailyList.Count(); i++)
{
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
@i: @Html.CheckBoxFor(m => Model.TimeSheet.DailyList[i].IsMealBreakWaived, new { @class = "missed" })
</div>
</div>
}
</div>
<div id="results">
<ul>
</ul>
</div>
</div>
}
JavaScript/jQuery
$(".missed").change(function () {
$.post("/Home/Index", $("form").serialize(), function (data) {
console.log(data);
$('#results ul').html('');
$.each(data.TimeSheet.DailyList, function (index, value) {
$('#results ul').append('<li>' + JSON.stringify(value) + '</li>')
});
});
});
The example is fairly basic. The view model is prepopulated and passed to the view. An AJAX post submits the entire HTML form each time a checkbox changes state. The post action return the form in JSON format. The JSON is written to the page so you can compare what's submitted to the state of the form.
After fixing the design, if you still have state issues then there is something wrong with your data access or logic. I'm not a fan of submitting an entire collection of records when one record changes. I would submit only the record that changed not everything.
Honestly, you should go through the getting started tutorials on this site. The tutorial has a checkbox example very similar to your design.
Getting Started with Entity Framework 6 Code First using MVC 5