input type="password" component not able to get data from variable.

[vsfeedback]

This issue has been moved from a ticket on Developer Community.

---

I am creating an EditForm / form on Blazor . NET8 Server (Global) with data validation. However, it cannot get the value "Password" from the form. Below is my code snip:

@TestPage.razor

@page "/"
@using System.ComponentModel.DataAnnotations
<h3>testPage</h3>

<form @onsubmit="Submit">
    <input type="password" @bind-value="tempObj.password" />
    <button></button>
</form>

@code {
    [SupplyParameterFromForm(FormName = "formm")]
    tempClass tempObj { get; set; } = new();

public class tempClass
    {
        public tempClass(){}

[Required]
        public string password { get; set; } = "";
    }

void Submit()
    {
        Console.WriteLine("Success " + tempObj.password);
    }
}

Output:

Further info:

• Updated my Visual Studio to 17.11.5
• Using Blazor Web App template.
• Tried with EditForm with , same result.

Is there any issue to my code that is causing the problem? if not I hope it could be fixed as soon as possible.

---

Original Comments

Feedback Bot on 10/24/2024, 06:50 PM:

We have directed your feedback to the appropriate engineering team for further evaluation. The team will review the feedback and notify you about the next steps.

[Loocreeper]

[javiercn]

Thanks for contacting us.

The form element is missing the @formname directive

[Loocreeper]

Hi, Thanks for the reply. I have added the @formname as the code below. It doesnt work on my side. Or could you provide a working sample code to me so I can know what code is missing or what is wrong on my side? Thanks in advance

@page "/"
@using System.ComponentModel.DataAnnotations
<h3>testPage</h3>

<form @onsubmit="Submit" @formname="formm" >
    <input type="password" @bind-value="tempObj.password" />
    <button></button>
</form>

@code {
    [SupplyParameterFromForm(FormName = "formm")]
    tempClass tempObj { get; set; } = new();

    public class tempClass
    {
        public tempClass() { }

        [Required]
        public string password { get; set; } = "";
    }

    void Submit()
    {
        Console.WriteLine("Success " + tempObj.password);
    }
}

OUTPUT: Same as the image i uploaded previously.

OR in this way

@page "/"
@using System.ComponentModel.DataAnnotations
<h3>testPage</h3>

<EditForm Model="tempObj" FormName="formm" OnValidSubmit="Submit">
    <DataAnnotationsValidator/>
    <InputText type="password" @bind-Value="tempObj.password" />
    <button type="submit"></button>
</EditForm>

@code {
    [SupplyParameterFromForm(FormName = "formm")]
    tempClass tempObj { get; set; } = new();

    public class tempClass
    {
        public tempClass() { }

        [Required]
        public string password { get; set; } = "";
    }

    void Submit()
    {
        Console.WriteLine("Success " + tempObj.password);
    }
}

OUTPUT:

[javiercn]

@Loocreeper you can look at the Identity forms in the template or use https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/?view=aspnetcore-8.0#handle-form-submission

[Loocreeper]

@javiercn Hi, I have looked the identity forms template, and also sample codes from the internet, it does not work for me. It works for them because they are using .NET identity, where I am using custom made Auth for my program. This is my final failed code to solve this issue as below:

@page "/"
@using System.ComponentModel.DataAnnotations

<h3>Test Page</h3>

<EditForm Model="tempObj" FormName="formm" OnValidSubmit="Submit" OnInvalidSubmit="InvalidSubmit" method="post">
    <DataAnnotationsValidator />

    <label>Password:</label>
    <InputText type="password" @bind-Value="tempObj.password" aria-required="true" />
    <ValidationMessage For="@(() => tempObj.password)" />

    <button type="submit">Login</button>
</EditForm>

@code {
    [SupplyParameterFromForm(FormName = "formm")]
    private tempClass tempObj { get; set; } = new();

    public class tempClass
    {
        [Required]
        [DataType(DataType.Password)]
        public string password { get; set; } = "";
    }

    private async Task Submit()
    {
        Console.WriteLine($"Login success. Password: {tempObj.password}");
    }

    private void InvalidSubmit()
    {
        Console.WriteLine($"Invalid submission. Password: {tempObj.password}");
    }
}

The program triggers the invalidsubmit method only.

[Loocreeper]

I test input password with identity template, found out it works on the template but not mine. So I tried to compare what is the different of these two solution and trying to sync some code to make it work on my solution.

Finally, my finding was placing the pages in a specific directory (same as how identity templates place their Login, register pages ,etc ), we can get value from input password component.

Here is where I placed and worked for me. However, I am not sure about the security of the program and will be learn more about security in .NET 8 Blazor. However, this is the best work-around to develop programs using Custom Auth for authentication and authorization.

Please let me know if there is something I have to take note on @javiercn. Much appreciated.

[javiercn]

Thanks for the additional details.

It shouldn't matter whether you moved the page from one location to another. It likely points out that you were missing some of the required usings that activate the components on the page.

That said, if you found a solution you are happy with, that's good enough. If you need other examples there are lots of examples https://github.com/dotnet/aspnetcore/tree/1d98312ff65d4e668bc93a843e985fdacb7d2e7c/src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms in our tests

[Loocreeper]

Hi , You were right! @javiercn

The necessary using for the input password to work is:

@using Microsoft.AspNetCore.Authentication
@using Microsoft.AspNetCore.Identity

Thanks alot!

Edit2 Additional info: form that uses input password has to be in static SSR page using post method. Where in server interactive mode, values cannot be captured form the input password.