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

Posted 2023-01-24

具有Blazor EditForm和包含的EditForm，我确实想验证并提交表单，当用户按下Ctrl + Enter时，就像他单击提交按钮一样。

我已经成功连接了键盘处理器，如下所示：

InputTextArea

此代码后面：

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

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

我看过private EditForm _editForm; private async Task myKeyPress(KeyboardEventArgs key) if (key.CtrlKey && key.Code == @"Enter") _editForm.??? // What to call here? 和this这样的问题都没有成功。

我的问题

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

答案

我可以告诉你我是怎么做的，不确定这是否是'The Way'。

如果需要，我有一个开源项目和一个带有示例的Nuget软件包：

this

此示例项目也是一个在线站点，但尚未签约的人很多：

https://github.com/DataJuggler/BlazorChat

并且下面的视频可能比我更能解释这个问题：即时聊天导览：https://blazorchat.com

我会尽力在这里解释一下：

我的加入页面显示了使用我的ValidationComponent的示例，该示例是以下内容的一部分：Nuget：DataJuggler.Blazor.Components

来源：https://youtu.be/e7vcmskJYqQ

https://github.com/DataJuggler/DataJuggler.Blazor.Components

这是我的Join.razor：

我要发布的Join.razor.cs背后的代码的唯一部分是验证用户的signUp函数：

我在另一个线程中注册用户，即StartProcessSignUp，此处不相关。

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

这是我的ValidationUser方法：

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;                    
    

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

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 PasswordsMatch and many other validations // return value return isValid;

我将不解释我如何将UserNameComponent作为组件的属性，但是如果您对使用接口感到好奇，可以在这里发表博客文章：

很难发布整个项目的代码，但这也许会给您一些想法。

我现在已经在两个站点中使用过此功能。 BlazorChat.com是其中一个，另一个是：

另一个是：像素数据库https://datajugglerblazor.blogspot.com/2020/01/how-to-use-interfaces-to-communicate.html一个免费的基于在线文本的图像编辑器。

https://pixeldatabase.net