MVC 复杂模型绑定到列表<T>

Question

I am a new noob at c# MVC and I would really like some help if possible or if someone could kindly point me in the right direction. I have spent hours and hours looking for a solution online and I am yet to find anything helpful which is why I am posting here.

I am working on creating an employee database web application for my company and I have for example the following classes.

namespace my_app.Models.Employee
{
    public class Employee
    {

        public Employee()
        {
        }

        // id
        public int id { get; set; }

        // employee id/payroll no
        public string Employeeid { get; set; }

        // employee qualifications
        public IList<EmployeeQualification> EmployeeQualifications { get; set; }
    }
}


    namespace my_app.Models.Employee
    {
    public class EmployeeQualification
        {
            public EmployeeQualification()
            {
            }

            // employee Qualification id
            [Key]
            [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
            public int Id { get; set; }

            // employee Qualification institution

            public string Institution { get; set; }

            // employee Qualification qualificaiton

            public string Qualification { get; set; }

            public IList<Employee> Employees { get; set; }

        }
    }

The employee is being added to an EmployeeViewModel which looks something like this:

namespace my_app.ViewModels
{
    public class EmployeeViewModel
    {

        public Employee Employee { get; set; }

        // more stuff here
    }
}

Now the problem I have and that I need help with is I would like to display the employee (ie Name, Address etc) in a view but also be able to list out the employee's qualifications with the ability to add and delete qualifications.

I have seen lots of tutorials out on the web of how to do this via AJAX and Entity framework SaveChanges method and i am sure that will work but the slightly complicated part with what i want to do is that i would like for the changes to remain on the client and only when the whole form including any changes to the employee object is submitted then the changes are persisted to the database.

Is there any way to do this with standard mvc controls or do i have to write a ton of JavaScript to save the changes to a local array of objects and then on the form submit append the additional form data.

I did write a whole bunch of jQuery to kind of get it to work but the issue is that I need to have this functionality on multiple views of the application and to have to write that much code each time does not seem smart.

Any help would be greatly appreciated, thanks.

Answer 1

Hope I can give you a direction to move forward.

Firstly, you need to change your Models design. Basically, 1 employee can have many qualifications and 1 qualification can owned by many employees. So you have many-to-many relationship here. Which means you need 3 models (Employee, EmployeeQualification, Qualification). The 2nd model will hold foreign keys to employee and qualification.

Next thing is UI, you want to keep all changes in UI before doing only 1 submit to persist data. That's actually a very good idea in term of user friendly system design. To do this, you just need to maintain a list of SelectedQualificationIds. Then keep that list in a hidden field, so after submitting, you can just load all qualitifications from DB, compare with the list, and remove/add qualification accordingly.