C#•3mo ago

Issues with DataAnnotationsValidator and ValidationSummary

I am currently following a tutorial to learn Blazor (I'm working in 8.0). I have a MessageWall.razor file, containing:

@page "/MessageWall"

<h3>MessageWall</h3>

<EditForm Model="model" OnValidSubmit="ValidSubmission" FormName="MessageWallForm">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <label for="message" class="form-label">@nameof(model.Message)</label>
    <InputText id="message" @bind-Value="model.Message" class="form-control" />

    <button class="btn btn-primary" type="submit">Submit</button>
</EditForm>

<ul>
    @foreach (string message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private MessageModel model = new();
    private List<string> messages = new();
    private void ValidSubmission()
    {
        messages.Add(model.Message);
        model = new();
    }
}

@page "/MessageWall"

<h3>MessageWall</h3>

<EditForm Model="model" OnValidSubmit="ValidSubmission" FormName="MessageWallForm">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <label for="message" class="form-label">@nameof(model.Message)</label>
    <InputText id="message" @bind-Value="model.Message" class="form-control" />

    <button class="btn btn-primary" type="submit">Submit</button>
</EditForm>

<ul>
    @foreach (string message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private MessageModel model = new();
    private List<string> messages = new();
    private void ValidSubmission()
    {
        messages.Add(model.Message);
        model = new();
    }
}

and a MessageModel.cs (contained within a Models folder, which I added to @_Imports.razor using @using BlazorServerMessageWall.Models):

using System.ComponentModel.DataAnnotations;

namespace BlazorServerMessageWall.Models;

public class MessageModel
{
    [Required]
    [StringLength(10, MinimumLength = 5)]
    public string Message { get; set; }

}

using System.ComponentModel.DataAnnotations;

namespace BlazorServerMessageWall.Models;

public class MessageModel
{
    [Required]
    [StringLength(10, MinimumLength = 5)]
    public string Message { get; set; }

}

When I fire up the application, and enter a valid entry (eg; "hello", "123456") I get the attached image [posted below]. Really baffled here, read through the documentation. What am I doing incorrectly?

25 Replies

𝗝𝗮𝗺𝗲𝘀•3mo ago

@Rusty Shakleford I can't find the image (maybe you forgot to add it)

Rusty Shakleford•3mo ago

Oh! I attached it but it seems to have not uploaded. Hopefully it's attached here 🤞

𝗝𝗮𝗺𝗲𝘀•3mo ago

@Rusty Shakleford, what is the .NET version you are using?

Rusty Shakleford•3mo ago

8.0

𝗝𝗮𝗺𝗲𝘀•3mo ago

After .NET 8 somethings where changed about Blazor in the latest versions, for example you now can declare the rendering logic per page like:

// adding this to the .razor page's top solved the problem 
@rendermode InteractiveServer

// adding this to the .razor page's top solved the problem 
@rendermode InteractiveServer

Rusty Shakleford•3mo ago

Sadly that doesn't seem to have worked either! I wonder if I just created the wrong type of project on creation... I'm completely new to the whole .NET arena and the tutorial I'm following is a little out of date

𝗝𝗮𝗺𝗲𝘀•3mo ago

Right. Can show how your App.razor or host.cshtml looks like? Either one you have

Rusty Shakleford•3mo ago

This is my App.razor:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="BlazorServerMessageWall.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="BlazorServerMessageWall.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

𝗝𝗮𝗺𝗲𝘀•3mo ago

and your program.cs ends like this?

app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

Rusty Shakleford•3mo ago

Yep!

𝗝𝗮𝗺𝗲𝘀•3mo ago

it got to be something somewhere else then your code, with the addition of InteractiveServer seems right

Rusty Shakleford•3mo ago

I'm heavily starting to suspect I selected the wrong Blazor project type! I really don't understand all the different ones yet (I started this morning 😅 ), there were two (that I saw) that I could select. One was WebAssembly Standalone, and the other was Blazor Web App. I selected the Blazor Web App

𝗝𝗮𝗺𝗲𝘀•3mo ago

here's the one i choosed

Rusty Shakleford•3mo ago

I just downloaded the completed code from the tutorial, and it prompted me to install .NET 6... which has now given me another project type - Blazor Server App

Rusty Shakleford•3mo ago

Could it be my file structure? I've got it set up like this...

Rusty Shakleford•3mo ago

(whoops, MessageWall.razor is in the Pages folder, I forgot to un-collapse it for the screenshot)

𝗝𝗮𝗺𝗲𝘀•3mo ago

yea same here, try creating a bew Blazor Web App from visual studio interface then you just paste what you typed in here and test if it works

𝗝𝗮𝗺𝗲𝘀•3mo ago

all you should need is this

𝗝𝗮𝗺𝗲𝘀•3mo ago

uncheck sample pages (if you are not interested in the template) otherwise it will pollute your project with more files

Rusty Shakleford•3mo ago

How strange.... It works when I make a new application like you said! Even though there's no difference between the old one, and the new one!

𝗝𝗮𝗺𝗲𝘀•3mo ago

I would compare all files from both just to make sure There got to be something that screwing things up code cop investigation XD

Rusty Shakleford•3mo ago

The only difference I can think of, is that in the old application, I deleted the Counter and Weather Pages... And commented out the links to them in the NavMenu

𝗝𝗮𝗺𝗲𝘀•3mo ago

There are a lot of times where we are sure that things are the same, feels like a phantasmagoric effect. The bug is usually where you where most sure everything seemed right Happens everytime with everyone, anyway, happy coding!

Rusty Shakleford•3mo ago

Deeply frustrating stuff! I've just moved over from predominantly making my web stuff in either JS or Python, so this is an experience so far 😂 Thank you so much for your help!

Gaming

Programming

Issues with DataAnnotationsValidator and ValidationSummary