Creating Dynamic controls using MVC JQUERY suggestion

Question

I have a following code in my View

<tr id="tblNewContentRow">
       <td>
     @Html.TextBox("txtNewAttributes", "", new { @class = "alphaonly", style = "width: 155px;" })
       </td>
        <td>
      @{@Html.DropDownList("ddlNewValues", Model.OperandsMaxList, new { style = "height: 20px;" })
        }
       </td>
       <td colspan="2">
       @Html.TextBox("txtNewValues", "", new { @class = "numbersonly", style = "width: 250px;" })
    </td>
 </tr>

And i have ADD Button for the user where in they can dynamically add as much TR(Shown Above) they want in runtime.

Currently am using the below code for dynamically generating TR using JQUERY

var txtNewAttributes = '<td><input type="text" name="txtNewAttributes' + (tblRows + 1) + '"  class="alphaonly" style = "width: 155px;" id="txtNewAttributes' + (tblRows + 1) + '" value="" /></td>';
    var ddlNewValues = '<td><select id="ddlNewValues' + (tblRows + 1) + '" style = "height: 20px;width:75px;" /></td>';
  var txtNewValues = '<td><input type="text" name="txtNewValues' + (tblRows + 1) + '" style = "width: 250px;" id="txtNewValues' + (tblRows + 1) + '" value="" /></td>';
  var repeatRow = txtNewAttributes + ddlNewValues + txtNewValues;
   $('#tblNewSearchAttribute tr:last').prev().after('<tr id="tblNewContentRow' + (tblRows + 1) + '">' + repeatRow + '</tr>');

But i have lot of functionality to be done on these dynamic rows after it is rendered.Currently itz bit confusing with this way to make use of the dataEntered.

My Question is

Is there a better way i can Handle this so i can easily make use of these datas for all the Functionalities ?
What will be the best way of implementing the above scenario ?

Please share your suggestions.

Am pretty new to MVC as well as Jquery.

Thanks

If i create multiple rows how easy ll it be for me to Traverse again ?What ll be the ID for newly generated Rows(TextBox etc ) ??? — user2067567
– user2067567, Commented Mar 6, 2013 at 14:22
What do you mean: "to make use of the dataEntered"? How you implement it so far? — phnkha
– phnkha, Commented Mar 9, 2013 at 7:58
I mean "To traverse the value user entered in the textbox" is little complicated by this way. want to know if there are anyother easy way of creating dynamic controls and easily captured later — user2067567
– user2067567, Commented Mar 9, 2013 at 8:08

phnkha · Accepted Answer · 2013-03-09 09:15:36Z

2

+50

Here is a little improvement to your code to make the data retrieval easier:

Use class instead of id, e.g. class='txtAttributes'
Should use css for styling, avoid as much as possible styling code.

Your addNewRow function should look like:

function addNewRow(){
   var txtNewAttributes = "<td><input type='text' class='txtNewAttributes' /></td>";
   var ddlNewValues = "<td><select class='ddlNewValues'></select></td>";
   var txtNewValues = "<td><input type='text' class='txtNewValues' /></td>";
   var repeatRow = txtNewAttributes + ddlNewValues + txtNewValues;

   $('#tblNewSearchAttribute tr:last').prev().after('<tr class="tblNewContentRow">' + repeatRow + '</tr>');   
}

Then the data retrieval function:

function retrieveData(){
    var items = [];

    // loop for each row
    $("#tblNewSearchAttribute .tblNewContentRow").each(function(){
        var item = {
            txtNewAtribute: $(this).find(".txtNewAttributes").val(),
            ddlNewValues: $(this).find(".ddlNewValues").val(),
            txtNewValues: $(this).find(".txtNewValues").val()
        };
        items.push(item);
    });

    //  return the array of item, each item contains data for a table row
    return items;
}

In case you need to handle some events e.g. handling change event of all txtNewValues in the table, you will see using class instead of id is better:

$("'#tblNewSearchAttribute").on("change", ".txtNewValues", function(){
     // do something
});

About css:

#tblNewSearchAttribute .txtNewAttributes {
    width: 155px;
}

#tblNewSearchAttribute .ddlNewValues{
    height: 20px;
    width:75px;
}

edited Mar 9, 2013 at 9:15

answered Mar 9, 2013 at 8:50

phnkha

7,9102 gold badges26 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user2067567 Over a year ago

if i have some 10 rows added dynamically "<td><input type='text' class='txtNewValues' /></td>"; how ll i distinguish by itz name during retrieval ?

phnkha Over a year ago

but why you need distinguish rows? Thought they are the same. Try to use my retrieveData and see more about jquery each here: api.jquery.com/jQuery.each

user2067567 Over a year ago

Will it fetch Row by row ? Bcoz i need to map Textbox ddl textbox in a row ..form a Array of all rows and send back to server

phnkha Over a year ago

retrieveData return an array and you just send it back to server

user2067567 Over a year ago

Thanks i ll try. i have added +1. If it works i ll accept answer

|

Collectives™ on Stack Overflow

Creating Dynamic controls using MVC JQUERY suggestion

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related