@page "/" <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <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 Demo</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <button class="btn btn-primary" @onclick="QueryDatabase">Query Database</button> <table class="table table-striped"> <tbody> @foreach(var item in Reports) { <tr> <td>@item.Id</td> <td>@item.Issued.ToString("d")</td> <td>@item.Name</td> <td>@item.Description</td> </tr> } </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> @code { List<Report> Reports {get; set; }= new List<Report>(); // Simulate DB Query void QueryDatabase() { Reports = new List<Report> { new Report { Id = 1, Issued = DateTime.Now, Name = "Report 1", Description = "Annual Report" }, new Report { Id = 2, Issued = DateTime.Now, Name = "Report 2", Description = "Semiannual Report" }, new Report { Id = 3, Issued = DateTime.Now, Name = "Report 3", Description = "Quarterly Report" }, new Report { Id = 4, Issued = DateTime.Now, Name = "Report 4", Description = "Status Report" }, new Report { Id = 5, Issued = DateTime.Now, Name = "Report 5", Description = "Summary Report" } }; } class Report { public int Id {get; set;} public DateTime Issued {get; set;} public string Name {get; set;} public string Description {get; set;} } }