Как я могу отобразить ввод с type = 'text' на серверной стороне Blazor? - PullRequest
Новая
       83

Как я могу отобразить ввод с type = 'text' на серверной стороне Blazor?

2 голосов
/ 15 октября 2019

Вот коды: 

<EditForm OnValidSubmit="@SubmitText" id="inputText">
            <InputText @bind-Value="_InputMsgModel.Msg" />
</EditForm>

После запуска программы получилось следующее: 

<form id="inputText">
<input class="valid">
</form>

Теперь я хочу добавить атрибут type="text" к входуэлемент, как я могу добиться этого?

Я пытался изменить код следующим образом: 

<EditForm OnValidSubmit="@SubmitText" id="inputText">
            <input type="text" @bind-Value="_InputMsgModel.Msg" />
</EditForm>

Между тем, теперь Visual Studio сообщает об ошибке: enter image description here

Я больше не могу связать модель.

Мне нужно установить тип на текст для правильной установки клавиатуры в мобильном телефоне.

Как я могу решить эту проблему? Спасибо.

1 Ответ

1 голос
/ 15 октября 2019

Что не так с этим кодом: 

<EditForm  Model="@_InputMsgModel" OnValidSubmit="@SubmitText" id="inputText" >
    <InputText  @bind-Value="@_InputMsgModel.Msg" />
</EditForm>

Запустите этот код с указанным выше кодом: 

@code {

InputMsgModel _InputMsgModel = new InputMsgModel();

    private void SubmitText()
    {
        Console.WriteLine(_InputMsgModel.Msg);
    }



    public class InputMsgModel
    {
        public string Msg { get; set; } = "My new message";
    }
}

Вы видите текст «Мое новое сообщение» в текстовом поле? Я верю, что вы делаете ... Все хорошо, и двусторонний механизм связывания работает хорошо. Теперь посмотрите HTML-код ... он все еще <input class="valid">, который не отражает реального состояния текстового поля. Подумайте об этом ...

Обновление: Конечно, вы можете использовать следующее: 

<EditForm  Model="@_InputMsgModel" OnValidSubmit="@SubmitText" id="inputText" >
    <input type="text"  @bind-value="@_InputMsgModel.Msg" />
</EditForm>

Важное замечание: Ошибка "Имена атрибутов не могут ..." вызвана тем, что вы используетезаглавная "V" в @bind-Value. Вы должны использовать нижний регистр: @bind-value. Это связано с тем, что вы используете входной элемент «HTML-элемент» здесь, и он имеет атрибут value , а не атрибут Value . Но когда вы используете InputText Component , значение Capital в @bind-Value относится к свойству Value, определенному в компоненте.

...