Question

谷歌搜索对我没有帮助，希望您能。我有一个像这样的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>

@code {

[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放在Modal Component之外时，Update方法可以很好地工作。如何使其在模态组件内工作？

谢谢。

Answer 1

诸如完美工作或无法正常工作之类的描述显然无济于事。.但是，我想问题是，对Submit按钮的调用导致呈现了Model组件所在的父组件。

了解这一点，“提交”按钮实际上并不会导致将表单数据提交到服务器。它不会导致传统回传。请记住，Blazor是SPA，没有回发。实际上，submit事件被拦截，取消或阻止。

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

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

请注意，Update方法应该在父组件中定义，并自动调用StsteHasChanged方法来重新呈现页面。如果仍然无法正常工作，请等待好消息...

Blazor组件中的事件绑定

1 个答案: