Blazor RenderTreeBuilder 中的空引用异常

Question

所以我正在做一个学校项目。我在前端使用 blazor 并使用 FluentValidation 来验证表单。

一、例外情况：

System.NullReferenceException
  HResult=0x80004003
  Message=Object reference not set to an instance of an object.
  Source=TemperBapes
  StackTrace:
   at TemperBapes.Pages.Register.BuildRenderTree(RenderTreeBuilder __builder)

我在调用/Register 页面时遇到异常。当我的 HTML 损坏时，我已经有来自 RenderTreeBuilder 的异常。到目前为止，我总能很快解决问题。但我坚持这个。这就是我的 .razor 文件的样子：

@page "/Register"

<div class="card">
    <h5 class="card-header">Register</h5>
    <div class="card-body">
        <form>
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" class="form-control" id="username" placeholder="Enter username" @bind-value="User.Username" />
                <ValidationMessage For="() => User.Username"></ValidationMessage>
            </div>
            <div class="form-group">
                <label for="displayname">Display Name</label>
                <input type="text" class="form-control" id="displayname" placeholder="Enter your display name" @bind-value="User.DisplayName" />
                <ValidationMessage For="() => User.DisplayName"></ValidationMessage>
            </div>
            <div class="form-group">
                <label for="email">Email address</label>
                <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" @bind-value="User.EMail" />
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                <ValidationMessage For="() => User.EMail"></ValidationMessage>
            </div>
            <div class="form-group">
                <label for="tele">Tel</label>
                <input type="tel" class="form-control" id="tele" aria-describedby="telHelp" placeholder="Enter tel" @bind-value="User.Phonenumber" />
                <small id="telHelp" class="form-text text-muted">We'll never share your tel with anyone else.</small>
                <ValidationMessage For="() => User.Phonenumber"></ValidationMessage>
            </div>
            <div class="form-group">
                <label for="passwordfield">Password</label>
                <input type="password" class="form-control" id="passwordfield" placeholder="Password" @bind-value="User.Password" />
            </div>
            <button type="submit" class="btn btn-primary" @onclick="(() => SendRegister())">Submit</button>
        </form>
    </div>
</div>

@code{
    public AddUserDto User { get; set; }

    public void SendRegister()
    {
        
    }
}

注释掉 FluentValidation <ValidationMessage></ValidationMessage> 时会抛出相同的异常，已经尝试过了。提前谢谢大家。

Answer 1

你需要像

一样初始化你的User

 public AddUserDto User { get; set; } = new AddUserDto();

因为您的用户为 null，所以像 @bind-value="User.Password" 这样的绑定无法工作并在被 RenderTreeBuilder 使用时抛出错误。

如果解决此问题，页面将会呈现。但是，您将运行进入下一期。

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Microsoft.AspNetCore.Components.Forms.ValidationMessage`1[System.String] requires a cascading parameter of type EditContext. For example, you can use Microsoft.AspNetCore.Components.Forms.ValidationMessage`1[System.String] inside an EditForm.
System.InvalidOperationException: Microsoft.AspNetCore.Components.Forms.ValidationMessage`1[System.String] requires a cascading parameter of type EditContext. For example, you can use Microsoft.AspNetCore.Components.Forms.ValidationMessage`1[System.String] inside an EditForm.
   at Microsoft.AspNetCore.Components.Forms.ValidationMessage`1[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].OnParametersSet()
   at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

这里的信息非常直接。您需要添加一个 EditContext。为此，请将 <form> 替换为 <EditForm> 并添加 Model 属性.

 <EditForm Model="User">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" class="form-control" id="username" placeholder="Enter username" @bind-value="User.Username" />
                <ValidationMessage For="() => User.Username"></ValidationMessage>
            </div>
            <div class="form-group">
                <label for="displayname">Display Name</label>
                <input type="text" class="form-control" id="displayname" placeholder="Enter your display name" @bind-value="User.DisplayName" />
                <ValidationMessage For="() => User.DisplayName"></ValidationMessage>
            </div>
            <div class="form-group">
                <label for="email">Email address</label>
                <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" @bind-value="User.EMail" />
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                <ValidationMessage For="() => User.EMail"></ValidationMessage>
            </div>
            <div class="form-group">
                <label for="tele">Tel</label>
                <input type="tel" class="form-control" id="tele" aria-describedby="telHelp" placeholder="Enter tel" @bind-value="User.Phonenumber" />
                <small id="telHelp" class="form-text text-muted">We'll never share your tel with anyone else.</small>
                <ValidationMessage For="() => User.Phonenumber"></ValidationMessage>
            </div>
            <div class="form-group">
                <label for="passwordfield">Password</label>
                <input type="password" class="form-control" id="passwordfield" placeholder="Password" @bind-value="User.Password" />
            </div>
            <button type="submit" class="btn btn-primary" @onclick="(() => SendRegister())">Submit</button>
 </EditForm>

要了解更多关于 EditForm 的知识，我推荐以下文章。

https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-5.0

Blazor RenderTreeBuilder 中的空引用异常

NullReference Exception in Blazors RenderTreeBuilder

html

rendering

fluentvalidation

blazor