I am trying to bind a checkboxlist on dropdownlist selection, i have been able to display a list on a multiselect dropdownlist on Lab selected index change, but adding a checkbox to the multiselect dropdown list is what i have not been able to do. Any assistance will be appreciated.
What I have tried:
My Ajax Function:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/jscript">
$(document).ready(function () {
$('#LabId').change(function () {
$(".spina").show();
$("#testType").prop("disabled", true);
$.getJSON('/Lab/GetTestTypeList/' + $('#LabId').val(), function (data) {
var items = '<option value = "0">---Select a Test Type---</option>';
$.each(data, function (i, testType) {
items += "<option value='" + testType.Value + "'>" + testType.Text + "</option>";
$("#testType").prop("disabled", false);
$(".spina").hide();
});
$('#testType').html(items);
$("#testType").prop("disabled", false);
$(".spina").hide();
});
});
});
</script>
My HTML Controls:
<div class="col-sm-7">
<div class="form-group">
@Html.LabelFor(model => model.LabId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.LabId, (IEnumerable<SelectListItem>)ViewBag.LabList, "---Select Lab---", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.LabId, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="col-sm-7">
<div class="form-group">
@Html.LabelFor(model => model.TestTypeId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<select id="testType" name="testType" multiple="multiple" class="form-control" required="required">
<option value="0">---Select a Test Type---</option>
</select>
@Html.ValidationMessageFor(model => model.TestTypeId, "", new { @class = "text-danger" })
</div>
</div>
</div>
My C# Code:
private void LoadLabDropDownList()
{
try
{
var getList = repository.GetSpecialtyListByRoleId(8);
var items = getList.Select(t => new SelectListItem
{
Text = t.FullName,
Value = t.UserId.ToString()
}).ToList();
ViewBag.AccountantList = items;
}
catch (Exception ex)
{
ViewBag.DisplayMessage = "Info";
ModelState.AddModelError("", ex.Message);
}
}
The code to load the second dropdown list:
public JsonResult GetTestTypeList(string id)
{
if (!string.IsNullOrEmpty(id))
{
var labId = Convert.ToInt32(id);
var testTypes = from s in db.TestTypes
where s.LabId == labId
select s;
return Json(new SelectList(testTypes.ToArray(), "TestTypeId", "TestName"), JsonRequestBehavior.AllowGet);
}
else
{
var testTypeId = Convert.ToInt32(id);
var testTypes = from s in db.TestTypes
where s.TestTypeId == 0
select s;
return Json(new SelectList(testTypes.ToArray(), "TestTypeId", "TestName"), JsonRequestBehavior.AllowGet);
}
}
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult LoadTestTypeByLabId(string labName)
{
var labList = GetTestType(Convert.ToInt32(labName));
var labData = labList.Select(m => new SelectListItem()
{
Text = m.TestName,
Value = m.TestTypeId.ToString(),
});
return Json(labData, JsonRequestBehavior.AllowGet);
}
public IList<TestType> GetTestType(int testTypeId)
{
return db.TestTypes.Where(m => m.TestTypeId == testTypeId).ToList();
}