CODEWITHSUNDEEP
asp.net-core.net-coreblazor
Melon NG
Melon NG

Reputation: 2994

How can I render the input with type='text' in blazor server-side?

Here are the codes:

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

After the program ran, it turned out to be this:

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

Now I wanna add an attribute type="text" to the input element, how can I achieve this?

I tried to modify the code like this:

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

Meanwhile, now visual studio reports an error: enter image description here

I can not bind the model anymore.

I need to set the type to text for needing to set the keyboard in mobile correctly.

How can I solve this? Thank you.

Upvotes: 3

Views: 3963

Answers (1)

user12207343
user12207343

Reputation:

What is wrong with this code:

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

Run this code with the above:

@code {

InputMsgModel _InputMsgModel = new InputMsgModel();

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



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

Do you see the text "My new message" in the text box ? I believe you do... All is well, and the two-way binding mechanism works well. Go and see now the Html...it's still <input class="valid"> which does not reflect the real state of the text box. Think about it...

Update: Of course you can use the following:

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

Important: The error "The attribute names could not..." is triggered because you use capital "V" in @bind-Value. You should use lower case: @bind-value. This is because your using input 'Html element' here, and it has a value attribute, not a Value attribute. But when you use the InputText Component, the capital Value in @bind-Value refers to a Value property defined in the component.

Upvotes: 1

Related Questions