ajax - Correct method to submit complex data from EditorTemplates in MVC5 -

i'm working on userprofile editor , i'm using editortemplates this, can't figure out right way submit data complex objects using method. don't know if have right views or not, , how roll complex object partial views. simplify, pare down bit, userprofile has many sub-objects representing user preferences.

create table [dbo].[userprofile] (     [userprofileid]     int           identity (1, 1) not null,     [nickname]          varchar (max) not null,     [thumbnailimageid]  int           null, ); 

in entities, have navigation objects point thumbnailimage object, in editortemplate (for userprofile) can this:

<div class="form-group">     @html.labelfor(model => model.nickname, htmlattributes: new { @class = "control-label col-md-2" })     @html.editorfor(model => model.nickname, new { htmlattributes = new { @class = "form-control" } }) </div>  <div class="form-group">     @html.labelfor(model => model.thumbnailimage, "thumbnailimage", htmlattributes: new { @class = "control-label col-md-2" })     @html.editorfor(model => model.thumbnailimage, new { @class = "form-control" }) </div> 

note second editorfor thumbnailimage object, not id. have editortemplate object, i'm not sure best way code up. know how these, i'm looking way pick. if there "best practice" this, please let me know.

option 1 - "manually" roll top-level object in userprofile view. option have ajax call in userprofile view, submits entire object, including thumbnailimageid grab thumbnailimage editor jquery using prefix html element ids. so, submit button live in userprofile editortemplate, , action this... (except url , element ids generated)

var nickname = $('#mynicknameid').val(); var thumbnailimageid = $('#imageeditorid').val(); $.ajax({      url: '/account/userprofile',      contenttype: 'application/html; charset=utf-8',      data: {         userprofileid: idval,          nickname: nickname,         thumbnailimageid: thumbnailimageid       }  }); 

option 2 - edit sub-objects immediately , don't submit them in top-level view. in option, thumbnailimage editor update database using ajax, saving image data itself, , updating parent object id (if changed). way, when user submits top-level userprofile editor, submit nickname, , updates sub-objects have been completed. option smooth ui reasons, make option 1 appear smooth user well.

option 3 - away editortemplates sub-objects (thumbnailimage) , edit them in parent (userprofile) view - means have repetitive code in views though, because other things have thumbnailimage objects, not user profile. having entire object in 1 view little simpler, don't see advantage in (but, it's @ work, don't use model binding)

how figure out option go with, or there better option i'm not considering?

currently i'm doing option 1. works it's lot of code , not re-usable.

i have no idea how setup works neither understand c# stuff. here standard practice made popular erlang actors in use object oriented design, akka framework of scala, multiple components of ember.js etc.

imagine data centric tree. there root node. each node has children , 1 parent.

now imagine tree of objects. there root object called supervisor. each node has children called workers , 1 parent called supervisor. each node supervises of children.

supervision defined making sure supervised actor or in more general terms object in acceptable state. can requests, process them , reply back. example on exception, supervisor may choose reinitialize supervised actor.

in such system root gets abstract message, getcredentials, , in charge of building workers, splitting task , keep track of local state.

naturally root creates form. form being child of root creates 2 actors in charge of handling <input> tags , 1 in charge of sending submit.

when submit actor tells parent, form, should submit. form asks each input value, builds dict/hash out of , replies root data.

now root in charge of sending data server. way logic, data, state , behaviour stays in local place possible.