ASP.NET MVC: How do I validate a model wrapped in a ViewModel?

For the login page of my website I would like to list the latest news for my site and also display a few fields to let the user log in. So I figured I should make a login view model - I call this LoginVM.

LoginVM contains a Login model for the login fields and a List<NewsItem> for the news listing.

This is the Login model:

public class Login
{

    [Required(ErrorMessage="Enter a username.")]
    [DisplayName("Username")]
    public string Username { get; set; }

    [Required(ErrorMessage="Enter a password.")]
    [DataType(DataType.Password)]
    [DisplayName("Password")]
    public string Password { get; set; }

}

This is the LoginVM view model:

public class LoginVM
{
    public Login login { get; set; }
    public List<NewsItem> newsItems { get; set; }
}

This is where I get stuck. In my login controller, I get passed a LoginVM.

[HttpPost]
public ActionResult Login(LoginVM model, FormCollection form)
{
    if (ModelState.IsValid)
    {
        // What?

In the code I'm checking whether ModelState is valid and this would work fine if the view model was actually the Login model, but now it's LoginVM which has no validation attributes at all.

How do I make LoginVM "traverse" through its members to validate them all? Am I doing something fundamentally wrong using ModelState in this manner?

In your ViewModel try doing this:

public class LoginVM
{
    [Required]
    public Login login { get; set; }
    public List<NewsItem> newsItems { get; set; }
}

Alternatively if the newsItems are for display purposes, and don't need validating, then you can pass through just the Login model to your action method.

[HttpPost]
public ActionResult Login([Bind(Prefix = "Login")]Login model)
{
    if (!Model.IsValid)
}

You will also want to use the EditFor and LabelFor helpers in your View.

<%= Html.TextBoxFor(m => m.Login.Username) %>

i'd like give you a modal solution:

 @if (Request.IsAuthenticated)

              {
                  <li class="span3">
                      <a href="Home/AboutMe" role="button" class="btn" data-toggle="modal">[@Membership.GetUser().UserName]</a>
                      </li>
                      <li>@Html.ActionLink("logoff","LogOff","Account")</li>
                 }
              else
              {
                   <li class="span3">
                      <a href="#myModal" id="Login" role="button" class="btn" data-toggle="modal" >Login</a>
                   </li>
              }

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel"> Login </h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="control-group">
                                <label class="control-label" for="inputEmail">Email</label>
                                <div class="controls">
                                    <input type="text" id="inputEmail" placeholder="Email">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputPassword">Password</label>
                                <div class="controls">

                                    <input type="password" id="inputPassword" placeholder="Password">
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                    <label class="checkbox">
                                        <input type="checkbox">
                                        Remember me
                                    </label>
                                    <button type="submit" class="btn">Sign in</button>
                                </div>
                            </div>
                        </form>
                    </div>