How to pass combination of Id-date to Controller from View in MVC3 - asp.net-mvc-3

Question

In my HTML table I have a checkbox, start and end date
I have set checkbox's id as primary kay of that record/row
on click of checkbox, the corresponding record's end date text box is bound to a datepicker through which date can b changed
I can do this for multiple records in my table
at the end I have a button , on click of it I want to send this selected rows id and its edited end date value to the controller
through out my code i'm able to do this but the problem is that only last updated value is sent to the controller and not all the values
Here is my code :
<div class="cell" style="width:auto;">
<input type="checkbox" name="chkbox" class="a" value="" data-id="#item.ID" onclick="checkbox1(#item.ID)"/>
</div>
<div class="cell" style="width:auto;">
#Html.DisplayFor(modelItem => item.StartDate, new { id = "strtDate" })
</div>
<div class="cell" id="edit2-#item.ID" style="width:auto;">
#Html.DisplayFor(modelItem => item.EndDate, new { id = "endDate" })
</div>
<div class="cell" id="edit1-#item.ID" style="width:auto; display:none;">
#Html.TextBox("Enddate", item.EndDate, new { #class = "date", id = "date-" + #item.ID })
</div>
I'm hiding div edit2-#itemID and showing edit1-#itemID on click of checkbox and also binding datepicker to it
function checkbox1(index) {
var divname =index;
$("#edit1-" + divname).toggle();
$("#edit2-" + divname).toggle();
$("#date-" + divname).datepicker({ yearRange: "-0:+13",
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
onSelect: function (dateText, inst) {
var test = dateText + "," + divname;
alert(test);
$(".a:checked").attr('data-id', test);
}
});
}
I tried to set the checkbox's id as combination of "id-newenddate"
but it is assigning the recent date to all selected checkboxes.
Following is the code called wen button is clicked
$("#button1").click(function () {
var selected = $(".a:checked").map(function () {
return $(this).data('id');
}).get();
var urlDistricts = '#Url.Action("EditExhi")';
$.ajax({
type: "POST",
datatype: 'integer',
url: urlDistricts,
traditional: true,
data: { listofid: selected},
success: function (result) {
}
});
in controller:
[HttpPost]
public ActionResult EditExhi(List<int> listofid)
{
}
How can I solve this issue and send the combination of id-date to controller?
Please help me.

Answer 1

You need to be able to match the checkboxes with the items:
Add an index to your view model:
public class YourViewModel
{
public int Index {get;set;}
public IEnumerable<YourItemType> Items {get; set; }
// other fields
}
And use it in the view:
#foreach(var item in Model.Items)
{
<div class="cell" style="width:auto;">
<input type="checkbox" name="chkbox[#Model.Index]" class="a" value="true" data-id="#item.ID" onclick="checkbox1(#item.ID)"/>
</div>
<div class="cell" style="width:auto;">
#Html.DisplayFor(modelItem => item.StartDate, new { id = "strtDate" })
</div>
<div class="cell" id="edit2-#item.ID" style="width:auto;">
#Html.DisplayFor(modelItem => item.EndDate, new { id = "endDate" })
</div>
<div class="cell" id="edit1-#item.ID" style="width:auto; display:none;">
#Html.TextBox("Enddate[" + Model.Index + "]", item.EndDate, new { #class = "date", id = "date-" + #item.ID })
</div>
<input type="hidden" name="Id[#Model.Index]" value="#item.ID" />
#{Model.Index = #Model.Index + 1}
}
Then create a new view model for the post action:
public class PostModel
{
bool chkbox { get; set; }
string EndDate {get;set; }
string Id { get; set; }
}
then do this in the action:
[HttpPost]
public ActionResult EditExhi(PostModel[] items)
{
foreach (var item in items)
{
if (item.chkbox)
//update db here with item.EndDate & item.Id
}
}