CODEWITHSUNDEEP
asp.netasp.net-mvcentity-frameworkasp.net-core
Chester John
Chester John

Reputation: 85

Multiple checkbox list data and submit validations

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?

Upvotes: 2

Views: 513

Answers (1)

Nan Yu
Nan Yu

Reputation: 27578

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);
}

Upvotes: 1

Related Questions