Reading form fields after submit (POST) in Blazor Server?

perfect code 271 Reputation points
2023-01-28T19:43:14.55+00:00

I have a login form in Blazor Server App and use POST to send login data (email and password).

                    <form id="LoginForm" Model="LoginModel" action="cookie" method="post">
                        <label >Email</label>
                        <input id="LoginFormEmail" type="text" name="email" @bind-value="data_WEBAPIconnection.Email" />
                        <label>Password</label>
                        <input type="password" @bind-value="data_WEBAPIconnection.Password" name="password" />
                        <div style="display: flex; justify-content: center;">
                            <input class="calc-submit-btn" type="submit" value="@_T_("k_login")" />
                        </div>
                    </form>

How can I access the form fields email and password within Blazor Server?

It doesn't work with binding, the binding variables

data_WEBAPIconnection.Email

data_WEBAPIconnection.Password

are empty after submit POST call.

I have also tried using JavaScript by going to the input element, but that doesn't work either.

function GetEmail() {
    var element = document.getElementById('LoginFormEmail').value;
    if (element != null && element.value == '') {
        return "";
    }
    else {
        return document.getElementById("LoginFormEmail").value;
    }
} 

Here by Javascript I get the error message: Cannot read properties of null (reading 'value')

I think that at the time I read the form field, the value was not transmitted to the server and therefore I get zero.

One possibility would be that I also save the password as a cookie and then read the user password entry via cookie at any time, but I would like to prevent that.

Can someone please help me here?

Thanks

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,156 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,251 questions
.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,859 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,233 questions
{count} votes

3 answers

Sort by: Most helpful
  1. Deleted

    This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.


    Comments have been turned off. Learn more

  2. perfect code 271 Reputation points
    2023-01-29T11:02:55.7+00:00

    After some research, I understood that Blazor and ASP.NET MVC are two completely different approaches that are difficult to combine. With Blazor, everything is much simpler because all the application objects used are on the server side. In the MVC approach, the objects are split between the client and the server. For example, the user can enter data in a form, but with MVC the server only knows the values when they are transferred to the server. With Blazor, these input values are immediately visible because there is a copy of the DOM on the server.

    I have read in many places that Microsoft recommends a combination of Blazor Razor pages and MVC Razor (cshtml), which is also evident in the Microsoft login framework. This may sound interesting, but I haven't figured out how to share values between a page (blazor) and a view (MVC) in combination with the controller. As far as I understand it correctly, you can't transfer a value from the controller to the blazor page!

    Back to my problem:

    After reading a lot of posts, I came to the conclusion that you have to query the database of the user input in the controller (username and password verification). Only when his input is verified, the controller is allowed to send an instruction to the client to save the cookie on the client.

    I do all this now and it works, however I have another problem and that is I don't know how to generate a notification if the user has entered a wrong password? This would be very easy if I use cshtml Razor View (e.g. via ViewBag and HTML code in the view), but since I use Blazor Razor, there is no way I can send anything to Blazor Page from the controller (e.g. a messagebox via JavaScript).

    If anyone knows anything else, I would be very grateful for a tip.

    Thanks


  3. oktu.it 0 Reputation points
    2023-03-31T07:18:55.9+00:00

    can I embed and make work smoot on my site?

    here an example oktu.it

    0 comments No comments