Create HTML controls dynamically

Question

I have table with one row of data with model binded, then i have an add button on clicking which im trying to clone the first row along with the model as well. But im not able to read all controls to clone and also please let me know how do i map the model to the dynamic controls, Note :- Model being binded is a List

<table id="Table11" align="center" style="width:95%" class="TFtable">
 <tbody id="pettyTbody">
   <tr>
     @if (Model != null)
     {
        for (int i = 1; i < Model.pettyCashApprovalData.Count; i++)
        {
            <td></td>
            <td>@Html.DropDownListFor(m => m.pettyCashApprovalData[i].AccountCode, new SelectList(new[] { "--Select AccNo--", "ACN001", "ACN002", "ACN003", "ACN004", "ACN005", "ACN006" }), new { @class = "drAccNo chosen-select" })</td>
            <td>@Html.DropDownListFor(m => m.pettyCashApprovalData[i].Desciption, new SelectList(new[] { "--Select Decscription--", "Stationary Expense" }), new { @class = "drDescription chosen-select" })</td>
            <td>@Html.DropDownListFor(m => m.pettyCashApprovalData[i].Expenses, new SelectList(new[] { "Select Some Options", "EMP01", "EMP02", "EMP03", "EMP04", "EMP05", "EMP06" }), new { @class = "drExpences chosen-select", @id = "drExpences", @multiple = "multiple", @style = "width:150px" })</td>
            <td>@Html.TextAreaFor(m => m.pettyCashApprovalData[i].DOE, new { @style = "width:140px;", @class = "txtDOE txtbox " })</td>
            <td>@Html.TextBoxFor(m => m.pettyCashApprovalData[i].ExpDate, String.Empty, new { @style = "width:90px;", @class = "txtExpDate txtbox " }) </td>
            <td>@Html.TextBoxFor(m => m.pettyCashApprovalData[i].Amount, string.Empty, new { @style = "width:80px;", @class = "txtbox txtAmount" })</td>
            <td>@Html.TextBoxFor(m => m.pettyCashApprovalData[i].sGVNO, string.Empty, new { @style = "width:100px;", @class = "txtbox txtwidth" })</td>
            <td>@Html.TextBoxFor(m => m.pettyCashApprovalData[i].Remark, String.Empty, new { @style = "width:150px;", @class = "txtbox" })</td>
            <td></td>
        }
    }
        else
        {
                <td></td>
                <td>@Html.DropDownListFor(m => m.pettyCashApprovalData[0].AccountCode, new SelectList(new[] { "--Select AccNo--", "ACN001", "ACN002", "ACN003", "ACN004", "ACN005", "ACN006" }), new { @class = "drAccNo chosen-select", @id = "AccountCode" })</td>
                <td>@Html.DropDownListFor(m => m.pettyCashApprovalData[0].Desciption, new SelectList(new[] { "--Select Decscription--", "Stationary Expense" }), new { @class = "drDescription chosen-select", @id = "Expenses" })</td>
                <td>@Html.DropDownListFor(m => m.pettyCashApprovalData[0].Expenses, new SelectList(new[] { "Select Some Options", "EMP01", "EMP02", "EMP03", "EMP04", "EMP05", "EMP06" }), new { @class = "drExpences chosen-select", @id = "drExpences", @multiple = "multiple", @style = "width:150px" })</td>
                <td>@Html.TextAreaFor(m => m.pettyCashApprovalData[0].DOE, new { @style = "width:140px;", @class = "txtDOE txtbox " , @id = "DOE" })</td>
                <td>@Html.TextBoxFor(m => m.pettyCashApprovalData[0].ExpDate, String.Empty, new { @style = "width:90px;", @class = "txtExpDate txtbox ", @id = "expDate" }) </td>
                <td>@Html.TextBoxFor(m => m.pettyCashApprovalData[0].Amount, string.Empty, new { @style = "width:80px;", @class = "txtbox txtAmount" , @id = "Amount" })</td>
                <td>@Html.TextBoxFor(m => m.pettyCashApprovalData[0].sGVNO, string.Empty, new { @style = "width:100px;", @class = "txtbox txtwidth", @id = "sGvno" })</td>
                <td>@Html.TextBoxFor(m => m.pettyCashApprovalData[0].Remark, String.Empty, new { @style = "width:150px;", @class = "txtbox", @id = "Remark" })</td>
                <td></td>
        }
    </tr>
</tbody>

Function to add rows dynamically by cloning

$("#anc_add").click(function () {

        var count = $('#pettyTbody>tr').length;
        alert(count);
        $("#pettyTbody tr:first").clone().find("td").each(function () {

            $(this).attr({

                'id': function(_, id) { return id + count}
                //name': function(_, name) { return name + count},
                //'value': ''               
            });
        }).end().appendTo("#pettyTbody");
        i++;
    });

Cloning wont work without also changing the indexers. Refer the answers [here](http://stackoverflow.com/questions/29161481/post-a-form-array-without-successful/29161796#29161796) and [here](http://stackoverflow.com/questions/29837547/set-class-validation-for-dynamic-textbox-in-a-table/29838689#29838689) — , Jul 06 '16 at 08:38

score 0 · Answer 1 · answered Jul 06 '16 at 15:07

There is how you can add rows dinamically:

$(document).ready(function(){
  var i=1;
  $("#add_row").click(function(){
    $('#addr'+i).html($('#addr0').html());

    $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
    i++;
  });
  $("#delete_row").click(function(){
    if(i>1){
      $("#addr"+(i-1)).html('');
      i--;
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<table class="table table-bordered table-hover" id="tab_logic">
  <thead>
    <tr>
      <th class="text-center">
        Comment
      </th>
      <th class="text-center">
        Price
      </th>
      <th class="text-center">
        Type
      </th>
    </tr>
  </thead>
  <tbody>
    <tr id='addr0'>
      <td>
        <div class="smart-widget sm-right ">
          <label for="client" class="field prepend-icon required-field">
            <select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
          </label>
        </div>
      </td>
      <td>
        <br>
        <div class="smart-widget sm-right ">
          <label for="cop" class="field prepend-icon required-field">
            Price
            <input type="text" name="cop" id="cop" class="gui-input">
          </label>
        </div>
      </td>
      <td>
        <div class="smart-widget sm-right ">
          <label for="client" class="field prepend-icon required-field">
            <label for="client" class="control-label"> Type</label>
            <select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
          </label>
        </div>
      </td>
    </tr>
    <tr id='addr1'></tr>

  </tbody>
</table>
<a id="add_row" class="btn btn-default pull-left">Add Row</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>

Hope it helps!

Hi Gerry Thanks for the info...But i have a list type model assigned to each controland for the controls being added dynamically as well. So when the model is passed to the Post method of the controller.i should be able to read all the data entered in the static and dynamically created controls. — user2586782, Jul 07 '16 at 11:31
You should send info as array to achieve that you want, some references: [Reference1](http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/) , [Reference2](http://stackoverflow.com/questions/14822615/how-does-mvc-4-list-model-binding-work) — Gerry, Jul 07 '16 at 14:54

score 0 · Answer 2 · answered Jul 13 '16 at 16:22

0

I was able to create dynamic controls without unique ID's, I was reading the dynamic control ID values by using the table TD and TD values. Thanks all for the answers, it helped me come out with a solution.

answered Jul 13 '16 at 16:22

user2586782

75
3
12

Create HTML controls dynamically

2 Answers2