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 ?!

Answer 1

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 .

Answer 2

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

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

Answer 3

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:

• Creating a new DOM element from an HTML string using built-in DOM methods or prototype
• https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild