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

See more:

HTML

C#5.0

Razor

MVC5

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


<pre lang="c#">        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`