使用C#方法在Blazor中创建弹出
使用C#方法在Blazor中创建弹出
提问于 2022-04-25 19:00:14
我有一个带有按钮的简单页面index.razor：
<a class="btn btn-login" @onclick="RedirectPage" >Log in</a>
<div
@bind-Visible="@InvalidLogin"
BodyText="Error">
</div>
@code{
InvalidLogin {get; set;} = false;
}其中，函数RedirectPage检查值是否有效。如果不是，我想要一个弹出窗口提供信息：
private void RedirectPage
{
this.InvalidLogin = true;
}此函数位于index.razor.cs中，并已与@using一起添加到正确的命名空间中。
我如何创建它，使弹出弹出时，按钮被点击？
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-04-25 20:20:35
您可以创建一个简单的弹出(或模态对话框)组件。下面，我编写了一个示例弹出式剃须刀组件，使用Bootstrap 5吐司组件。
Popup.razor文件
@{
var showClass = IsVisible ? "d-block" : "d-none";
}
<div class="toast-container p-3 @showClass" data-bs-autohide="true" data-bs-delay="5000">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">@HeaderText</strong>
<button type="button" class="btn-close" aria-label="Close" @onclick="Close"></button>
</div>
<div class="toast-body">
@BodyText
</div>
</div>
</div>
@code {
[Parameter]
public bool IsVisible { get; set; }
[Parameter]
public EventCallback<bool> IsVisibleChanged { get; set; }
[Parameter]
public string? HeaderText { get; set; }
[Parameter]
public string? BodyText { get; set; }
public void Show(string bodyText, string headerText = "")
{
HeaderText = headerText;
BodyText = bodyText;
IsVisible = true;
StateHasChanged();
}
private void Close()
{
HeaderText = string.Empty;
BodyText = string.Empty;
IsVisible = false;
StateHasChanged();
}
}在代码中使用Popup剃须刀组件：
<a class="btn btn-login" @onclick="RedirectPage" >Log in</a>
<Popup @ref="popupRef" />
@code{
private Popup popupRef;
private void RedirectPage()
{
// Shows the popup at the center of the screen
popupRef.Show("Popup body text");
}
}Stack Overflow用户
发布于 2022-04-26 03:49:54
如何在不依赖第三方库的情况下创建对话框。
我不得不使用最少数量的js，因为新的HTML5 <dialog...元素只能在对话框模式下打开( .showModal() )，而不是通过操作属性。
wwwroot/scripts/dialogJsInteropt.js
export function showDialog(element, parm) {
return element.showModal();
}
export function closeDialog(element, parm) {
return element.close();
}Dialog.razor
<CascadingValue Value=@this IsFixed=true >
<dialog @ref="@dialogElement" @attributes=@CapturedAttributes>
@if(visible)
{
@ChildContent
}
</dialog>
</CascadingValue>Dialog.razor.cs
public partial class Dialog : ComponentBase, IAsyncDisposable
{
private readonly Lazy<Task<IJSObjectReference>> moduleTask;
private ElementReference dialogElement;
private bool visible = false;
public Dialog()
{
moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>(
identifier: "import",
args: "./scripts/dialogJsInterop.js")
.AsTask());
}
[Inject]
private IJSRuntime jsRuntime { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> CapturedAttributes { get; set; }
public async ValueTask ShowDialogAsync()
{
var module = await moduleTask.Value;
await module.InvokeVoidAsync("showDialog", dialogElement);
visible = true;
}
public async ValueTask CloseDialogAsync()
{
var module = await moduleTask.Value;
await module.InvokeVoidAsync("closeDialog", dialogElement);
visible = false;
}
public async ValueTask DisposeAsync()
{
if (moduleTask.IsValueCreated)
{
var module = await moduleTask.Value;
await module.DisposeAsync();
}
}
}A这个阶段你有一个对话框可以工作。
我添加了以下组件以使其更方便。注意:我确实使用引导从这里向前的样式，这可以很容易地改变为顺风例如。
DialogCloseButton.razor
<button @attributes=CapturedAttributes @onclick=@CloseDialog />DialogCloseButton.razor.cs
public partial class DialogCloseButton : ComponentBase
{
[CascadingParameter]
public Dialog Dialog { get; set; }
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> CapturedAttributes { get; set; } = new Dictionary<string, object>
{
{ "class", "btn btn-close" }
};
private async Task CloseDialog() => await Dialog.CloseDialogAsync();
}DialogCloseButton.razor.css
.btn:focus {
box-shadow: none;
}DialogLayout.razor
<div class="d-flex flex-row justify-content-between border-bottom border-1">
<div class="flex-fill p-1 ps-3 fw-bolder user-select-none app-gradient text-white">
@Header
</div>
<div class="p-1">
<DialogCloseButton />
</div>
</div>
<div class="p-3">
@Content
</div>DialogLayout.razor.cs
public partial class DialogLayout
{
[Parameter]
public RenderFragment Header { get; set; }
[Parameter]
public RenderFragment Content { get; set; }
}Usage :
<Dialog @ref=@dialog class="p-0 border rounded shadow">
<DialogLayout>
<Header>
<MessagesIcon Size=16 /> Add Message
</Header>
<Content>
<MessageFormView />
</Content>
</DialogLayout>
</Dialog>
<button class="btn btn-outline-success" @onclick=@OpenDialog>Add Message</button>
@code {
private Dialog dialog;
...
private async Task OpenDialog() => await dialog.ShowDialogAsync();
}Stack Overflow用户
发布于 2022-04-26 08:10:33
下面是您所要求的一个非常小的例子(我将所有内容都放在index.razor文件中，但是您可以对@code{}部件中的所有内容使用CSS隔离和专用.cs文件。
@page "/index"
<style>
.active {
display: block;
}
.inactive {
display: none;
}
</style>
<a class="btn btn-login" @onclick="RedirectPage" >Log in</a>
<div class="@PopupClass">
Error: @ErrorText
</div>
@code{
bool InvalidLogin {get; set;} = false;
string PopupClass => InvalidLogin ? "active" : "inactive";
public string ErrorText { get; set; } = "Example of exception";
private void RedirectPage()
{
this.InvalidLogin = !this.InvalidLogin;
}
}当然，为了实现更具体的业务逻辑，您需要自己选择这个示例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72004471
复制相关文章
相似问题
腾讯云开发者
