Question

I have an ASP.NET MVC 3.0 application.
Inside the application, I have a Login View which is strongly typed via a LoginViewModel class. In addition, the Login View can be accessed by two different types of people Employees and Management.

The view is displayed in a < table >. The user must first select (from 2 radio buttons) what type of user he is (Employee or Management) and from the selection, I change the UI and display (show/hide) certain divs.

If Employee is selected, I ask for the Employee Number and Password.

If Management is selected, I ask for the UserCode and Password.

The LoginViewModel has 4 properties:

• –UserType (represents the selected radio button)
• –EmployeeNumber (represents the textbox for Employees)
• –UserCode (represents the textbox for Management)
• –Password (represents the textbox for the Password regardless of who is selected)

Since the UI changes according to the selected radio button, I can not use the [Required] attribute on both EmployeeNumber and UserCode properties because if I do, the < form > won’t submit (since one of the fields will be hidden).

To overcome this limitation/problem, I have to remove the [Required] attribute on both properties and presumably do this client side.

For the record, I am not using MicrosoftMVCValidation.js but instead jquery.validate.min.js and jquery.validate.unobtrusive.js

Question 1)

When searching for examples online I’ve seen many of them including this file:

jquery.unobtrusive-ajax.min.js

What’s the purpose of this file and what’s its correlation with client side validation (if any)?
Do I really need it? Shouldn’t jquery.validate.min.js and jquery.validate.unobtrusive.js suffice?

Question 2)

I understand that one could write a custom Validation Attribute and place it on the EmployeeNumber or UserCode property but if I do so (and knowing that I will be hiding one of them in the UI) how do I prevent myself from getting the same issue I had with the [Required] attribute? (meaning not being able to submit the form because one is hidden)

Can I simply do this directly in the View? Would anyone be so kind to show me a quick example?

Thanks

Oh and yes…the jquery-1.7.1.min.js is included in the master layout (in case anyone asks).

Answer 1

To answer your first question, jquery.unobtrusive-ajax.min.js is not for unobtrusive validation. It is for using the @Ajax html helper (@Ajax.Form, etc).

To answer your second question, I would actually create 2 totally different viewmodels and corresponding forms for this. When user selects with radio button, show the correct form. That means, don’t combine Employee and Management into the same LoginViewModel. You can then treat validation, as well as other view logic, separately between the two.

Update

To answer your question about strong typing, you would create 2 different (partial) views. One would have @model EmployeeLoginViewModel and the other would have @model ManagementLoginViewModel. To render them on a a single page, there are a few different approaches. You can have a single LoginViewModel that contains an instance each of ManagementLoginViewModel and EmployeeLoginViewModel, and then use @Html.EditorFor(m => m.Employee) and @Html.EditorFor(m => m.Management). However this approach only works if your partial views are in the EditorTemplates folder.

Another approach is to use @Html.Action(), and have 2 different controller action methods to return the partial views.