asp net core: Route parameter

Question

Hello,

I have this view template Login.cshtml

<div class="row">
    <div class="col-md-4 col-md-offset-4">
        <form asp-controller="Account" asp-action="Login" method="post">

            <div asp-validation-summary="All" class="text-danger"></div>

            <div class="form-group">
                <label>Email</label>
                <input asp-for="UserName" class="form-control" />
                <span asp-validation-for="UserName" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label>Password</label>
                <input asp-for="Password" class="form-control" />
                <span asp-validation-for="Password" class="text-danger"></span>
            </div>

            <a asp-controller="Account" asp-action="ResetPsw" asp-route-username="@Model.UserName">Reset Password</a>

            <div class="form-group">
                <button type="submit" class="btn btn-dark">Login</button>
            </div>
        </form>
    </div>
</div>

Here is function ResetPsw in AccountController:

[HttpGet]
public async Task<IActionResult> ResetPsw(string username)
{
    // source code
}

I will display form in Login.cshtml and fill field "UserName". Then I will use "Reset Password" link.
The method "ResetPsw" in AccountController is called, but the parameter "username" is null.
Why is the parameter "username" null? What should I do differently?

Thank you for the advice,
Jurin

Answer 1

Because you're using @Model.UserName. In your HTML you're using model binding. When the HTML is sent to the browser any @ expressions are replaced with their current value. So when the HTML goes to the browser @Model.UserName is most likely empty, unless you're setting it on the server side somehow. Hence the route parameter will be an empty string.

You are wanting to get the user name that the user typed in on the client side. Until the data is posted back to the server via a submit button then this is all client side and Model won't help you as it is server side only.

What you'll need to do is write some JS to fetch the current value of the input control. When the user clicks the link, call your JS function that gets the user name from the input. Then you'll need to append that to the URL yourself as part of the query string. You cannot use the ASP.NET Core attributes on the client side code. If you look at the HTML actually sent to the browser you'll see that the various asp- attributes you are using are being translated on the server side first. Hence the client side code cannot use them. You'll have to do traditional client side coding.

Note that if you're using a client side library like Knockout, Angular or Vue then this problem can be easily solved using a client side binding instead. However that is beyond the scope of this post and not even relevant if you're just using ASP.NET Core.

Answer 2

Thank you so much for the explanation