ASP.NET 8 offers a wide range of UI controls that can be used to build rich and interactive web applications. Here, I'll provide an overview of some of the key UI controls and components available in ASP.NET Core 8, demonstrating how to use them in your application. These controls include forms, buttons, tables, data grids, modals, and more.
1. Forms and Input Controls
Forms are fundamental in web applications for capturing user input. ASP.NET Core supports various input controls like text boxes, checkboxes, radio buttons, and more.
Example: Basic Form
Views/Home/Index.cshtml:
html
@model MyApp.Models.FormModel
<h2>Basic Form</h2>
<form asp-action="SubmitForm" method="post">
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Email" class="control-label"></label>
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Age" class="control-label"></label>
<input asp-for="Age" class="form-control" />
<span asp-validation-for="Age" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
</form>
Models/FormModel.cs:
csharp
public class FormModel
{
[Required]
public string Name { get; set; }
[Required]
[EmailAddress]
public string Email { get; set; }
[Range(18, 100)]
public int Age { get; set; }
}
Controllers/HomeController.cs:
csharp
using Microsoft.AspNetCore.Mvc;
using MyApp.Models;
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult SubmitForm(FormModel model)
{
if (ModelState.IsValid)
{
// Process form data
return RedirectToAction("Success");
}
return View("Index", model);
}
public IActionResult Success()
{
return View();
}
}
2. Buttons and Links
Buttons and links are used for actions and navigation. ASP.NET Core makes it easy to create these controls.
Example: Buttons and Links
html
<button type="button" class="btn btn-primary">Primary Button</button>
<a href="#" class="btn btn-link">Link Button</a>
3. Tables and Data Grids
Tables are used to display data in a structured format. For complex data grids, you can use libraries like jQuery DataTables.
Example: Basic Table
html
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Name</td>
<td>@item.Email</td>
<td>@item.Age</td>
</tr>
}
</tbody>
</table>
4. Modals
Modals are used for dialog boxes, confirmation messages, and more. Bootstrap modals can be easily integrated into ASP.NET Core applications.
Example: Modal Dialog
html
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is a Bootstrap modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
5. Alerts
Alerts are used to provide feedback messages to the user.
Example: Alert Messages
html
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
6. Dropdowns
Dropdowns are used to provide a list of options to the user.
Example: Dropdown Menu
html
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
7. Pagination
Pagination is used to navigate through pages of data.
Example: Pagination
html
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
8. Tabs
Tabs are used to divide content into multiple sections.
Example: Tabs
html
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home content</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile content</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact content</div>
</div>
9. Navbars
Navbars are used for navigation across different sections or pages of the application.
Example: Navbar
html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
Summary
ASP.NET Core 8, combined with Bootstrap, offers a rich set of UI controls that can be used to build dynamic and responsive web applications. The examples provided here demonstrate how to use some of the most common controls. You can further explore and customize these controls to meet your specific application requirements.