Reputation: 624
I am creating page to create model and save it to DBS. Model contains some simple properties, and list of properties that are selected from dynamic array of checkboxes. So my idea is to load list of props from database (it works) show checkbox for each property (also works) wait for user to fill all simple forms and check all props he wants, and send it via POST to database.
I just cannot figure out how to add all checked props to list in model. I will apriciate any help.
Model:
public class MyModel
{
public Guid Id { get; set; }
public string SimpleProp1 { get; set; }
public string SimpleProp2 { get; set; }
public IEnumerable<Guid> Extras { get; set; }
}
public class Extra
{
public Guid Id { get; set; }
public string Name { get; set; }
}
Code in backend add.cshtml.cs
[Authorize]
public class AddModel : PageModel
{
private readonly DatabaseHelper databasehelper;
[BindProperty]
public List<Extra> ExtrasList { get; set; }
public AddModel(ApplicationDbContext context)
{
databasehelper = new DatabaseHelper(context);
}
public IActionResult OnGet()
{
ExtrasList = StaticLists.Extras;
return Page();
}
[BindProperty]
public MyModel Model { get; set; }
public IActionResult OnPostAsync()
{
if (!ModelState.IsValid)
{
return Page();
}
var result = database.AddToDbs(Model);
return RedirectToPage("./Overview/"+ result.ResponseGuid.ToString());
}
}
and frontend
@page
@model Pages.AddModel
@{
ViewData["Title"] = "Add";
}
<hr />
<div class="row">
<div class="col-md-4">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<br />
<input type="text" asp-for="Model.SimpleProp1" />
<br />
<input type="text" asp-for="Model.SimpleProp2" />
<br />
<div>
@foreach (var cb in Model.ExtrasList) {
<input name="ExtrasList" type="checkbox" value="@cb.Id" /> @cb.Name<br />
}
<br />
</div>
<!-- somewhere here I need to bind checkbox state to model -->
</form>
<form method="post">
<button>Submit</button>
</form>
</div>
</div>
<div>
<a asp-page="Index">Back to List</a>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
I know, that this code is not super eficient and it is not best way how to do that. I am just learning FE and whole razor page concept.
Upvotes: 0
Views: 3069
Reputation: 27962
According to your razor page codes, I found you have used multiple form tag in your page.
You should remove the form tag which is outside the <button>Submit</button>
and modify the checkbox's name to Model.Extras
, then it will work well.
More details, you could refer to below view codes:
<div class="row">
<div class="col-md-4">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<br />
<input type="text" asp-for="Model.SimpleProp1" />
<br />
<input type="text" asp-for="Model.SimpleProp2" />
<br />
<div>
@foreach (var cb in Model.ExtrasList)
{
<input name="Model.Extras" type="checkbox" value="@cb.Id" /> @cb.Name<br />
}
<br />
</div>
<!-- somewhere here I need to bind checkbox state to model -->
<button>Submit</button>
</d>
</form>
</div>
</div>
Result:
Upvotes: 1