Render ViewModel errors on View if ModelState is not valid

Question

I have a form like following in my MVC application:

 @using (Html.BeginForm("Register", "User", FormMethod.Post))
    {
        <div>
            @Html.TextBoxFor(m => m.FirstName, new { placeholder = "First name", @class = "form-control", @type = "text" })
        </div>
        <div>
            @Html.TextBoxFor(m => m.LastName, new { placeholder = "Last name", @class = "form-control", @type = "text" })
        </div>
        <div>
            @Html.TextBoxFor(m => m.Email, new { placeholder = "Email", @class = "form-control", @type = "email" })
        </div>
        <div>
            @Html.TextBoxFor(m => m.Password, new { placeholder = "Password", @class = "form-control", @type = "password" })
        </div>
        <div>
            @Html.TextBoxFor(m => m.PasswordConfirm, new { placeholder = "Confirm password", @class = "form-control", @type = "password" })
        </div>
        <div>
            @Html.DropDownListFor(model => model.SelectedCountryId, Model.Countries, new { @class="select2_single form-control select2-hidden-accessible", @tabindex = "-1" })
        </div>
        <div>
            <input class="btn btn-default submit" type="submit" value="Register" />
        </div>
    }

My ViewModel looks like following:

public class UserRegistrationViewModel
{
    [Required(ErrorMessage = "First name is required!")]
    public string FirstName { get; set; }

    [Required(ErrorMessage = "Last name is required!")]
    public string LastName { get; set; }

    [Required(ErrorMessage = "Email name is required!")]
    public string Email { get; set; }

    [Required(ErrorMessage = "Password name is required!")]
    public string Password { get; set; }

    [Required(ErrorMessage = "Password confirmation name is required!")]
    public string PasswordConfirm { get; set; }
    public int SelectedCountryId { get; set; }

    [Required(ErrorMessage = "Country needs to be selected!")]
    public SelectList Countries { get; set; }
}

And these are my two actions:

public ActionResult Index()
{
    var model = new UserRegistrationViewModel();
    var countries = Connection.ctx.Countries.OrderBy(x => x.CountryName).ToList();
    model.Countries = new SelectList(countries, "CountryId", "CountryName");
    return View(model);
}
[HttpPost]

public ActionResult Register(UserRegistrationViewModel model)
{ 
    if (ModelState.IsValid)
    {
        var user = new Users();
        user.FirstName = model.FirstName;
        user.LastName =model.LastName;
        user.Email = model.Email;
        user.PasswordSalt = Helpers.PasswordHelper.CreateSalt(40);
        user.PasswordHash = Helpers.PasswordHelper.CreatePasswordHash(model.Password, user.PasswordSalt);
        user.CountryId = Convert.ToInt32(model.SelectedCountryId);
        user.Active = true;
        Connection.ctx.Users.Add(user);
        Connection.ctx.SaveChanges();
        var role = new UserRoles();
        role.RoleId = 2;
        role.UserId = user.UserId;
        role.Active = true;
        user.UserRoles.Add(role);
        Connection.ctx.SaveChanges();
        return RedirectToAction("Index");
    }
    return null;
}

Now my question here is what do I do if the model state is not valid (ie. display the error messages that I've set up in my ViewModel)???

Do I just do `return View(); or ??

I need to render those messages on my view now...

score 0 · Answer 1 · answered Oct 27 '16 at 14:54

Whenever I get an invalid form being submitted, I return the View() back for them to correct the issue. Taking them to an error page where they would have to come back to the form and start again would frustrate the user. Give them back the invalid form and tell them what needs correcting.

Now, what needs correcting can be read from the ViewBag(). Or you can have inside you Model some properties that will hold your error message for the user and display them if they are not null.

Valentin Sky · Answer 2 · 2016-10-28T08:33:49.753

0

In the case of an invalid model state, you can just return the current view with the model as a parameter:

if (!ModelState.IsValid)
{
    return View(model);
}

EDIT: In your html, add the html elements to show the validation messages:

@Html.ValidationMessageFor(model => model.FirstName)

edited Oct 28 '16 at 08:33

answered Oct 27 '16 at 14:56

Valentin Sky

132
1
9

Yeah I hear you, but doesn't return Register(model); creates an endless loop ? Which is what it's doing right now essentially :D :D P.S. The Index action is the one that renders the registration view, not the Register action... – User987 Oct 27 '16 at 15:18
Its `return View(model);`, not `return Register(model);` – Oct 27 '16 at 21:33

Render ViewModel errors on View if ModelState is not valid

2 Answers2