Fatal编程技术网
  • events/
  • Events Blazor组件中的事件绑定

Events Blazor组件中的事件绑定

events blazor

Events Blazor组件中的事件绑定,events,components,blazor,Events,Components,Blazor,谷歌搜索帮不了我，我希望你能。我有一个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">@Heade

谷歌搜索帮不了我，我希望你能。我有一个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>
}

在我的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组件之外时，Update方法工作得非常好。如何使其在模态组件内部工作

提前感谢。

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

要理解这一点，submit按钮并不会真正导致表单数据提交到服务器。它不会导致传统的发帖回归。记住，Blazor是一个水疗中心，没有回帖。事实上，提交事件被拦截、取消或阻止

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

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

更新
请注意，更新方法应该在父组件中定义，自动调用StsteHasChanged方法来重新呈现页面。如果仍然不起作用，请等待好消息…

发布错误日志没有抛出错误。您好，谢谢您的回答。我设法找到了缺陷。。。这是更新按钮的数据部分。我认为这个论点只对Bootstrap4Modal很重要，但很明显，它以某种方式取消了提交操作，这在我看来就像你在第二段中描述的那样。从技术上讲，我没有使用您的解决方案，但您的解释帮助我在代码中找到了罪魁祸首。再次感谢。 
 <button @onclick="Update" type="button" class="btn btn-primary" data-dismiss="modal">Update</button>