There are a lot of similar questions but not the one that give me the solution.
This is my attempt: I want to when the website loads show a alert Modal box with data coming from a model.
The site is a Blazor Server app.
This the model
public class AlertModal
{
[Key]
public int AlertId { get; set; }
public string Image { get; set; }
[Required(ErrorMessage = "This is a requierd field")]
public string TextPar { get; set; }
public string TextPar1 { get; set; }
public string TextPar2 { get; set; }
[Required(ErrorMessage = "This is a requierd field")]
public bool Show { get; set; }
}
This the PageModel of the partial page:
public class _InfoPartialModel : PageModel
{
public AlertModal AlertModal { get; set; }
public void OnGet()
{
AlertModal = new AlertModal()
{
TextPar = "This is a test",
Show = true
};
}
}
And this the partial view page
@page
@model Tjoba.Pages.Shared._InfoPartialModel
@{
}
@if (Model.AlertModal.Show)
{
<div class="modal fade " id="IndexModal" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-black">@Model.AlertModal.TextPar </h5>
<button type="button" data-bs-dismiss="modal" aria-hidden="true">x</button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<img src="/images/Vacation_volleyball.jpeg" class=" col-12 p-0 m-0 mx-auto " style="transform:none" />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" value="1" data-bs-dismiss="modal">Sluiten</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
setTimeout(function () {
$("#IndexModal").modal('show');
}, 4000);
});
</script>
}And for startup in the _Layout.cshtml page:
<partial name="_InfoPartial" model="Model.AlertModal" />
I found the explanation of this here:
But when starting the website there comes a the following error:
An unhandled exception occurred while processing the request.
RuntimeBinderException: ‘Tjoba.Pages.Pages__Host’ does not contain a definition for ‘AlertModal’
The _Host.cshtml file:
@page "/"
@namespace Tjoba.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = "_Layout";
}
<component type="typeof(App)" render-mode="ServerPrerendered" />Question is, what as the _Host file to do with this?. I do what wrong but I can’t find what it is.
To achieve your goal of displaying a modal box on startup in a Blazor Server app, you can use a combination of Blazor components and Razor views. Given your current setup, it seems you are trying to mix Blazor components and Razor pages. Here’s a refined approach:
- Create a Blazor Component for the Modal: Create a new Blazor
component for the modal. This component will handle the display
logic for the modal box. - Add the Modal Component to the Main Layout: Incorporate the modal
component into the _Layout.cshtml page to ensure it loads on
startup.
New contributor
Khach is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Test Result
The structure of my test project
1. Data/AlertModal.cs
using System.ComponentModel.DataAnnotations;
namespace BlazorApp2.Data
{
public class AlertModal
{
[Key]
public int AlertId { get; set; }
public string? Image { get; set; }
[Required(ErrorMessage = "This is a required field")]
public string? TextPar { get; set; }
public string? TextPar1 { get; set; }
public string? TextPar2 { get; set; }
[Required(ErrorMessage = "This is a required field")]
public bool Show { get; set; }
}
}
2. AlertModalComponent.cs
@page "/alert-modal"
@using BlazorApp2.Data
@inject AlertModalService AlertModalService
@code {
private AlertModal AlertModal { get; set; }
protected override void OnInitialized()
{
AlertModal = AlertModalService.GetAlertModal();
}
}
@if (AlertModal.Show)
{
<div class="modal fade" id="IndexModal" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-black">@AlertModal.TextPar</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<img src="@AlertModal.Image" style="width:72px;height:50px" />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
setTimeout(function () {
var modal = new bootstrap.Modal(document.getElementById('IndexModal'));
modal.show();
}, 4000);
});
</script>
}
3. _Host.cshtml
@page "/"
@using Microsoft.AspNetCore.Components.Web
@namespace BlazorApp2.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="BlazorApp2.styles.css" rel="stylesheet" />
<link rel="icon" type="image/png" href="favicon.png" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
@* Add this line *@
<component type="typeof(AlertModalComponent)" render-mode="ServerPrerendered" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">????</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="~/js/popper.min.js"></script>
<script src="~/js/bootstrap.min.js"></script>
</body>
</html>
4. AlertModalService.cs
using BlazorApp2.Data;
namespace BlazorApp2
{
public class AlertModalService
{
public AlertModal GetAlertModal()
{
return new AlertModal()
{
TextPar = "This is a test",
Show = true,
Image = "/images/test.png"
};
}
}
}