Using Html.dropdownList() in Javascript Code

Question

I want to add row to my table dynamicly like this :

 var tableRef = document.getElementById('tblData').getElementsByTagName('tbody')[0];
        var newRow = tableRef.insertRow(tableRef.rows.length);
        var newCell = newRow.insertCell(0);
        newCell.appendChild(document.createElement('input'));
        var newCell = newRow.insertCell(1);
        newCell.appendChild('@Html.DropDownList("AppVersionGroupId", string.Empty)');

but output is :

newCell.appendChild('<select id="AppVersionGroupId" name="AppVersionGroupId"><option value=""></option>
<option value="46a08053-56e3-4320-aec3-7b521cca28ab">op1</option>
<option value="36ff6b7a-bdef-4506-b771-95cc42cd2667">op2</option>
<option value="e84fcfc5-8a46-47fd-8584-c00a5642f246">op3</option>
</select>');

how can I use html.!!! in my javascript ?!

Javad Azimi · Accepted Answer · 2014-05-04T05:00:07.143

6

Thanks a lot guys . The answer that work for me was :

newCell.innerHTML = '@Ajax.JavaScriptStringEncode(Html.DropDownList("AppVersionGroupId", string.Empty).ToHtmlString())'

If anything is wrong let me know .

edited May 04 '14 at 05:00

answered Apr 29 '14 at 04:49

Javad Azimi

95
1
10

Andrei V · Answer 2 · 2014-04-28T07:09:11.910

0

You need to use @Html.Raw and the innerHtml JavaScript function:

newCell.innerHtml = '@Html.Raw(Html.DropDownList("AppVersionGroupId", string.Empty)');

edited Apr 28 '14 at 07:09

answered Apr 28 '14 at 06:10

Andrei V

7,306
6
44
64

It dos not work : var newCell = newRow.insertCell(1); newCell.appendChild(''); – Javad Azimi Apr 28 '14 at 06:43
why output create in multiline ?! – Javad Azimi Apr 28 '14 at 06:46
@JavadAzimi, yup, my bad. `innerHtml` is not a function, but a property. I updated the answer. – Andrei V Apr 28 '14 at 07:09
thanks bro... problem : output break in multiline and made error – Javad Azimi Apr 28 '14 at 07:26
newCell2.innerHTML = ' – Javad Azimi Apr 28 '14 at 07:29

score 0 · Answer 3 · edited May 23 '17 at 12:06

appendChild expect a DOM node and not String, so what you need is a function that create DOM element from a given HTML string

function createElementFromHtml(html){ 
  var div = document.createElement('div');
  div.innerHTML = html;
  return div.childNodes;
};

after defining the above function in your main script, you can call it like this

var dropDown = createElementFromHtml('@Html.DropDownList("AppVersionGroupId", string.Empty)');
newCell.appendChild(dropDown); // <--- here DOMElement and not string

Hope this help!

References:

thanks a lot .. it work like @Andrei V solution . But problem is dropDown tags are in multiline and breaked . it should be in single line and between two "'" — Javad Azimi, Apr 28 '14 at 07:40

Using Html.dropdownList() in Javascript Code

3 Answers3

Linked