Multiple checkbox list data and submit validations

Question

I need help on how to retain data in my lists after clicking submit. The source of my multiple checkboxes keep getting cleared during submit validation checking using data annotations. I'm new to web development and I don't have any idea on how to do this i'm only following the tutorials in the internet.

on my Create view page:

@foreach (var item in Model.consideredSUPs)
{               
   <div class="custom-control custom-checkbox" style="margin: 0px 15px">
      <input id="chk@(item.ID)"
         type="checkbox"
         name="FupconsideredList"
         value="@item.Display"
         checked="@item.IsChecked"
         class="custom-control-input">
      <label class="custom-control-label" for="chk@(item.ID)"> @item.Display </label>
   </div>
}
</div>

my controller:

public IActionResult Create()
        {
            Questions model = new Questions();

            var checkBoxListItems = new List<ConsideredSUP>();

            checkBoxListItems.Add(new ConsideredSUP() { ID = 1, Display = "Candy wrappers", IsChecked = false });
            checkBoxListItems.Add(new ConsideredSUP() { ID = 2, Display = "Ecobag", IsChecked = false });
            checkBoxListItems.Add(new ConsideredSUP() { ID = 3, Display = "Food packaging", IsChecked = false });
            checkBoxListItems.Add(new ConsideredSUP() { ID = 4, Display = "Plastic bag/Plastic labo", IsChecked = false });
            checkBoxListItems.Add(new ConsideredSUP() { ID = 5, Display = "Straw", IsChecked = false });
            checkBoxListItems.Add(new ConsideredSUP() { ID = 6, Display = "Tumbler", IsChecked = false });
            checkBoxListItems.Add(new ConsideredSUP() { ID = 7, Display = "Water bottles", IsChecked = false });

            model.consideredSUPs = checkBoxListItems;
            return View(model);
}

Also, is it called Postback when data annotation validations show up after clicking submit?

put the state of checkboxes in session for temporary and reload checkboxes after submitting validations fails. — Muhammad Aftab
– Muhammad Aftab, Commented Oct 3, 2019 at 4:58

Nan Yu · Accepted Answer · 2019-10-03 06:01:05Z

1

You are not correctly bind checkboxes list to your view model . Please try to modify your markup as :

@for (var i = 0; i < Model.consideredSUPs.Count; i++)
{
    <div class="custom-control custom-checkbox" style="margin: 0px 15px">
        <input type="checkbox" asp-for="@Model.consideredSUPs[i].IsChecked"  class="custom-control-input"/>
        <label asp-for="@Model.consideredSUPs[i].IsChecked" class="custom-control-label">@Model.consideredSUPs[i].Display</label>
        <input type="hidden" asp-for="@Model.consideredSUPs[i].ID" />
        <input type="hidden" asp-for="@Model.consideredSUPs[i].Display" />
    </div>
}

So that after submit to server side , the values will bind to model , and return to original page if validation fails

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(Questions  questions)
{
    if (ModelState.IsValid)
    {

        return RedirectToAction("pagename");
    }

    return View("index", questions);
}

answered Oct 3, 2019 at 6:01

Nan Yu

27.7k9 gold badges75 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chester John Over a year ago

It didn't work but I used your code 'cause it's way cleaner than mine, I think I need to maximize the use of tag helpers from now on lol. I re-populated the list instead after the if (ModelState.IsValid) { } code block and it worked, I'm just not sure if it's the right way though.

Collectives™ on Stack Overflow

Multiple checkbox list data and submit validations

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related