Blazor 组件中的事件绑定答案

【问题标题】：Event Binding from within a Blazor ComponentBlazor 组件中的事件绑定
【发布时间】：2020-01-30 22:29:46
【问题描述】：

谷歌搜索没有帮助我，我希望你能。我有一个像这样的 Modal.razor 组件：

<div class="modal" id="@Id">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">@Header</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            @Body
        </div>
        <div class="modal-footer">
            @Footer
        </div>

    </div>
</div>

@代码 {

[Parameter] public string Id { get; set; }
[Parameter] public RenderFragment Header { get; set; }
[Parameter] public RenderFragment Body { get; set; }
[Parameter] public RenderFragment Footer { get; set; }

}

在我的 Links.razor 视图中，我有：

    <Modal Id="myModalEdit" >
    <Header>
        Edit Link
    </Header>
    <Body>
        <EditForm Model="@SelectedItem" OnValidSubmit="@Update">
            <DataAnnotationsValidator />

            <div class="form-group">
                <label>Label:</label>
                <div>
                    <InputText class="form-control" @bind-Value="@SelectedItem.Label" />
                    <ValidationMessage For="@(() => SelectedItem.Label)" />
                </div>
            </div>


            <div class="form-group">
                <label>Url:</label>
                <div>
                    <InputText class="form-control" @bind-Value="@SelectedItem.Url" />
                    <ValidationMessage For="@(() => SelectedItem.Url)" />
                </div>
            </div>


            <div class="form-group">
                <label>Notes:</label>
                <div>
                    <InputText class="form-control" @bind-Value="@SelectedItem.Notes" />
                    <ValidationMessage For="@(() => SelectedItem.Notes)" />
                </div>
            </div>




            <button type="submit" class="btn btn-primary" data-dismiss="modal">Update</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        </EditForm>
    </Body>
</Modal>

当我将 EditForm 放在模态组件之外时，Update 方法效果很好。如何使它在模态组件中工作？

提前致谢。

【问题讨论】：

发布您的错误日志
没有抛出错误。

标签： events components blazor

【解决方案1】：

诸如工作正常或不工作之类的描述显然没有帮助。但是，我想问题是对提交按钮的调用导致您的模型组件所在的父组件呈现。

明白这一点，提交按钮并不会真正导致将表单数据提交到服务器。它不会导致传统的回邮。请记住，Blazor 是一个 SPA，没有回发。事实上，提交事件被拦截并取消或阻止。

解决方案：使用带有@onclick 指令的按钮，例如：

 <button @onclick="Update" type="button" class="btn btn-primary" data-dismiss="modal">Update</button>

注意Update方法应该在父组件中定义，自动调用StsteHasChanged方法重新渲染你的页面。如果还是不行，就等好消息吧……

【讨论】：

您好，Enet，感谢您的回答。我设法找到了缺陷......它是更新按钮的 data-dismiss="modal" 部分。我认为这个论点只对 Bootstrap 4 Modal 很重要，但显然，它以某种方式取消了提交操作，对我来说，这听起来就像你在第二段中描述的那样。从技术上讲，我没有使用您的解决方案，但您的解释帮助我找到了代码中的罪魁祸首。再次感谢。