I would use radio buttons.
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<style>
legend {
border: solid 1px black;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
padding: 6px;
}
.ledgend-special {
width: 12em;
}
.ledgend-span {
padding-left: .5em;
padding-right: .5em;
font-size: 1.5em;
}
</style>
<div class="container mt-4">
<form method="post">
<fieldset class="border border-black p-3 bg-light" style="width: 20em;">
<legend class="float-none w-auto fs-6">Did you try to retain the staff?</legend>
@{
<div class="form-check">
<input type="radio"
class="form-check-input"
asp-for="UserResponse"
value="Yes"
id="Yes" />
<label class="form-check-label" for="Yes">Yes</label>
</div>
<div class="form-check">
<input type="radio"
class="form-check-input"
asp-for="UserResponse"
value="No"
id="No" />
<label class="form-check-label" for="No">No</label>
</div>
}
</fieldset>
<div>
<input type="submit" value="Submit" class="btn btn-primary mt-2"/>
</div>
</form>
</div>
Code behind (logging is done using SeriLog).
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Serilog;
namespace RadioButtonsApp.Pages;
public class IndexModel : PageModel
{
public void OnGet()
{
}
[BindProperty]
public string? UserResponse { get; set; }
public string[] Answers = { "Yes", "No"};
public async Task<IActionResult> OnPost()
{
await Task.Delay(0);
var selection = UserResponse;
if (string.IsNullOrEmpty(selection))
{
Log.Information("No selection");
}
else
{
Log.Information("Choice is {C1}", selection.ToLower() == "yes");
}
return Page();
}
}