Saya hanya bermain-main dengan aplikasi server Blazer pertama saya dan mengalami masalah saat mengirimkan EditForm. Validasi berfungsi pada dua kotak teks yang terikat ke properti dengan anotasi yang diperlukan tetapi ketika saya mengirimkan formulir, tidak ada metode formulir yang dipanggil dan Chrome hanya melaporkan kesalahan. Tahu apa masalahnya?

Halaman

@page "/"
@inject NavigationManager NavigationManager

@using MyModels

<div class="backgroupContainer">
    <EditForm Model="@authModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInValidSubmit">
        <DataAnnotationsValidator />

        <div id="login">
            <img id="login-image" src="images/img-01.png" alt="Login" />
            <div class="container">
                <div id="login-row" class="row justify-content-center align-items-center">
                    <div id="login-column" class="col-md-6">
                        <div id="login-box" class="col-md-12">
                            <form id="login-form" class="form" action="" method="post">
                                <h3 class="text-center text-info">Login</h3>
                                <div class="form-group">
                                    <label for="username" class="text-info">Username:</label><br>
                                    <InputText id="username" class="form-control" placeholder="Username" @bind-Value="authModel.Username" />
                                    <ValidationMessage For="@(() => authModel.Username)" />
                                </div>
                                <div class="form-group">
                                    <label for="password" class="text-info">Password:</label><br>
                                    <InputText id="password" class="form-control" type="password" placeholder="Password" @bind-Value="authModel.Password" />
                                    <ValidationMessage For="@(() => authModel.Password)" />
                                </div>
                                <div class="form-group">
                                    <button type="submit">Login</button>*
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </EditForm>
</div>

@code {

    private AuthenticationModel authModel = new AuthenticationModel();

    private void HandleLogin()
    {
        System.Diagnostics.Debugger.Break();
        NavigationManager.NavigateTo("counter");
    }

    private void HandleValidSubmit()
    {
        System.Diagnostics.Debugger.Break();
        NavigationManager.NavigateTo("fetchdata");
    }

    private void HandleInValidSubmit()
    {
        System.Diagnostics.Debugger.Break();
        NavigationManager.NavigateTo("error");
    }
}

Model Tampilan

using System.ComponentModel.DataAnnotations;

namespace MyModels
{
    public class AuthenticationModel
    {
        [Required]
        public string Username { get; set; }

        [Required]
        public string Password { get; set; }
    }
}

Chrome

Saya dapat melihat bahwa alat Dev konsol Chrome memberikan pengecualian tetapi itu hilang jauh sebelum saya dapat menangkapnya.

enter image description here

Saya berhasil menangkap kesalahan konsol Chrome, untuk semua kebaikan yang dilakukannya.

enter image description here

Jendela Output Visual Studio ditampilkan

Memuat '/usr/share/dotnet/shared/Microsoft.NETCore.App/3.1.5/System.Security.Principal.Windows.dll'. Melewatkan memuat simbol. Modul dioptimalkan dan opsi debugger 'Just My Code' diaktifkan.

Dan inilah log dari wadah Docker

warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. warn: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[35]
      No XML encryptor configured. Key {0405d1c3-4428-4e59-add8-4b1e48db282b} may be persisted to storage in unencrypted form. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app

Mengaktifkan semua pengecualian dan menonaktifkan "Just My Code"

Mengaktifkan semua jenis pengecualian tidak membuat perbedaan apa pun, tetapi mematikan debugging Just My Code memberi saya pengecualian di bawah ini

enter image description here

enter image description here

enter image description here

Token Anti Pemalsuan

Setelah membaca Masalah GitHub saya mengubah kode di bawah ini dalam metode ConfigureServices dari Startup. cs. Itu tidak lagi mengebom halaman 400 Chrome tetapi masih tidak mengaktifkan metode OnValidSubmit atau OnInvalidSubmit di halaman.

    //services.AddRazorPages()

    services.AddRazorPages(o =>
    {
        o.Conventions.ConfigureFilter(new Microsoft.AspNetCore.Mvc.IgnoreAntiforgeryTokenAttribute());
    });

Terakhir diedit untuk malam ini

Jika mengikuti contoh Validasi Formulir dari artikel Blazor Univercity dan itu memecat metode OnValid dan OnInalid jadi itu pasti masalah di markup asli saya. Saat ini saya tidak tahu apa.

Kode kerja:

<EditForm Model=@person OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div class="form-group">
        <label for="Name">Name</label>
        <InputText @bind-Value=person.Name class="form-control" id="Name" />
    </div>
    <div class="form-group">
        <label for="Age">Age</label>
        <InputNumber @bind-Value=person.Age class="form-control" id="Age" />
    </div>
    <input type="submit" class="btn btn-primary" value="Save" />
</EditForm>

@code {
        Person person = new Person();

        public class Person
        {
            [System.ComponentModel.DataAnnotations.Required]
            public string Name { get; set; }
            [System.ComponentModel.DataAnnotations.Range(18, 80, ErrorMessage = "Age must be between 18 and 80.")]
            public int Age { get; set; }
        }

        private void HandleValidSubmit()
        {
            System.Diagnostics.Debugger.Break();
            NavigationManager.NavigateTo("fetchdata");
        }

        private void HandleInValidSubmit()
        {
            System.Diagnostics.Debugger.Break();
            NavigationManager.NavigateTo("error");
        }
    }

REPO:

https://github.com/PhilipAnthonyMurray/Blazor

1
Phil Murray 7 Juli 2020, 20:12

1 menjawab

Jawaban Terbaik

Masalahnya adalah Anda memiliki <form> di markup Anda. Anda tidak memerlukannya karena <EditForm> membuatkan satu untuk Anda dan mengaitkannya dengan kejadian formulir.

Saat ini, saat Anda mengirimkan formulir, aplikasi akan menavigasi ulang ke halaman saat ini, itulah sebabnya aplikasi ini menggunakan metode OnInitializedAsync.

Segera setelah Anda menghapus formulir, itu berfungsi.

2
Peter Morris 7 Juli 2020, 20:41