登录失败后将用户名传递回MVC视图/文本框

Question

On an unsuccessful login, I'd like to retain the username field. I've got an ViewModel object called "user" that contains the string Username

public class User
{
   public bool RememberMe { get; set; }
   public string Username { get; set; }
}

That information is passed up to the controller method via

login( User user )
{
    … validate user
    if (!valid)
    {
        ModelState.AddModelError("", "Login name or password is incorrect!");
        return View(user);  
    }
}

I validated that the username does exist in the user object being passed back to the view.

Now in the view I have this:

@model Myapp.Models.User

<label class="form-label" for="form-signin-username">Username</label>
<input data-bind="value: loginViewModel.Username" class="form-control" id="form-signin-username" name="username" type="text" required="" placeholder="Username">

The javascript is this:

var LoginViewModel = function () {
    self.UserName = ko.observable();
    self.Password = ko.observable();
    self.Authenticate = function (event) {
        var data = {
            UserName: self.UserName(),
            Password: self.Password()
        }
        xhr = $.ajax({
            data: data,
            dataType: 'JSON',
            type: "POST",
            url: "/Home/Login",
            success: function (data) {
            if (data.Success) {
            // process successful login ( this works)
            }
            else
            {
                // this is what doesn't work
                self.UserName = data.Username;  
            }
        }
    }
}

Can anyone see why that textbox doesn't autofill with the previous username?

Answer 1

You would need to make sure the desired model values are assigned to the view model

For example

var LoginViewModel = function () {
    self.UserName = ko.observable(@(Model.Username)); //set initial value
    //...

I would also suggest using the HtmlHelper for the inputs in the view

@model Myapp.Models.User

<!--...-->

@Html.LabelFor(m => m.Username, "Username")
@Html.TextBoxFor(m => m.Username, new { data_bind = "value: Username", @class = "form-control", placeholder="Username"})