MVC4使用一個模型創建註冊頁面

Question

我沒有一個很好的例子，主要是因爲我只是對它進行了修改，到目前爲止，我的代碼只是一個混亂的gobble-dee-gook混雜的混亂。我很茫然，需要一些幫助或建議。這是我需要的：

我正在創建一個模擬註冊表格僅用於學習目的。作爲我的例子，我使用了工作申請表。一頁有申請人的個人信息，如姓名，年齡，性別和教育程度。第二頁允許他們選擇他們希望申請的職位，並允許他們提供技能列表。我有一個model設置爲將data和save設置爲database。第一頁將有一個ajax下一個按鈕用第二個頁面表單替換第一個頁面表單。第二頁有兩個按鈕，返回和提交（很簡單），也是ajax-y。我現在的問題是從兩個表單中獲取data以保存model中的一個entry。有沒有人有一個簡單的例子或鏈接，我可以研究這種情況？或者甚至可能還有其他方法來解決這個問題？這將不勝感激！！ :)

型號

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; } 

控制器

[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); 
    } 

首先查看

@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" /> 
} 

第二視圖

@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

好吧我會盡量縮短這一點。因此，假設你已經知道如何，形式之間切換，因爲我知道你根據你的問題，你必須形成這樣的：

<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> 

那假設你有按鍵來回切換的意見。該submitAll按鈕觸發回發動作控制器方法，並通過這樣的價值：

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 
    }); 
} 

然後，您需要一種方法來接受所有輸入：

[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 
}