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

Question

I'm trying to dynamically add new rows to a table using the idea marked as answer here Add table row in jQuery

I have so far implemented it for one of my table requirements like 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 now trying to implement the same for the <tr>..</tr> definition below but i'm failing to get it 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 as 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 as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto" })
                    </td>
                    <td>
                        @Html.TextBox("Remarks", null, new { @width = 700 })
                    </td>
                </tr>

I thought i would try the line below but that 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 as 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 as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto" })</td><td>@Html.TextBox("Remarks", null, new { @width = 700 })</td></tr>');

If your code is in external JS file then you can't as `@Html.TextBox` is processed by razor engine. As a workaround create a partial view and append that view — Satpal, Jan 27 '16 at 10:51
@Satpal is there an alternative approach i can explorer? i really need to get the dropdownlist values loaded when adding a new row. — StackTrace, Jan 27 '16 at 10:54
In your view, generate a hidden `dropdownlist` then you can clone and append it in the row — Satpal, Jan 27 '16 at 10:56

score 0 · Answer 1 · answered Jan 27 '16 at 11:53

As pointed out in the comments, you cannot using razor html helpers in a separate javascript file. You then have two options:

Use page specific javascript in a <script> tag in your razor view. Any helpers you use will render in the same way, and your existing code should be fine.

Alternatively you can render the list in the view, and copy it as required in your javascript.

Something like

// Your normal view markup here

<div id='countries' style='display:none'>
    @Html.DropDownList("ddlCountries", new SelectList(ViewBag.CountryList as System.Collections.IEnumerable, "Value", "Text"), new { @width = 60 })
</div>
<div id='regions'>
    @Html.DropDownList("ddlRegions", new SelectList(ViewBag.RegionList as System.Collections.IEnumerable, "Value", "Text"), new { @width = "auto" })
</div>

And then the javascript would look something like 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);

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

1 Answers1