3
Reply

to display selected checkbox as checked in mvc

athira k

athira k

Apr 17 2017 5:26 AM
579
In my Create action I have given many checkbox for selecting items for eg, suppose I have 5 checkbox items and I selected 3 out of that and these selected checkboxes are stored in db and here my problem is, from the index page when I click on the edit link I want to list the checkboxes that are selected with check mark and also the other which are not selected must also be shown in  edit page so that if user wants any change in the checked checkbox must edit or can add other item  to db, this is the part which i am not able to do  
 
controller
 
 
public async Task<ActionResult> Edit(int? id )
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
AgentPostMapping agentPostMapping = await db.AgentPostMappings.FindAsync(id);
var ListItems = (from ap in db.AgentPostMappings
join a in db.AgentMasters on ap.AgentId equals a.ID
join p in db.PostMasters on ap.PostId equals p.Id
select new AgentMappingList
{
id = ap.Id,
Agentid = ap.AgentId,
postid = ap.PostId,
EffectDate = ap.EffectDate,
firstname = a.FirstName,
Postname = p.PostName
}).Where(r=>r.Agentid == id).ToList();
var grp = ListItems.GroupBy(r => r.Agentid).Select(r => new AgentMappingList
{
Agentid = r.Key,
id = r.Key,
PostNames = string.Join(" , ", r.Select(g => g.Postname)),
firstname = ListItems.FirstOrDefault(q => q.Agentid == r.Key).firstname,
EffectDate = ListItems.FirstOrDefault(q => q.Agentid == r.Key).EffectDate
}).FirstOrDefault();
AgentPostMapping agentPostMappings = new AgentPostMapping();
{
agentPostMappings.Id = grp.id.Value;
agentPostMappings.AgentId = grp.Agentid;
agentPostMappings.EffectDate = grp.EffectDate;
agentPostMappings.CheckBoxes = grp.PostNames;
}
var m = db.AgentMasters.Where(r => r.ID == id).Select(p=>p.FirstName);
ViewBag.AgentId = new SelectList(m, "FirstName");
ViewBag.DistrictId = new SelectList(db.DistrictMasters, "Id", "DistrictName");
if (agentPostMappings == null)
{
return HttpNotFound();
}
return View(agentPostMappings);
}
 
 
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Edit(AgentPostMapping agentPostMapping)
{
string combindedString = string.Join(",", agentPostMapping.GetAllSelctedCheckBoxes.ToArray());
List<int> check = new List<int>(combindedString.Split(',').Select(int.Parse));
if (ModelState.IsValid)
{
for (int i = 0; i < check.Count(); i++)
{
agentPostMapping.PostId = Convert.ToInt32(check[i]);
agentPostMapping.PostId = agentPostMapping.PostId;
agentPostMapping.AgentId = agentPostMapping.AgentId;
agentPostMapping.EffectDate = agentPostMapping.EffectDate;
db.AgentPostMappings.Add(agentPostMapping);
await db.SaveChangesAsync();
}
//db.Entry(agentPostMapping).State = EntityState.Modified;
//await db.SaveChangesAsync();
return RedirectToAction("Index");
}
return View(agentPostMapping);
}
 
 
 In var ListItems it will get all the checked items but how can I display that in edit view page 
 
view page
 
 
<div class="form-group">
@Html.LabelFor(model => model.PostId, "PostName", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div id="PostMaster"></div>
@Html.HiddenFor(m => m.GetAllSelctedCheckBoxes)
@Html.ValidationMessageFor(model => model.PostId, "", new { @class = "text-danger" })
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
//District Dropdown Selectedchange event
$("#DistrictId").change(function () {
$("#PostMaster").empty();
$.ajax({
type: 'POST',
url: '@Url.Action("GetPosts")', // Calling json method
dataType: 'json',
data: { id: $("#DistrictId").val() },
// Get Selected post id.
success: function (posts) {
$.each(posts, function (i, post) {
$("#PostMaster").append('<input type="checkbox" name="postdata" value=' + post.Value + '>' + post.Text + '<br>');
});
},
error: function (ex) {
alert('Failed to retrieve post.' + ex);
}
});
return false;
})
});
</script>
<script>
$("#Edit").click(function () {
$('#GetAllSelctedCheckBoxes').empty();
debugger;
var getList = [];
$("#PostMaster input:checked").each(function () {
getList.push($(this).val());
alert($(this).val());
});
$('#GetAllSelctedCheckBoxes').val(getList);// assign to hidden field
});
</script>
 
 
when hiting on save button the second script will work  and this value is passing to the HttpPost of edit method . here my problem is how can I get the selceted checkbox as checked when I go to the edit page?

Upload Source Code  Select only zip and rar file.
Answers (3)