public class PersonViewModel
{
public string Name { get; set; }
public string FatherName { get; set; }
}
public class PeopleViewModel
{
public List<PersonViewModel> People { get; set; }
}
Home Controller
public IActionResult People()
{
return View();
}
[HttpPost]
public IActionResult People(PeopleViewModel vm)
{
return View();
}
cshtml file
@model dynamicTextBox.Models.PeopleViewModel
@{
ViewData["Title"] = "People";
}
<h2>People</h2>
<h4>PeopleViewModel</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="People">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="singlePerson">
<div class="form-group">
<label asp-for="People[0].Name"></label>
<input asp-for="People[0].Name" />
</div>
<div class="form-group">
<label asp-for="People[0].FatherName"></label>
<input asp-for="People[0].FatherName" />
</div>
</div>
<div class="form-group">
<input id="Addbutton" type="button" value="Add" />
</div>
<div id="TextBoxContainer">
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
</div>
</div>
@section scripts
{
<script type="text/javascript">
$(document).ready(function () {
var i = 1;
$("#Addbutton").click(function () {
var div = $("<div />");
var value = "";
var nameBox = $("<input />").attr("type", "textbox").attr("name", "People["+ i +"].Name");
var fatherBox = $("<input />").attr("type", "textbox").attr("name", "People[" + i + "].FatherName");
nameBox.val(value);
fatherBox.val(value);
div.append(nameBox);
div.append(fatherBox);
var button = $("<input />").attr("type", "button").attr("value", "Remove");
button.attr("onclick", "RemoveTextBox(this)");
div.append(button);
$("#TextBoxContainer").append(div);
i++;
});
});
function RemoveTextBox(button) {
$(button).parent().remove();
}
function binddata() {
}
</script>
}
<div>
<a asp-action="Index">Back to List</a>
</div>