0

ViewModel

public IList<SelectListItem> SelectedCases { get; set; } = new List<SelectListItem>();

[DisplayName("Available Cases")]
public IList<SelectListItem> AvailableCases { get; set; } = new List<SelectListItem>();

.cshtml page

@for (int i = 0; i < Model.AvailableCases.Count(); i++)
{
     <br />
     <input type="checkbox" asp-for="@Model.AvailableCases[i].Selected" />
     <label asp-for="@Model.AvailableCases[i].Selected">@Model.AvailableCases[i].Text</label>
}

While clicking on Save button of this page, I want to get all selected items of AvailableCases to selectedCases list.

I am new to .net core.

2
  • So you only want to pass selected checkbox Text and selected to SelectedCases? Commented Mar 10, 2021 at 7:29
  • yes pass selected values to the SelectedCases list Commented Mar 10, 2021 at 8:06

1 Answer 1

1

Here is a working demo:

Model:

public class TestCheckBox {
        public IList<SelectListItem> SelectedCases { get; set; } = new List<SelectListItem>();

        [DisplayName("Available Cases")]
        public IList<SelectListItem> AvailableCases { get; set; } = new List<SelectListItem>();
    }

Controller:

[HttpGet]
        public IActionResult TestBindCheckBox() {
            TestCheckBox t = new TestCheckBox { AvailableCases = new List<SelectListItem> { new SelectListItem { Text = "one" }, new SelectListItem { Text = "two" }, new SelectListItem { Text = "three" } } };
            return View(t);
        }
        [HttpPost]
        public IActionResult TestBindCheckBox(TestCheckBox testCheckBox)
        {
            return Ok();
        }

CheckBox.cs(ViewComponent):

public class CheckBox:ViewComponent
    {
        
        public async Task<IViewComponentResult> InvokeAsync(TestCheckBox t)
        {
            return View(t);
        }
       
    }

Pages/Shared/CheckBox/Default.cshtml:

<form method="post" id="myForm">
    @for (int i = 0; i < Model.AvailableCases.Count(); i++)
    {
        <br />
        <input type="checkbox" asp-for="@Model.AvailableCases[i].Selected" />
        <input hidden asp-for="@Model.AvailableCases[i].Text" />
        <label asp-for="@Model.AvailableCases[i].Selected">@Model.AvailableCases[i].Text</label>
    }
    <input type="submit" />
</form>

TestBindCheckBox:

@await Component.InvokeAsync("CheckBox", @Model)
@section Scripts {
    <script>
        $('#myForm').submit(function () {
            var count = 0;
            $(":checkbox:checked").each(function () {
                $(this).attr("name", "SelectedCases[" + count + "].Selected");
                $(this).next("input").attr("name", "SelectedCases[" + count + "].Text");
                count++;
            })
            return true; // return false to cancel form action
        });
    </script>

}

result: enter image description here

Update: If you are using ViewComponent,only need to use

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

1 Comment

I have changed my answer with viewcomponent.And in my answer,I only bind text and selected to SelectedCases,the other data value and disabled , etc are the default values of SelectListItem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.