MVC 5-当对象是页面视图模型的属性时，如何将对象映射到Action？

Question

I have a login view model defined as such.

public class LoginViewModel
{
    [Required]
    public String Username { get; set; }

    [Required]
    [DataType(DataType.Password)]
    public String Password { get; set; }


    /// <summary>
    /// The default constructor.
    /// </summary>
    public LoginViewModel()
    {

    }
}

And my master page takes a base view model defined as:

public abstract class CommonViewModel
{
    #region Properties
    public LoginViewModel LoginModel { get; set; }                
    #endregion

    #region Functions

    /// <summary>
    /// The default constructor.
    /// </summary>
    public CommonViewModel()
    {

    }

    #endregion
}

In master layout I have a login form . This form is laid out as such.

<form id="login-form" method="post" action="@Url.Action("Login", "Account")">
    <div class="form-element">                            
        @Html.LabelFor(m => m.LoginModel.Username, Resources.MasterPageStrings.LoginUsername, new { @class = "login-form-label" })                            
        @Html.TextBoxFor(m => m.LoginModel.Username, new
        {
            @class = "login-form-input login-form-input-common required",
            @autofocus = String.Empty,
            @placeholder = Resources.MasterPageStrings.LoginUsername
        })
    </div>
    <div class="form-element">
        @Html.LabelFor(m => m.LoginModel.Password, Resources.MasterPageStrings.LoginPassword, new { @class = "login-form-label" })
        @Html.TextBoxFor(m => m.LoginModel.Password, new
        {
            @class = "login-form-input login-form-input-common required",
            @placeholder = Resources.MasterPageStrings.LoginPassword,
            @type = "password"
        })
    </div>
    <div class="form-element">
        @Html.LabelFor(m => m.LoginModel.RememberMe, Resources.MasterPageStrings.LoginRememberMe, new { @class = "login-form-label" })
        @Html.CheckBoxFor(m => m.LoginModel.RememberMe, new
        {
            @class = "login-form-input login-form-input-common",
            @placeholder = Resources.MasterPageStrings.LoginRememberMe
        })
    </div>
    <div class="form-element">
        <input type="submit" class="login-form-submit login-form-input-common" value="@Resources.MasterPageStrings.LoginLoginLabel">
    </div>
</form>

When I submit to the account controller, I don't have the login view model mapped.

/// <summary>
/// Logs the user into the application.
/// </summary>
/// <param name="model">The login view model uses to login.</param>        
/// <returns>The view you were trying to get to.</returns>
[HttpPost]
[AllowAnonymous]
[Route("Login")]
public async Task<ActionResult> Login(Models.ViewModels.Common.LoginViewModel model)
{

}

The view model is always the default empty values of null for username and password. How can I get the login model to map in the account controller login action?

I can't map to the common view model as I get an error that I can't instantiate an abstract class.

Answer 1

the reason why you are receiving null is because you are sending the data based on the model of the view which is CommonViewModel , if you take a property

@Html.TextBoxFor(m => m.LoginModel.Password, new
                            {
                                @class = "login-form-input login-form-input-common required",
                                @placeholder = Resources.MasterPageStrings.LoginPassword,
                                @type = "password"
                            })

and if you see the rendered html the name will be LoginModel.Password but in the action you are trying to get LoginViewModel which has no property LoginModel.Password

so your action should be

[HttpPost]
[AllowAnonymous]
[Route("Login")]
public async Task<ActionResult> Login(CommonViewModel model)
{
 var loginmodel= model.LoginModel; //here you can access the properties like loginmodel.Password
}

Update

another solution is to name the Html Helpers same as the name of properties of LoginViewModel so your view will be

<form id="login-form" method="post" action="@Url.Action("Login", "Account")">
    <div class="form-element">                            
        @Html.Label("Username", Resources.MasterPageStrings.LoginUsername, new { @class = "login-form-label" })                            
        @Html.TextBox("Username", new
        {
            @class = "login-form-input login-form-input-common required",
            @autofocus = String.Empty,
            @placeholder = Resources.MasterPageStrings.LoginUsername
        })
    </div>
    <div class="form-element">
        @Html.Label("Password", Resources.MasterPageStrings.LoginPassword, new { @class = "login-form-label" })
        @Html.TextBox("Password", new
        {
            @class = "login-form-input login-form-input-common required",
            @placeholder = Resources.MasterPageStrings.LoginPassword,
            @type = "password"
        })
    </div>
    <div class="form-element">
        @Html.Label("RememberMe", Resources.MasterPageStrings.LoginRememberMe, new { @class = "login-form-label" })
        @Html.CheckBox("RememberMe", new
        {
            @class = "login-form-input login-form-input-common",
            @placeholder = Resources.MasterPageStrings.LoginRememberMe
        })
    </div>
    <div class="form-element">
        <input type="submit" class="login-form-submit login-form-input-common" value="@Resources.MasterPageStrings.LoginLoginLabel">
    </div>
</form>

and your action will be

[HttpPost]
[AllowAnonymous]
[Route("Login")]
public async Task<ActionResult> Login(Models.ViewModels.Common.LoginViewModel model)
{

}

Answer 2

Try to change your Login action so that it takes a CommonViewModel instead of a LoginViewModel.

Or better pratice, separate the code for the view into a partial view, set model of that view to LoginViewModel and render the partial like this :

@Html.RenderPartial("_LoginView", Model.LoginModel )

(assuming that the model type on your base view is CommonViewModel)

Answer 3

Partial View was made for this kind of situation. Create a partial view and paste your login HTML. Keep the model of partial view as LoginViewModel and render it in the master page. That's it!