Hi,
I have a 7 properties model. I am appending model controls dynamically in view.
now i want to get all controls values in my controller and if any error comes at server side then want to pass same model object to view.
The requirement is collecting child information of a person. In view first time only one row will display for a child. if person want to add more child detail then controls should be generate dynamically at client side.
How to write the controller action code ?
What I have tried:
my view code is as below. I am using jquery to append new row of controls.
@model IEquatable< LoginProcess.Models.child_detail_temp>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>cTable</title>
</head>
<body>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>child_detail_temp</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<form method="post">
<a id="addButton" style="margin: 10px 0;" href="javascript:addRow2();">Add Row</a>
<table id="formTable">
<thead>
<tr>
<th>@Html.LabelFor(model => model.child_order, htmlAttributes: new { @class = "control-label col-md-2" })</th>
<th>@Html.LabelFor(model => model.child_name, htmlAttributes: new { @class = "control-label col-md-2" })</th>
<th>@Html.LabelFor(model => model.child_gender, htmlAttributes: new { @class = "control-label col-md-2" })</th>
<th>@Html.LabelFor(model => model.child_age, htmlAttributes: new { @class = "control-label col-md-2" })</th>
<th>@Html.LabelFor(model => model.child_birth, htmlAttributes: new { @class = "control-label col-md-2" })</th>
<th>@Html.LabelFor(model => model.child_relation, htmlAttributes: new { @class = "control-label col-md-2" })</th>
<th>@Html.LabelFor(model => model.u_pnumber, htmlAttributes: new { @class = "control-label col-md-2" })</th>
</tr>
</thead>
<tbody>
<tr>
<td>
@Html.EditorFor(model => model.child_order, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.child_order, "", new { @class = "text-danger" })
</td>
<td>
@Html.EditorFor(model => model.child_name, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.child_name, "", new { @class = "text-danger" })
</td>
<td>
@Html.EditorFor(model => model.child_gender, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.child_gender, "", new { @class = "text-danger" })
</td>
<td>
@Html.EditorFor(model => model.child_age, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.child_age, "", new { @class = "text-danger" })
</td>
<td>
@Html.EditorFor(model => model.child_birth, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.child_birth, "", new { @class = "text-danger" })
</td>
<td>
@Html.EditorFor(model => model.child_relation, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.child_relation, "", new { @class = "text-danger" })
</td>
<td>
@Html.EditorFor(model => model.u_pnumber, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.u_pnumber, "", new { @class = "text-danger" })
</td>
</tr>
</tbody>
</table>
</form>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<script type="text/javascript">
function addRow() {
$("#formTable tbody tr:first").clone().find("input").each(function () {
$(this).val('');
}).end().appendTo("#formTable");
}
$(function addRow2() {
var newRow = $("#formTable tbody tr:first").clone();
newRow.find("input").val = "";
$("input[type=datetime]").datepicker();
$("#addButton").on("click", function () {
newRow.clone(true).appendTo("#formTable").find("input[type=datetime]").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
yearRange: "-60:+0"
});
});
});
$(document).ready(function () {
$('input[type=datetime]').datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
yearRange: "-60:+0"
});
});
</body>
</html>