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

Question

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

Answer 1

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