使用相同模型的MVC4动态视图

Question

I am trying to create a page that can edit the properties of an item, for example Employees

public class Employee
{
    //user information
    public int ID { get; set; }

    [Required(ErrorMessage = "First Name is required")]
    [MaxLength(20)]
    public string FirstName { get; set; }

    [Required(ErrorMessage = "Last Name is required")]
    [MaxLength(10)]
    public string LastName { get; set; }

    [Required(ErrorMessage = "Hometown is required")]
    [MaxLength(10)]
    public string HomeTown { get; set; }

    //optional
    public string SpouseName { get; set; }
    public string KidNameOne { get; set; }
    public string KidNameTwo { get; set; }

    //your information
    [Required(ErrorMessage = "Your name is required")]
    [MaxLength(20)]
    public string YourName { get; set; }

    [Required(ErrorMessage = "Your address is required")]
    [MaxLength(100)]
    public string YourAddress { get; set; }

}

Now I know how to create a view or controller to edit the employee.
But now I want to simplify the page by separating the optional information with the absolute necessary information.
For example on top of the page have a dropdownlist which has the option of Necessary information and optional information.
If I select necessary information only firstname lastname and hometown will get displayed for users to edit or view.
If I select optional everything else will display (excluding the necessary ones).

I thought of partial view but not sure if it would be any use. I just need a direction of how to achieve that. Because I have never done anything that has anything to do with dynamic view with razor code in MVC.

I need suggestions on how do I approach this issue.

Answer 1

So the user should be able to choose whether he wants to see the optional fields? That should probably be handled by client-side JavaScript, not something MVC-specific.

Here is a simple "expander"-like solution using jQuery:

<ul>
    <li>
        @Html.LabelFor(m => m.FirstName)
        @Html.TextBoxFor(m => m.FirstName)
    </li>
    <li>
        @Html.LabelFor(m => m.LastName)
        @Html.TextBoxFor(m => m.LastName)
    </li>
    ...
</ul>

<a href="#" onclick="toggleOptional()" >Optional info..</a>
<ul id="optional" >
    <li>
        @Html.LabelFor(m => m.KidNameOne)
        @Html.TextBoxFor(m => m.KidNameOne)
    </li>
    <li>
        @Html.LabelFor(m => m.KidNameTwo)
        @Html.TextBoxFor(m => m.KidNameTwo)
    </li>
    ...
</ul>

<script type="text/javascript" >
    function toggleOptional() {
        $('#optional').toggle();
    }

    //Runs on jQuery.ready:
    $(function () {
        $('#optional').hide();
    });
</script>

jsfiddle