Home > Blockchain >  How to bind checkboxes and radio buttons in ASP.NET Core 6?
How to bind checkboxes and radio buttons in ASP.NET Core 6?

Time:03-02

This is how I want my form to look:

Form Image

This is how I want my database to store the values:

Database Table Image

What will be the model, controller and view code for adding a new book to the table?

CodePudding user response:

Here is a working demo you could follow:

Model:

public class Book
{
    public int Id { get; set; }
    public int MininumAge { get; set; }
    public string? Title { get; set; }
    public string? Genres { get; set; }
    public string? Type { get; set; }
}

View(Create.cshtml):

@model Book

<div >
    <div >
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" ></div>
            <div >
                <label asp-for="Title" ></label>
                <input asp-for="Title"  />
                <span asp-validation-for="Title" ></span>
            </div>
            <div >
                <label asp-for="Genres" ></label>
                <div>
                    Action<input type="checkbox" name="GenresList" value="Action"/>
                    Adventure<input type="checkbox" name="GenresList" value="Adventure" />
                    Thriller<input type="checkbox" name="GenresList" value="Thriller"/>
                    Horror<input type="checkbox" name="GenresList" value="Horror" />
                </div>
                <span asp-validation-for="Genres" ></span>
            </div>
            <div >
                <label asp-for="Type" ></label>
                <div>
                    Fiction<input type="radio" asp-for="Type" value="Fiction" />
                    Non-Fiction<input type="radio" asp-for="Type" value="Non-Fiction"/>
                </div>
                <span asp-validation-for="Type" ></span>
            </div>
            <div >
                <label asp-for="MininumAge" ></label>
                <select asp-for="MininumAge" >
                    <option value="12">12</option>
                    <option value="23">23</option>
                    <option value="34">34</option>
                    <option value="45">45</option>
                </select>
                <span asp-validation-for="MininumAge" ></span>
            </div>
            <div >
                <input type="submit" value="Create"  />
            </div>
        </form>
    </div>
</div>

Controller:

public class BooksController : Controller
{
    private readonly MvcProj6_0Context _context;

    public BooksController(MvcProj6_0Context context)
    {
        _context = context;
    }        
    // GET: Books/Create
    public IActionResult Create()
    {
        return View();
    }

    // POST: Books/Create        
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create(Book book,List<string> GenresList)
    {
        //you will get the checkbox list by GenresList parameter
        //convert list string to string with comma
        string Genres = string.Join(",", GenresList);
        book.Genres = Genres;
        if (ModelState.IsValid)
        {
            _context.Add(book);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View(book);
    }
}

Result:

enter image description here

  • Related