如何将模型数组从视图传递到控制器,反之亦然
我有7个属性模型。我在视图中动态附加模型控件。
现在我想获取控制器中的所有控件值,如果服务器端出现任何错误,则需要传递相同的模型对象进行查看。
要求是收集一个人的儿童信息。在视图中,第一次只为孩子显示一行。如果有人想要添加更多的子细节,那么控件应该在客户端动态生成。
如何编写控制器动作代码?
我的尝试:
我的查看代码如下。我正在使用jquery追加新的控件行。
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">
// <![CDATA[
function addRow() {
//copy the table row and clear the value of the input, then append the row to the end of the table
$("#formTable tbody tr:first").clone().find("input").each(function () {
$(this).val('');
}).end().appendTo("#formTable");
//var newRow = $("#formTable tbody tr:first").clone().find("input").each(function () {
// $(this).val('');
//}).end();
//newRow.find('input[type=datetime]').val('').removeClass('hasDatepicker');
//newRow.appendTo("#formTable");
//$("input[type=datetime]").datepicker();
}
$(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"
});
});
// ]]></script>
</body>
</html>
( #formTable tbody tr:first)。clone()。find( input)。每个( function (){
("#formTable tbody tr:first").clone().find("input").each(function () {
( this ).val(' ');
})。end()。appendTo( #formTable);
// var newRow =
(this).val(''); }).end().appendTo("#formTable"); //var newRow =
( #formTable tbody tr:first)。clone()。find(input)。each(function(){
//
("#formTable tbody tr:first").clone().find("input").each(function () { //