Getting Model content in ActionLink

Question

I have the following simple Login-View:(only posted the relevant parts)

@model  Models.LoginModel

@using (@Html.BeginForm("Login", "Account", FormMethod.Post, new { @enctype = "multipart/form-data", @class = "fm", @ReturnUrl = @ViewBag.ReturnUrl }))
{
  @Html.AntiForgeryToken()
  <h1 id="title-header">Login</h1>
  <div>
    @Html.TextBoxFor(m => m.Username, new { @maxlength = "250", @class = "username", @style = "width: 250px;" })
    @Html.ValidationMessageFor(m => m.Username)
  </div>
  <div>
    @Html.PasswordFor(m => m.Password, new { @maxlength = "250", @class = "password", @style = "width: 250px;" })
    @Html.ValidationMessageFor(m => m.Password)
  </div>
  <div>
    <input type="submit" value="Login" />            
    @Html.ActionLink("Reset PW","ResetPw","Account", new { model=Model})
  </div>   
</div>  
}

When I submit the form everything is fine: The Login-Action is called and the Model contains username and password.

When I click onto the "Reset PW" - Link I want to achieve the same but with a different action. The action is called as wanted ("ResetPw()"), but the model does not contain the username entered by the user, but each string property of the model is null.

Are you trying to link to Reset Password page or do you want to submit a ResetPassword form? — Martin, Jul 15 '15 at 12:32

score 1 · Accepted Answer · edited May 23 '17 at 12:06

That's because the Model in new { model = Model } will be evaluated when the page is served up before the user has entered a username. It is not bound to change when the username changes.

Instead you should make the reset password action be a submit input as well. Then give both that and the Login input the same name such as submitButton. Then in the Login-Action you can have a parameter string submitButton which will have a value equal to the value of the input. You can then take a different action depending on the value.

How do you handle multiple submit buttons in ASP.NET MVC Framework

Thanks, Using ´formaction´and styling the button as a link using css worked for me — Ole Albers, Jul 15 '15 at 12:52

score 1 · Answer 2 · edited May 23 '17 at 12:21

You can't assign a complex model to an ActionLink like that. Since you're only interested in the username, use that property of your model:

@Html.ActionLink("Reset PW","ResetPw","Account", new { username = Model.Username })

This of course assumes that the user first tried to log in, so posted to the server, and your controller returned the model. Otherwise it'll be null and this won't work.

If you want the user to be able to click the "Reset PW" link without first posting back to your controller, you'll need JavaScript to change the link in the clientside click event handler.

In order for that to work, you'll need to give the textbox and link an ID:

@Html.TextBoxFor(m => m.Username, new { @maxlength = "250", @class = "username", @style = "width: 250px;", 
                                        id = "usernameTextbox" })

@Html.ActionLink("Reset PW","ResetPw","Account", new { username = Model.Username }, new {id = "resetPasswordLink"})

And onclick, find it, alter the href to include the value entered in the textbox and continue:

<script type="text/javascript">
document.ready(function() {
    document.getElementById("resetPasswordLink").onclick = function() {

        var username = document.getElementById("usernameTextbox).value;

        // This gets rendered serverside.
        var resetUrl = '@Html.ActionLink("Reset PW", "ResetPw", "Account")';

        resetUrl += '?username=' + username;

        document.getElementById("resetPasswordLink").href = resetUrl;
    };
);
</script>

Wouldn't help. Is "null", too – Ole Albers Jul 15 '15 at 12:37 — Ole Albers, Jul 15 '15 at 12:37

score 1 · Answer 3 · answered Jul 15 '15 at 12:37

Thing is that your Model renders when you get your View from server. And it doesn't fill any data that user enter to form. If you want to do it, you should use js and ajax.

With jquery it could be like this:

//Your html
<input type="submit" value="Login" />        
<a id="reset-pw">Reset PW<a/>    


$(function () {
    $('#reset-pw').click(function () {
        $.ajax({
            url: @Url.Action("ResetPw","Account"),
            type: "GET", //Not sure that you use get
            data: $('form').serialize(),
            success: function (result) {
                alert('Rassword reset');
            }
        });
        return false;
    });
});

Getting Model content in ActionLink

3 Answers3