javascript - How to dynamically add rows to an html table using MVC razor syntax -

i'm trying dynamically add new rows table using idea marked answer here add table row in jquery

i have far implemented 1 of table requirements below

    function onadditem() {     $('#mydynamictable tr:last').after('<tr><td style="width: 78%;" class="itemname"><input type="text" style="width: 97%;" /></td><td style="width: 20%;" class="itemqty"><input type="text" style="width: 87%;" /></td></tr>');     $("#mydynamictable").show(); } 

i'm trying implement same <tr>..</tr> definition below i'm failing working.

<tr class="tdborder">                     <td class="tdborder">                         @html.textbox("id", null, new { @width = 60 })                     </td>                     <td>                         @html.textbox("name", null, new { @width = 150 })                     </td>                     <td>                         @html.dropdownlist("ddlcountries", new selectlist(viewbag.countrylist system.collections.ienumerable, "value", "text"), new { @width = 60 })                     </td>                     <td>                         @html.textbox("event", null, new { @width = 60 })                     </td>                     <td>                         @html.dropdownlist("ddlregions", new selectlist(viewbag.regionlist system.collections.ienumerable, "value", "text"), new { @width = "auto" })                     </td>                     <td>                         @html.textbox("remarks", null, new { @width = 700 })                     </td>                 </tr> 

i thought try line below crushes jquery.

$('#mydynamictable tr:last').after('<tr class="tdborder"><td class="tdborder">@html.textbox("id", null, new { @width = 60 })</td><td>@html.textbox("name", null, new { @width = 150 })</td><td>@html.dropdownlist("ddlcountries", new selectlist(viewbag.countrylist system.collections.ienumerable, "value", "text"), new { @width = 60 })</td><td>@html.textbox("event", null, new { @width = 60 })</td><td>@html.dropdownlist("ddlregions", new selectlist(viewbag.regionlist system.collections.ienumerable, "value", "text"), new { @width = "auto" })</td><td>@html.textbox("remarks", null, new { @width = 700 })</td></tr>'); 

as pointed out in comments, cannot using razor html helpers in separate javascript file. have 2 options:

use page specific javascript in <script> tag in razor view. helpers use render in same way, , existing code should fine.

alternatively can render list in view, , copy required in javascript.

something like

// normal view markup here  <div id='countries' style='display:none'>     @html.dropdownlist("ddlcountries", new selectlist(viewbag.countrylist system.collections.ienumerable, "value", "text"), new { @width = 60 }) </div> <div id='regions'>     @html.dropdownlist("ddlregions", new selectlist(viewbag.regionlist system.collections.ienumerable, "value", "text"), new { @width = "auto" }) </div> 

and javascript this

var countries = $('#countries').html(); var regions = $('#regions').html(); var html = '<tr class="tdborder">'         + '<td class="tdborder"><input name="id", type="text" /></td>'         + '<td><input name="name" type="text" /></td>'         + '<td>' + countries + '</td>'         + '<td>input name="event" type="text" /></td>'         + '<td>' + regions +'</td>'         + '<td><input name="remarks" type="text" /></td></tr>'  $('#mydynamictable tr:last').after(html);