ajax - MVC4 Creating Register pages using one Model -

i don't have example because i'm winging , far, code jumbled mish-mash of gobble-dee-gook. i'm @ loss , need or advice on one. here's need:

i creating mock register form meant learning purposes only. used job application form example. 1 page has applicant's personal info such first , last name, age, gender, , level of education. second page allows them choose position wish apply , allows them provide list of skills. have single model set take data , save database. first page have ajax next button replaces first page form second page form. second page has 2 buttons, back , submit (simple enough) ajax-y. issue right getting data both forms save single entry in model. have simple example or link kind of situation? or maybe way of going this? appreciated!! :)

model

public int id { get; set; }      [required(errormessage = "first name req")]     [display(name = "first name")]     public string first { get; set; }      [required(errormessage = "last name req")]     [display(name = "last name")]     public string last { get; set; }      [required(errormessage = "age req")]     [range(18, 75, errormessage = "age range of {1}-{2}")]     public int age { get; set; }      [required(errormessage = "please select gender")]     public string gender { get; set; }      [required(errormessage = "education level req")]     public string education { get; set; }      public string position { get; set; }      public string skills { get; set; } 

controller

[httpget]     public partialviewresult apply1()     {         var model = db.applications.find(id);         if (model != null)         {             return partialview("_apply1", model);         }         return partialview("_apply1");     }      [httppost]     public partialviewresult apply1(application app)     {         if (request.isajaxrequest())         {             if (db.applications.where(a => a.first.tolower() == app.first.tolower() && a.last.tolower() == app.last.tolower() && a.age == app.age && a.gender == app.gender && a.education == app.education).count() == 0)             {                 app.position = "x";                 db.applications.add(app);                 db.savechanges();             }             else             {                 app = db.applications.single(a => a.first.tolower() == app.first.tolower() && a.last.tolower() == app.last.tolower() && a.age == app.age && a.gender == app.gender && a.education == app.education);             }              poslist(); //this helper method, get's values dropdown list             id = app.id;             var model = db.applications.find(id);             return partialview("_apply2", model);         }          return partialview("_apply1", app);     }      [httpget]     public partialviewresult apply2()     {         var model = db.applications.find(id);         if (model != null)         {             return partialview("_apply2", model);         }         return partialview("_apply2");     }      [httppost]     public partialviewresult apply2(application app)     {           if (modelstate.isvalid)         {             db.entry(app).state = entitystate.modified;             db.savechanges();             modelstate.clear();             return partialview("_success");         }          poslist();         return partialview("_apply2", app);     } 

first view

@model siprac.models.application  @using (ajax.beginform("apply1", new ajaxoptions() { insertionmode = insertionmode.replace, updatetargetid = "appform" })) { @html.antiforgerytoken()  <div class="editor-label">     @html.labelfor(model => model.first) </div> <div class="editor-field">     @html.editorfor(model => model.first)     @html.validationmessagefor(model => model.first) </div> <div class="clear"></div>  <div class="editor-label">     @html.labelfor(model => model.last) </div> <div class="editor-field">     @html.editorfor(model => model.last)     @html.validationmessagefor(model => model.last) </div> <div class="clear">  <input class="btn" type="submit" value="next" /> } 

second view

@using (ajax.beginform("apply2", new ajaxoptions() { insertionmode = insertionmode.replace, updatetargetid = "appform" })) { @html.antiforgerytoken()  <div class="editor-label">     @html.labelfor(model => model.position) </div> <div class="editor-field">     @html.dropdownlistfor(model => model.position, (ienumerable<selectlistitem>)viewdata["selectpos"]) </div> <div class="clear"></div>  <input class="btn" type="submit" value="submit" /> } 

okay i'll try make short possible. assuming know how switch between forms, know based on question, , have forms these:

<form id="form1">     @html.editorfor(model => model.first)     // rest of fields goes here </form> <form id="form2">     @html.editorfor(model => model.position)     // rest of fields goes here     <button id="submitall">submit</button> </form> 

that assumes have buttons switch , forth views. submitall button triggers postback action controller method , pass value this:

function submitallfields() {     var o = {         // list properties here similar model property name         // , assign values them         first: $("#first").val(),         position: $("#position").val()     };     $.post('@url.action("apply2")', { app: o }, function(result) {         // here     }); } 

you need 1 method accept all inputs:

[httppost] public partialviewresult apply2(application app) {     if (modelstate.isvalid)     {         db.entry(app).state = entitystate.modified;         db.savechanges();         modelstate.clear();         return partialview("_success");     }     // here }