如何以编程方式提交Blazor表单？

提问者：小点点

如何以编程方式提交Blazor表单？

有了Blazoreditform和包含的inputtextarea（即多行文本框），我确实希望在用户按下ctrl+enter时验证并提交表单，就像他要单击submit按钮一样。

我成功地连接了键盘处理程序，如下所示:

<EditForm Model="@myModel" Format="g" OnValidSubmit="@Store" @ref="_editForm">
    <InputTextArea 
        onkeypress="@(async e => await myKeyPress(e))"
        @bind-Value="myModel.Foo" />
    <button type="submit">Store it</button>
</EditForm>

后面有以下代码:

private EditForm _editForm;

private async Task myKeyPress(KeyboardEventArgs key)
{
    if (key.CtrlKey && key.Code == @"Enter")
    {
        _editForm.??? // What to call here?
    }
}

不幸的是，我在EditForm类中没有看到可以调用来提交和验证表单的方法，就好像用户会单击submit按钮一样。

我已经看过这个和这个问题了，但没有成功。

如何以编程方式提交和验证Blazor表单？

共1个答案

匿名用户

我可以告诉你我是怎么做到的，不确定这是不是‘方式’。

我有一个开源项目和Nuget包，其中有一个例子，如果你想要的话:

https://github.com/datajuggler/blazorchat

这个样本项目也是一个直播站点，但目前还没有多少人报名:

https://blazorchat.com

这里有一个视频可能比我能更好地解释这一点:布拉特聊天导览:https://youtu.be/e7vcmskjyqq

我将尽我所能在此解释:

我的Join页面显示了一个使用我的ValidationComponent的示例，它是:nuget:datajuggler.blazor.components的一部分

来源:https://github.com/datajuggler/datajuggler.blazor.components

这是我的接头。剃刀:

@namespace BlazorChat.Components
@using DataJuggler.UltimateHelper.Core 
@using DataJuggler.Blazor.Components 
@using Microsoft.AspNetCore.ProtectedBrowserStorage

<div class="logincontainer">
    <div class="signupcontrols">
        Sign In With Your User Name or Email Address
        <div class="bigline"></div>
        <ValidationComponent Name="UserNameComponent" Parent=this
             Caption="User Name" IsRequired="false" MinimumLength="5"
             MaximumLength="20" IsUniqueCallbackRequired="true">
        </ValidationComponent> 
        <ValidationComponent Name="EmailAddressComponent" Parent=this
             Caption="Email Address" IsRequired="false" MaximumLength="80"             
             IsUniqueCallbackRequired="true">
        </ValidationComponent>
        <ValidationComponent Name="PasswordComponent" Parent=this
             Caption="Password" IsRequired="true" MaximumLength="20" 
             MinimumLength="8" IsUniqueCallbackRequired="false"
             PasswordMode="true" ValidationMessage="You must enter a password.">
        </ValidationComponent>        
        <ValidationComponent Name="RememberLoginComponent" Parent=this
             Caption="Remember" IsRequired="false" MaximumLength="0" CheckBoxMode="true"
             MinimumLength="0" IsUniqueCallbackRequired="false" 
             CheckBoxYPosition="1.2" CheckBoxXPosition="-6">
        </ValidationComponent>
    </div>
    <br />
    <div class="signupbuttons">
        <button class="greenbutton4" @onclick="LoginButton_Click">
            <span class="moveup">Login</span>
        </button>
        <button class="greenbutton4" @onclick="Cancel">
            <span class="moveup">Cancel</span>
        </button>
    </div>
</div>
@if (TextHelper.Exists(ValidationMessage))
{
    <div class="validationmessage2">
        @ValidationMessage
    </div>
 }
 @if (ShowProgress)
 { 
     <div class="progresscontainer">
         <div class=@ProgressStyle>
            <span class="text-white">@PercentString</span>
            <div class="slice">
                <div class="bar"></div>
                <div class="fill"></div>
            </div>
        </div>
     </div>
}
 <Sprite Subscriber=this Visible="true" Interval="50" Position="fixed" 
         XPosition="-200" YPosition="-200" Width="100" Height="100">
 </Sprite>

在join.razor.cs后面，我要发布的代码的唯一部分是验证用户的注册函数:

我在另一个线程中注册了一个用户，这就是StartProcessSignUp，这里不相关。

public void SignUp()
{
    // validate the user
    bool isValid = ValidateUser();

    // if everything is valid
    if (isValid)
    {  
        // Set to 0 percent
        Percent = 0;

        // Process the Login
        bool started = StartProcessSignUp();

        // if the InvisiibleSprite exists
        if ((HasInvisibleSprite) && (started))
        {
            // A login in process is true
            LoginInProcess = true;

            // Start the Timer
            InvisibleSprite.Start();
        }

        // Show the ProgressBar
        ShowProgress = true;                    
    }
}

下面是我的ValidationUser方法:

public bool ValidateUser()
{
    // initial value (default to true)
    bool isValid = true;

    // Erase
    ValidationMessage = "";

    // if there is a UserNameComponent
    if (HasUserNameComponent)
    {
        // validate this control
        isValid = UserNameComponent.Validate();

        // if the value for isValid is false
        if (!isValid)
        {
            // Set the Validation Message
            ValidationMessage = UserNameComponent.InvalidReason;
        }
        else
        {
            // Set the UserName
            UserName = UserNameComponent.Text;
        }
    }

    // I took out the code for Passwords Match and many other validations

    // return value
    return isValid;
}

我的验证组件包括一个名为“IsUniqueCallbackRequired”的属性，我使用它在数据库中进行查找，以确保电子邮件地址和用户名是唯一的。如果这两项都通过，则继续注册:

我不打算解释我如何将UserNameComponent作为组件上的属性，但是如果您对使用接口感到好奇，我在这里有一篇博客文章:

https://datajugglerblazor.blogspot.com/2020/01/how-to-use-interface-to-communicate.html

要发布一个完整的项目代码是很困难的，但这可能会给你一些想法。

我现在已经在两个网站上使用了这个。 blazorchat.com是一个，另一个是:

https://pixeldatabase.net免费在线文本图像编辑器。