MVC4 Creating Register pages using one Model - ajax

Question

I don't really have a good example for this mostly because I'm just winging it and so far, my code is just a jumbled up mish-mash of gobble-dee-gook. I'm at a loss and need some help or advice on this one. Here's what I need:
I am creating a mock register form meant for learning purposes only. I used a job application form as my example. One page has the applicant's personal info such as first and last name, age, gender, and level of education. The second page allows them to choose which position they wish to apply for and allows them to provide a list of skills. I have a single model set up to take the data and save it to a database. The first page will have an ajax next button that replaces the first page form with the second page form. The second page has two buttons, Back and Submit (simple enough) that are also ajax-y. My issue right now is getting the data from both forms to save to a single entry in the model. Does anyone have a simple example or a link I could look into for this kind of situation? Or maybe even another way of going about this? It would be greatly 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 is a helper Method, get's values for a 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" />
}

Answer 1

Okay I'll try to make this as short as possible. So assuming you already know how to switch between forms, as I know you do based on your question, and you have forms like these:
<form id="form1">
#Html.EditorFor(model => model.First)
// rest of the fields goes here
</form>
<form id="form2">
#Html.EditorFor(model => model.Position)
// rest of the fields goes here
<button id="submitAll">Submit</button>
</form>
That assumes that you have the buttons to switch back and forth the views. The submitAll button triggers the postback action to a controller method and pass the value like this:
function submitAllFields() {
var o = {
// list properties here similar to your model property name
// and assign values to them
First: $("#First").val(),
Position: $("#Position").val()
};
$.post('#Url.Action("apply2")', { app: o }, function(result) {
// do something here
});
}
You then need one method to accept all the inputs:
[HttpPost]
public PartialViewResult Apply2(Application app)
{
if (ModelState.IsValid)
{
db.Entry(app).State = EntityState.Modified;
db.SaveChanges();
ModelState.Clear();
return PartialView("_Success");
}
// do something here
}