I have 3 controls(one textbox, one numericbox and a date) inside a view form, these 3 forms the Model object. There is link provided to the user, on click of this link all the 3 controls were repeated 5 times inside the form.

I have a list of Model class as an argument type in the controller action method. How to clone the form content 5 times such that it serializes properly to List?

I have 3 controls(one textbox, one numericbox and a date) inside a view form, these 3 forms the Model object. There is link provided to the user, on click of this link all the 3 controls were repeated 5 times inside the form.

I have a list of Model class as an argument type in the controller action method. How to clone the form content 5 times such that it serializes properly to List?

• javascript
• c#
• jquery
• asp-mvc

Share Improve this question Follow edited Dec 11, 2015 at 18:34 DivideByzero asked Dec 11, 2015 at 18:28 DivideByzeroDivideByzero 47444 silver badges1818 bronze badges 2

• In your Razor view use a @for() loop with a counter. Show us what you have attempted. – Jasen Commented Dec 11, 2015 at 18:48
• Refer answers here and here for some options – user3559349 Commented Dec 11, 2015 at 20:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

A simpler way.

Model :

public class MyModel
{
    public IList<OneSetOfElements> FormSet { get; set; }
}

public class OneSetOfElements
{
    public string Name { get; set; }
    public int Age { get; set; }

    [DataType(DataType.Date)]
    public DateTime Dob { get; set; }
}

Action :

public ActionResult MyAction(MyModel model)
{
    foreach (var set in model.FormSet)
    {
        //read your data.
    }
}

View : Show the id "showMeOnUrlClick" on click

    @using (Html.BeginForm())
    {

//This would bind as first list element
        <div id="firstSet"> 
            @Html.EditorFor(m => m.FormSet[1].Name)
            @Html.EditorFor(m => m.FormSet[1].Age)
            @Html.EditorFor(m => m.FormSet[1].Dob, new { type = "date" })

        </div>

//Remaining list element
        <div id="showMeOnUrlClick" style="display: none"> 
            @for (int i = 1; i <= 6; i++)
            {
                @Html.EditorFor(m => m.FormSet[i].Name)
                @Html.EditorFor(m => m.FormSet[i].Age)
                @Html.EditorFor(m => m.FormSet[i].Dob, new {type = "date"})
            }
        </div>

        <button onclick="showTheRepeatedFields() ">Show</button>
    }

You should use jQuery to dynamically create a row with all the 3 input fields when user clicks on the Add button.

So in your razor view (ex:Create), create the first row with the three form fields.

@using (Html.BeginForm())
{
   <a href="#" id="addRow">Add</a>
   <div id="items">
      <div class="itemRow">
         <label>Name</label> <input type="text" class="formfield" name="Name" />
         <label>Age</label>  <input type="text" class="formfield" name="Age" />
         <label>CreateDate</label><input type="text" class="formfield" name="CreateDate" />
      </div>
   </div>
    <input type="submit" id="btnSubmit" />
}

Now we will add some client side code to listen to the click event on the Add link, create a clone of the container div(with css class itemRow) and append it to the outer container div(with id items). When user clicks the submit button, we will read the form fields and build an array of object and post that to the server using jQuery ajax.

@section Scripts
{
<script type="text/javascript">

    $(function () {

        $("#addRow").click(function (e) {
            e.preventDefault();    
            var template = $("#items").find(".itemRow").first();
            var newRow = template.clone();
            newRow.find("input.formfield").val("");
            $("#items").append(newRow);

        });

        $("#btnSubmit").click(function (e) {
            e.preventDefault();
            var _this = $(this);
            var url =_this.closest("form").attr("action");

            var rows = [];
            var items = $(".itemRow");

            $.each(items, function (i, item) {                   
                var name =  $(item).find("input[name='Name']").val();
                var age =  $(item).find("input[name='Age']").val();
                var createDt =  $(item).find("input[name='CreateDate']").val();

                var row = { Name: name, Age: age, CreateDate: createDt };
                rows.push(row);    
            });

            //Let's post to server
            $.ajax({
                type:"POST",
                url: url,
                data: JSON.stringify(rows),
                contentType: "application/json"                       
            })
            .done(function (result) {
                //do something with the result
            })                 

        });    
    });    
</script>
}

Now you need an HttpPost action method to handle your form posting.

[HttpPost]
public ActionResult Create(IEnumerable<CreateUser> model)
{
    foreach(var item in model)
    {
        // to do  :Save
    }
    return Json( new { status ="success"});
}

and your CreateUser view model will look like

public class CreateUser
{
    public string Name { set;get;}
    public int Age { set; get; }
    public DateTime CreateDate { set; get; }
}