There are two ways I can think of for achieving what you want:
- If the number of child records that you want is limited then you can achieve this without the use of any
JavaScript.
Example:
This example will only allow you to add 5 Levels per Pair. If you want you can just change the following code to increase the number of Levels
Levels = Enumerable.Range(1, 5).Select(i => new Levels()).ToList();
Model
public class Pair
{
public Pair()
{
Levels = Enumerable.Range(1, 5).Select(i => new Levels()).ToList();
}
....
}
public class Levels
{
....
}
Controller
[HttpGet]
public ActionResult ExampleParentChild()
{
return View(new Pair());
}
[HttpPost]
public ActionResult ExampleParentChild(Pair pair)
{
if (ModelState.IsValid)
{
context.Pairs.Add(pair);
context.SaveChanges();
return RedirectToAction("Index");
}
return View(pair);
}
View
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
@Html.LabelFor(m=> m.Date)
@Html.EditorFor(m=>m.Date)
@foreach(var item in Model.Levels)
{
@Html.LabelFor(m=> item.Value)
@Html.EditorFor(m=> item.Value)
@Html.LabelFor(m=> item.comment)
@Html.EditorFor(m=> item.comment)
}
<input type="submit" value="Create" />
}
- If you want the number of child records to be dynamic then you will have to use
JavaScript to be able to add more input elements to the page on the run. You can either use jQuery or AngularJS. I am providing you an example with the use of AngularJS and WEB API, the reason I am providing you an example with AngularJs is that you asked to do it in a single page and everyone uses AngularJS nowadays for SPAs.
Example:
AngularController
angular.module('Pair', [])
.controller('PairController', PairController);
function AccountController($http) {
vm.Pair = {};
vm.Pair.Levels = []
vm.addLevel = function(){
if (vm.Pair.Levels)
{
vm.Pair.Levels.push({});
}
};
vm.savePair = function () {
$http.post('/api/PairsApi/', vm.Pair).success(function (data) {
vm.Pair = {};
}).error(function (data) {
// code for error
});
};
};
WEBAPI
[Route("api/PairApi/{id?}", Name = "api_PairApi")]
public class PairLedgersApiController : ApiBaseController
{
DbContext _db = new DbContext();
public IHttpActionResult PostPairLedger(Pair pair)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
_db.Pairs.Add(pair);
_db.Save();
return CreatedAtRoute("api_PairApi", new { id = pair.Id }, Pair);
}
.....
}
View
<div data-ng-app="Pair" data-ng-controller="PairController as vm">
<form name="PairForm" ng-submit="vm.savePair()" novalidate>
<div class="form-body">
<label>Name</label>
<input type="text" name="pairName" ng-model="vm.Pair.name " class="form-control"/>
<label>Date</label>
<input type="date" name="pairDate" ng-model="vm.Pair.Date" value="{{vm.Pair.Date | date: 'yyyy-MM-dd'}}" class="form-control"/>
<div ng-repeat="level in vm.Pair.Levels">
<label>Value</label>
<input type="text" name="levelValue" ng-model="level.value" class="form-control"/>
<label>Comment</label>
<input type="text" name="levelComment" ng-model="level.comment" class="form-control"/>
</div>
<input type="submit" value="Save" class="btn blue" />
<button ng-click="vm.addLevel();" class="btn blue">
Add Level
</button>
</div>
</form>
</div>
If you are new to AngularJS, you can refer to the following links for using it with ASP .NET MVC:
Build a Single Page Application (SPA) with ASP.NET Web API and Angular.js
CRUD with SPA, ASP.NET Web API and Angular.js
