ASP.Net mvc 5 - Save Parent and child records together

Question

I am just getting started with ASP.net mvc 5 and got stuck into one problem that I have explained below:

I have User and History models. And user can have more then one history.

User model:

public class User
{
    public int ID { get; set; }
    public string TicketType { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Gender { get; set; }

    public virtual ICollection<History> Histories { get; set; }
}

History model:

public class History
{
    public int ID { get; set; }
    public int Year { get; set; }
    public int Month { get; set; }
    public int Day { get; set; }

    public virtual User User { get; set; }
}

UserController:

public class UsersController : Controller
{
    private MyDbContext db = new MyDbContext();

    public ActionResult Create()
    {
        var user = new User();
        user.Histories = new List<History>();
        user.Histories.Add(new History { });
        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "ID,TicketType,FirstName,LastName")] User user)
    {
        if (ModelState.IsValid)
        {
            db.Users.Add(user);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(user);
    }
}

Here is my form:

Create.cshtml

@model MyApp.Models.User

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    @Html.Partial("_Form")

    <input type="submit" value="Create" class="btn btn-lg btn-success" />
}

_Form.cshtml: Just to remove duplication in both Create and Edit forms

        @model MyApp.Models.User
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.TicketType, htmlAttributes: new { @class = "control-label" })
            @Html.DropDownListFor(model => model.TicketType, new List<SelectListItem>
                    {
                        new SelectListItem() {Text = "OPD", Value="opd"},
                        new SelectListItem() {Text = "Emergency", Value="emergency"},
                    }, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.TicketType, "", new { @class = "text-danger" })
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
        </div>


        <!-- TODO: fix these form elements which are 
         related to History not User. I am not sure how to do that. 
         Also NOTE that, user fields are saving properly and 
         update is also working. -->


        <div class="form-group">
            <label class="control-label">Year</label>
            <input type="text" value="" class="form-control" />
        </div>

        <div class="form-group">
            <label class="control-label">Month</label>
            <input type="text" value="" class="form-control" />
        </div>

        <div class="form-group">
            <label class="control-label">Day</label>
            <input type="text" value="" class="form-control" />
        </div>

Answer 1

You Have First created ViewModel. The view model combine to user and history model below the code

Public class userviewmodel
{

     public string TicketType { get; set; }
     public string FirstName { get; set; }
     public string LastName { get; set; }
     public string Gender { get; set; }         
     public int Year { get; set; }
     public int Month { get; set; }
     public int Day { get; set; }

 }

second, your chtml view is modified :

set model userviewmodel

 @model MyApp.Models.Userviewmodel

Form design change code in year, month and day

  <Table>
    <thead> 
       <tr>
          <td>Year</td>
          <td>Month</td>
          <td>Day</td>
       </tr>
      </thead>
      <tbody id="tbodyval">
      </tbody>
    </table>


<div class="form-group">
        <label class="control-label">Year</label>
        @Html.EditorFor(model => model.Year, new { htmlAttributes = new { @class = "form-control" } })
 </div>

 <div class="form-group">
    <label class="control-label">Year</label>
    @Html.EditorFor(model => model.month, new { htmlAttributes = new { @class = "form-control" } })
 </div>

 <div class="form-group">
    <label class="control-label">Year</label>
    @Html.EditorFor(model => model.day, new { htmlAttributes = new { @class = "form-control" } })
  </div>
  <input type="button" value="add">

if the add button click create new Row in the table t body every inside textbox or HiddenField Vlaue Assied the current textbox value

For example jquery function

  $("#add").click(function(){
      string row="<tr><td><input type='text' value='$('#year').val(), 
       name='Yearlist'></td>
        <td><input type='text' value='$('#month').val(), name='monthlist'></td>
       <td><input type='text' value='$('#day').val(), name='daylist'></td>
          </tr>"
        $("#tbodyval").append(row);
    });

cahnge your code in controller:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create( Userviewmodel usermodel, string[] yearList,string[] monthList,string[] dayList())
{
    if (ModelState.IsValid)
    {

        user model=new user()
        model.TicketType=.usermodel.TicketType;
        model.FirstName=usermodel.FirstName;
        model.LastName=usermodel.LastName;
        model.Gender=usermodel.Gender;

       for(int i=0;i<yearlist.count();i++)
       {
         History child=new History()  

         child.Year=yearlist[i].Year;
         child.month=montList[i].month;
         chile.day=dayList[i].day;            
         model.Histories.add(child);  
       }                      

        db.Users.Add(model);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    return View(user);
}