Adding a row on button click and saving the inserted data in the database

Question

I want to add a '+' symbol below the table that shows the content of a particular table enabling the user to add another row of data to the table. I want the data to be saved in the database.

I tried integrating my two current views together but it doesn't work.

Here is my View for viewing the table. Here is the place where I want the '+' Symbol to add new values.

@model IEnumerable<TCImplementation.Models.TCSet>
<table class="table">
  <tr>
    <th>@Html.DisplayNameFor(model => model.ValueName)</th>
    <th>@Html.DisplayNameFor(model => model.DataFormat.FormatName)</th>
    <th>@Html.DisplayNameFor(model => model.TC.TCName)</th>
    <th>@Html.DisplayNameFor(model => model.DataUsage)</th>
    <th>@Html.DisplayNameFor(model => model.DataStatus)</th>
    <th></th>
  </tr>
  @foreach (var item in Model) {
    <tr>
      <td>@Html.DisplayFor(modelItem => item.ValueName)</td>
      <td>@Html.DisplayFor(modelItem => item.DataUsage)</td>
      <td>@Html.DisplayFor(modelItem => item.TC.TCName)</td>
      <td>@Html.DisplayFor(modelItem => item.DataFormat.FormatName)</td> 
      <td>@Html.DisplayFor(modelItem => item.DataStatus)</td>
      <td>
        @Html.ActionLink("Edit", "Edit", new { id=item.TCSetID }) |
        @Html.ActionLink("Details", "Details", new { id=item.TCSetID }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.TCSetID })
     </td>
    </tr>
  }
</table>
@Html.ActionLink("Create New", "Create", new {id = ViewBag.id })

In the Html.ActionLink() I want to pass the id of the parent table. My create function takes parent id as a parameter. But ViewBag.id doesn't help as well.

What is the work around for my task?

EDIT 1

Addition of the Create View

@model TCImplementation.Models.TCSet
@using (Html.BeginForm()) 
{
  @Html.AntiForgeryToken()
  @Html.ValidationSummary(true, "", new { @class = "text-danger" })

  @Html.LabelFor(model => model.ValueName, htmlAttributes: new { @class = "control-label col-md-2" })
  @Html.EditorFor(model => model.ValueName, new { htmlAttributes = new { @class = "form-control" } })
  @Html.ValidationMessageFor(model => model.ValueName, "", new { @class = "text-danger" })

  @Html.LabelFor(model => model.DataUsage, htmlAttributes: new { @class = "control-label col-md-2" })
  @Html.EnumDropDownListFor(model => model.DataUsage, htmlAttributes: new { @class = "form-control" })
  @Html.ValidationMessageFor(model => model.DataUsage, "", new { @class = "text-danger" })

  @Html.LabelFor(model => model.DataStatus, htmlAttributes: new { @class = "control-label col-md-2" })
  @Html.EnumDropDownListFor(model => model.DataStatus, htmlAttributes: new { @class = "form-control" })
  @Html.ValidationMessageFor(model => model.DataStatus, "", new { @class = "text-danger" })

  @Html.LabelFor(model => model.TCID, "TCID", htmlAttributes: new { @class = "control-label col-md-2" })
  @Html.DropDownList("TCID", null, htmlAttributes: new { @class = "form-control" })
  @Html.ValidationMessageFor(model => model.TCID, "", new { @class = "text-danger" })

  @Html.LabelFor(model => model.DataFormatID, "DataFormatID", htmlAttributes: new { @class = "control-label col-md-2" })
  @Html.DropDownList("DataFormatID", null, htmlAttributes: new { @class = "form-control" })
  @Html.ValidationMessageFor(model => model.DataFormatID, "", new { @class = "text-danger" })

  <input type="submit" value="Create" class="btn btn-default" />
}
@Html.ActionLink("Back to List", "Index")

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
}

EDIT 2 : Adding Create Action method

    public ActionResult Create(int id)
    {
        ViewBag.id = id;
        ViewBag.DataFormatID = new SelectList(db.DataFormat, "DataFormatID", "FormatName");
        ViewBag.TCID = new SelectList(db.TC, "TCID", "TCName",id);
        return View();
    }

EDIT 3 - Adding model classes

public class TC
{
    public int TCID { get; set; }
    public string TCName { get; set; }
    public virtual ICollection<TCSet> TCSets { get; set; }

}



public class TCSet
{
    public int TCSetID { get; set; }
    public string ValueName { get; set; }
  //  public string DataFormat { get; set; }
    public DataUsage DataUsage { get; set; }
    public DataStatus DataStatus { get; set; }
    public int TCID { get; set; }
    public int DataFormatID { get; set; }
    public virtual TC TC { get; set; }
    public virtual DataFormat DataFormat { get; set; }
}

EDIT 4: ViewTCSet for a particular TCID

    public ActionResult ViewTCSet(int ?id)
    {
        var viewmodel = new TC_TCSet();

        if(id!=null)
        {
            ViewBag.TCID = id.Value;
            var tcSet = db.TC.Include(x => x.TCSets).FirstOrDefault(x => x.TCID == id);
            if(tcSet!=null)
            {
                viewmodel.TCSet = tcSet.TCSets;
            }
        }
        return View(viewmodel);
    }

View for ViewTCSet

@model TCImplementation.ViewModels.TC_TCSet
@{
ViewBag.Title = "ViewTCSet";
}
<table>
<tr>
    <th>Tc Set Name</th>
    <th>Data Usage</th>
    <th>Data Status</th>
    <th>Data Format</th>

</tr>
@foreach(var item in Model.TCSet)
{
    <tr>
        <td>@item.ValueName</td>
        <td>@item.DataUsage</td>
        <td>@item.DataStatus</td>
        <td>@item.DataFormat.FormatName</td>
        <td>@Html.ActionLink("Edit", "Edit", "TCSets", new { id= item.TCSetID},null) | @Html.ActionLink("Details", "Details", "TCSets", new { id = item.TCSetID }, null) | @Html.ActionLink("Delete", "Delete", "TCSets", new { id = item.TCSetID }, null)</td>
    </tr>
}
</table>
@Html.ActionLink("Create", "Create", "TCSets", new { id = Model.TCSet }, null)

In this actionlink I am unable to pass the value Model.TCSet.TCID