Binding checkBoxList on Razor Page with Viewdata

Question

I want to bind a CheckBoxList on Razor page with Viewdata.I have the following code on my Controller Index:

public async Task<IActionResult> Index()
 {
var testSections = new List<ReassignmentSectionLookup>();
testSections = await _employeeService.GetTestSections();
 ViewData["testSections"] = new SelectList(testSections, "ReassignmentSectionLookupID", "Section");
return View();
}

I have the following on my razor page:

<div class="form-group row">
                    <div class="col-md-12">
                        Select Test: <br />
                        @{
                            var select = ViewData["testSections"] as SelectList;
                            if (select != null && select.ToList().Count > 0)
                            {
                                foreach (var item in select.ToList())
                                {
                                    <input type="checkbox" name="selectedItems" value="@item.Value" @(Html.Raw(item.Selected ? "checked=\"checked\"" : "")) /> @item.Text  <br />
                                }
                            }
                        }
                    </div>

When I hover over select, I can see 12 items in the select:

when I hover over select.ToList().Count I get an error saying "system.NullReferenceException". I am not sure what am I doing wrong. I can see the data in the select. below is the screen shot of the error:

any help will be highly appreciated.

Answer 1

Hi @Anjali Agarwal

I checked your code with setting initial data in the Index method, the code works well. I suggest you check the ReassignmentSectionLookup model, might be the issue relates it.

Besides, I suggest you can try to display the checkbox based on the SelectListItem, try to change your code as below:

        public async Task<IActionResult> Index()
        {
            var testSections = new List<ReassignmentSectionLookup>();
            testSections = await _employeeService.GetTestSections();
            ViewData["testSections"] = testSections.Select(c => new SelectListItem()
            {
                Value = c.ReassignmentSectionLookupID.ToString(),
                Text = c.Section,
            }).ToList();
            return View();
        }

in the view page, use the following code to display checkbox:

<div class="form-group row">
    <div class="col-md-12">
        Select Test: <br />
        @{
            var select = ViewData["testSections"] as List<SelectListItem>;
            if (select != null && select.Count > 0)
            {
                foreach (var item in select.ToList())
                {
                    <input type="checkbox" name="selectedItems" value="@item.Value" @(Html.Raw(item.Selected ? "checked=\"checked\"" : "")) /> @item.Text  <br />
                }
            }
        }

    </div>
</div>

After that, it will also get the same result.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion

Answer 2

It’s .Count(), a method call rather than property