modal-dialog 相关问题

我想知道是否可以将按钮的 id 和 class 作为参数传递给模态，以便我可以在模态页面中显示动态数据。导航栏.剃刀：我想知道是否可以将按钮的 id 和 class 作为参数传递给模态，以便我可以在模态页面中显示动态数据。导航栏.剃刀： <li><button class ="firstButtonDialog" id="mm" @onclick="() => _modal.Open()">mm</button></li> <li><button class ="secondButtonDialog" id="cm" @onclick="() => _modal.Open()">cm</button</li> <li><button class ="thirdButtonDialog" id="meter" @onclick="() =>_modal.Open()">meter</button></li>meter</button></li> private Modal _modal { get; set; } public string _min { get; set; } public string _max { get; set; } private void OnModalMin(string min) { _min = min; } private void OnModalMax(string max) { _max = max; } 模态页面中的“标题”和“测量”需要是动态的。我想在这里使用传递的参数来显示动态数据。莫代尔剃须刀： <h5 class="modal-title">firstButtonDialog</h5> //title need to be dynamic based on button clicked <div class="modal-body"> <label for="Min">Enter Min</label> <input @bind="min" type="text" id="Min" name="Min">[mm]<br> // [mm] measurement need to be dynamic based on button clicked <label for="Max">Enter Max:</label> <input @bind="max" type="text" id="Max" name="Max">[mm]<br> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" @onclick="() => Done()">Done</button> </div> @code { private string min; private string max; public Guid Guid = Guid.NewGuid(); public string ModalDisplay = "none;"; public string ModalClass = ""; [Parameter] public EventCallback<string> OnDoneCallback1 { get; set; } [Parameter] public EventCallback<string> OnDoneCallback2 { get; set; } public void Open() { ModalDisplay = "block;"; ModalClass = "Show"; ShowBackdrop = true; StateHasChanged(); } public void Close() { ModalDisplay = "none"; ModalClass = ""; ShowBackdrop = false; StateHasChanged(); } public async Task Done() { await InvokeAsync(() => OnDoneCallback1.InvokeAsync(min)); await InvokeAsync(() => OnDoneCallback2.InvokeAsync(max)); } } 这个问题有一个简单的答案，或者一个更长更全面的答案，演示如何构建一个“基本”模态对话框框架。这是后者。您需要将 Modal Dialog 与 EditForm 分开。您应该能够在模态对话框中托管任何表单。首先，定义一个 IModalDialog 接口，这样我们就可以拥有多个模态对话框的实现 - 比如一个简单的干净的 Css 或 Bootstrap 。 public interface IModalDialog { public ModalRequest ModalRequest { get; } public bool IsActive { get; } public bool Display { get; } public Task<ModalResult> ShowAsync<TModal>(ModalRequest modalRequest) where TModal : IComponent; public Task<bool> SwitchAsync<TModal>(ModalRequest modalRequest) where TModal : IComponent; public void Update(ModalRequest? modalRequest); public void Dismiss(); public void Close(ModalResult result); } 我们传入一个ModalRequest： public record ModalRequest { public IDictionary<string, object> Parameters { get; init; } = new Dictionary<string, object>(); public object? InData { get; init; } = null; } 然后回来ModalResult public class ModalResult { public ModalResultType ResultType { get; private set; } = ModalResultType.NoSet; public object? Data { get; set; } = null; public static ModalResult OK() => new ModalResult() { ResultType = ModalResultType.OK }; public static ModalResult Exit() => new ModalResult() { ResultType = ModalResultType.Exit }; public static ModalResult Cancel() => new ModalResult() { ResultType = ModalResultType.Cancel }; public static ModalResult OK(object data) => new ModalResult() { Data = data, ResultType = ModalResultType.OK }; public static ModalResult Exit(object data) => new ModalResult() { Data = data, ResultType = ModalResultType.Exit }; public static ModalResult Cancel(object data) => new ModalResult() { Data = data, ResultType = ModalResultType.Cancel }; public enum ModalResultType { NoSet, OK, Cancel, Exit } } 我们的基本实现 - ModalDialog.razor。它使用 TaskCompletionSource 在 async 上下文中运行。您可以通过调用 ShowAsync<TModal> 将 TModal 设置为要在表单中托管的组件并通过 ModalRequest 实例提供设置和数据来打开对话框。然后，您等待退出表单时设置为完成的提供 Task。我们使用 DynamicComponent 来创建 TModal。请注意，我们将 Modal 实例级联到托管组件。 @implements IModalDialog @if (this.Display) { <CascadingValue Value="(IModalDialog)this"> <div class="base-modal-background" @onclick="OnBackClick"> <div class="base-modal-content" @onclick:stopPropagation="true"> <DynamicComponent Type=this.ModalContentType Parameters=this.ModalRequest.Parameters /> </div> </div> </CascadingValue> } @code { [Parameter] public bool ExitOnBackGroundClick { get; set; } = false; public ModalRequest ModalRequest { get; private set; } = new ModalRequest(); public object? InData { get; } = null; public bool Display { get; protected set; } = false; protected TaskCompletionSource<ModalResult> _ModalTask { get; set; } = new TaskCompletionSource<ModalResult>(); protected Type? ModalContentType = null; public bool IsActive => this.ModalContentType is not null; public Task<ModalResult> ShowAsync<TModal>(ModalRequest modalRequest) where TModal : IComponent { this.ModalRequest = modalRequest; this.ModalContentType = typeof(TModal); this._ModalTask = new TaskCompletionSource<ModalResult>(); this.Display = true; InvokeAsync(StateHasChanged); return this._ModalTask.Task; } public async Task<bool> SwitchAsync<TModal>(ModalRequest modalRequest) where TModal : IComponent { this.ModalRequest = modalRequest; this.ModalContentType = typeof(TModal); await InvokeAsync(StateHasChanged); return true; } public void Update(ModalRequest? modalRequest = null) { this.ModalRequest = modalRequest ?? this.ModalRequest; InvokeAsync(StateHasChanged); } private void OnBackClick(MouseEventArgs e) { if (ExitOnBackGroundClick) this.Close(ModalResult.Exit()); } public async void Dismiss() => await this.Reset(ModalResult.Cancel()); public async void Close(ModalResult result) => await this.Reset(result); private async Task Reset(ModalResult result) { _ = this._ModalTask.TrySetResult(ModalResult.Cancel()); this.Display = false; this.ModalContentType = null; await InvokeAsync(StateHasChanged); } } 它是组件 css - ModalDialog.razor.css div.base-modal-background { display: block; position: fixed; z-index: 101; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } div.base-modal-content { background-color: #fefefe; margin: 10% auto; padding: 10px; border: 2px solid #888; width: 90%; } 您的数据类别： public class MyData { public int Min { get; set; } public int Max { get; set; } } 和表单 - MyForm.razor。这将捕获级联 IModalDialog 并与 IModalDialog 交互以获取任何提供的数据并关闭对话框。 <div class="modal-title border-bottom border-secondary"> <h5>@this.Title</h5> </div> <div class="modal-body"> <label class="form-label" for="Min">Enter Min [mm]</label> <input class="form-control" @bind=model.Min type="number"> <label class="form-label" for="Max">Enter Max [mm]:</label> <input class="form-control" @bind=model.Max type="number"> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" @onclick="() => Done()">Done</button> </div> @code { private MyData model = new MyData(); [Parameter] public string Title { get; set; } = "I Need a Title!"; [CascadingParameter] private IModalDialog? modalDialog { get; set; } private ModalRequest modalRequest => modalDialog?.ModalRequest ?? new ModalRequest(); protected override void OnInitialized() { if (modalDialog is null) throw new NullReferenceException("You must cascade a IModalDialog to use this Form"); model = (MyData)(modalDialog?.ModalRequest.InData ?? new MyData()); } private void Done() => modalDialog?.Close(ModalResult.OK(model)); } 最后是演示页面。它托管 ModalDialog 组件并与其交互以打开对话框。 @page "/" <PageTitle>Modal Dialog Demo</PageTitle> <div class="m-2 b-2"> <button class="btn btn-primary" @onclick=OpenDialog1>Edit Model 1</button> </div> <div class="alert alert-primary"> <strong>Model 1</strong> Min: @this.model1.Min Max: @this.model1.Max </div> <div class="m-2 b-2"> <button class="btn btn-dark" @onclick=OpenDialog2>Edit Model 2</button> </div> <div class="alert alert-dark"> <strong>Model 2</strong> Min: @this.model2.Min Max: @this.model2.Max </div> <ModalDialog @ref=modalDialog ExitOnBackGroundClick=false /> @code { private MyData model1 = new MyData { Max = 20, Min = -10 }; private MyData model2 = new MyData { Max = 50, Min = -50 }; private IModalDialog? modalDialog; private async Task OpenDialog1() { var parameters = new Dictionary<string, object> { { "Title", "Modal Form 1" } }; var request = new ModalRequest { InData = this.model1, Parameters = parameters }; if (this.modalDialog is not null) await modalDialog.ShowAsync<MyForm>(request); // This won't complete until the dialog closes and the Task is complete. // We can use any return data at this point // and this component will render as part of the ComponentBase UI event handling code. } private async Task OpenDialog2() { var parameters = new Dictionary<string, object> { { "Title", "Modal Form 2" } }; var request = new ModalRequest { InData = this.model2 }; if (this.modalDialog is not null) await modalDialog.ShowAsync<MyForm>(request); } } 这是其中一个对话框的屏幕截图：代码暂时放在这里 - https://github.com/ShaunCurtis/SO73617831 我知道这已经有几年了，但我喜欢你在这里所做的概念。我在使用示例时注意到的一件事是 InData 被修改，这在某些情况下可能不是所需的结果。我知道这可以在派生对话框中处理。我还注意到上面示例中的 Reset(ModelResult result) 始终返回 ModalResult.Cancel。那应该是结果参数吗？由于您的临时存储库已消失，我看不到您是否进行了其他更改。

modal-dialog blazor parameter-passing

回答 2 投票 0

如何从表单获取数据到插件中？

我正在开发一个插件，它有一个模态引导程序的形式，供用户输入数据。当我点击保存时，它返回到同一页面，我需要获取信息。它看起来像... ... 我正在开发一个插件，它有一个模态引导程序的形式，供用户输入数据。当我点击保存时，它返回到同一页面，我需要获取信息。看起来像... <form> <input class="form-control" type="any" id="compraTC" style="margin-left:5px" placeholder="0.0000" required> <button type="submit" class="btn btn-primary" id="btnGuardarTC">Guardar Cambios</button> </form> if(isset($_POST['btnGuardarTC'])) { echo $_POST['compraTC']; } else echo "no hay retorno"; 我无法获取新值。你能帮我一下吗？您好！解决方案！我需要开发更多插件！您需要在 <form> 标签中包含更多信息。看起来您正在 PHP 中使用 POST，因此您需要在 HTML 中指定它，以及 Web 服务器上 PHP 文件的路径。 <form method="POST" action="./path/to/php/file.php"> <input class="form-control" type="any" id="compraTC" style="margin-left:5px" placeholder="0.0000" required> <button type="submit" class="btn btn-primary" id="btnGuardarTC">Guardar Cambios</button> </form> 我建议进一步研究这一点，因为这些信息应该可以通过 HTML 和 PHP 的在线教程轻松访问。有关 HTML 中 <form> 标签的更多信息，请参阅此处：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form。

forms plugins modal-dialog

回答 1 投票 0

如何在 Bootstrap v5 中使用 javascript 编辑模态 data-bs-keyboard 属性？

我正在尝试拥有一种设置面板，可以启用/禁用模式的 data-bs-keyboard 属性，允许或禁止它们使用转义键关闭。到目前为止唯一的代码...

twitter-bootstrap attributes modal-dialog

回答 1 投票 0

如何检测模态<dialog>是否打开？

我有一个包含多个元素的页面，我使用其 showModal() 方法将其作为模式打开。我想检测当前是否从 Javascript 打开了其中任何一个（因为某些事件

javascript html modal-dialog

回答 1 投票 0

R 在菜单项单击上打开模式，但仅一次

我想通过单击 menuItem 选项卡来打开 modalDialog 窗口。在这里提出并回答了类似的问题，我将其用作模板：在菜单项上单击打开模式与我的不同