Связывание событий изнутри компонента Blazor - PullRequest
Новая
       45

Связывание событий изнутри компонента Blazor

1 голос
/ 30 января 2020

поиск в Google не помог мне, я надеюсь, что вы можете. У меня есть такой компонент 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 вне Модального компонента. Как мне заставить это работать внутри Модального Компонента?

Заранее спасибо.

1 Ответ

0 голосов
/ 30 января 2020

Описание, например, работает ли он отлично или не работает, явно бесполезно. Однако, я полагаю, проблема в том, что вызов кнопки отправки приводит к отображению родительского компонента, в котором находится ваш компонент Model.

Поймите, кнопка отправки на самом деле не приводит к отправке данных формы на сервер. Это не приводит к традиции пост обратно. Помните, Blazor - это СПА, никаких постов обратно. На самом деле событие отправки перехватывается, отменяется или предотвращается.

Решение: используйте кнопку с директивой @onclick, например: 

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

Обратите внимание, что обновление Метод должен быть определен в родительском компоненте, автоматически вызывая метод StsteHasChanged для повторного рендеринга вашей страницы. Если это все еще не работает, ждите хороших новостей ...

...