MVC editing complex object stored in hidden fields

Question

Let's say I have a very huge model that contains lists and even those lists can have objects that contain other lists. I want to create an edit form for that in MVC4 (or 5) without AJAX.

So I figured that the first part of that is to store the entire object on the client side in hidden fields. List binding works like a charm, see http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/. Now the complete roundtrip is working, I can push out the entire object to the client in bound hidden fields, it gets back to me upon submit and the posted hidden fields are put into the complex object, nested lists and everything included.

Lists or other objects should become editable based on some action. One scenario is where a single object or list items are displayed as non-editable, and when the user clicks it, it becomes editable in-place, so for example the cells in a grid become textboxes. Another scenario is where a single object or list items are not shown at all, and when the user clicks a button, a popup window appears with the text input fields.

Is there a library or a proven way to do this?

Answer 1

Is there a library or a proven way to do this?

Exactly what for? Displaying a massive model in view for editing? Making a grid editable? Or popping up the records of a grid for editing?

Basically, I think you are overcomplicating this matter a bit. If you apply some separation of concerns here you will find out how easy everything becomes and in fact it's super easy to implement and most importantly much easier to maintain and scale.

Starting from the model, let's assume you've got this all-mighty massive model named Company with the following properties:

• CompanyID (int)
• CompanyName (string)
• CompanyLegalID (string)
• CompanyRegistrationNumber (string)
• ContactInfo (ContactInfo class)
• HeadQuaterAddress ('Address` class)
• Branches (List of Branch classes)
• Employees (List of Employee classes)

And the list of properties could go on and on forever.It would be easier, super easier to break down this model into smaller models. Make a CompanyModel model with the following properties...

• CompanyID (int)
• CompanyName (string)
• CompanyLegalID (string)
• CompanyRegistrationNumber (string)

Then make a CompanyContactInfo model and so on. Getting the idea? Again, separation of concerns simplifies matters a lot. Then, create action methods and views to read/edit these models.

Now for lists properties of the massive object you'd like to do the same. For example, for the list of Employee objects it'd be easier to create a CompanyEmployeesModel model with the following properties:

• CompanyId (int)
• Employees (List of EmployeeModel classes)

Then create a controller action method to show the list of employees...

public ActionResult EmployeeList(int companyId)
{
    var employees = BusinessLogic.Get_Me_Employees_For(companyId);
    CompanyEmployeesModel model = new CompanyEmployeesModel();
    model.CompanyId = companyId;
    model.Employees = employees;

    return View(model);
}

Hope you are getting the idea so far. In the view simply create a css-formatted table to show the employee list, razor makes it super simple...

<table class="grid">
   <tr>
      <th></th>
        <th>
            Name
         </th>
         <th>
            Phone
          </th>
    </tr>

            @{
                 var alt = false;

                foreach (var emp in Model.Employees)
                {                    
                    <tr class="@(alt ? "alt" : string.Empty)">
                        <td class="cmd">
                            @ActionLink("edit", "Edit", "Employees", new { empId = emp.Id}, null)
                        </td>
                        <td>@emp.Name</td>
                        <td>@emp.Phone</td>
                    </tr>

                    alt = !alt;
                }

            }
</table>

Notice that the first column of the table has link "edit" that takes the user to the Edit action method of the Employee controller where obviously you will do exactly the same you've been doing with smaller models. All I'm doing is separating the logic, models, view and making them simpler, easier to maintain and easier to understand.

Hope it all makes sense to you

Answer 2

Jeditable http://www.appelsiini.net/projects/jeditable which does the same thing and is easier to implement