Click here to Skip to main content
15,038,345 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
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.
JavaScript
@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>
Posted
Updated 4-May-18 21:34pm
v3
Comments
F-ES Sitecore 5-May-18 7:46am
   
Have a look at this https://www.codeproject.com/Tips/855577/List-of-Model-Object-Post-to-Controller-in-ASP-NET

The basic trick is how you name the elements. If you have a List or array of model objects then make sure the name of the elements are in the form;

[0].Prop1
[1].Prop1

and so on. When you submit that to the controller it'll be converted to an array\list of objects

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900