如何在blazor服务器端使用type ='text'渲染输入？

Question

以下是代码：

<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报告一个错误：

我无法再绑定模型。

我需要将类型设置为文本，以便正确设置手机键盘。

我该如何解决？谢谢。

Answer 1

此代码出了什么问题？

<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>

重要提示：由于在@bind-Value中使用大写字母“ V”，因此触发了错误“属性名称无法...”。您应该使用小写字母：@bind-value。这是因为您在此处使用输入“ HTML元素”，并且具有 value 属性，而不是 Value 属性。但是，当您使用InputText Component 时，@bind-Value中的大写值是指组件中定义的Value属性。