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-04 05:00:07Z

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 4, 2014 at 5:00

answered Apr 29, 2014 at 4:49

Javad Azimi

951 silver badge11 bronze badges

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

Comments

Andrei V · Accepted Answer · 2014-04-28 07:09:11Z

0

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

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

edited Apr 28, 2014 at 7:09

answered Apr 28, 2014 at 6:10

Andrei V

7,5187 gold badges48 silver badges72 bronze badges

5 Comments

Javad Azimi Over a year ago

It dos not work : var newCell = newRow.insertCell(1); 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>');

Javad Azimi Over a year ago

why output create in multiline ?!

Andrei V Over a year ago

@JavadAzimi, yup, my bad. innerHtml is not a function, but a property. I updated the answer.

Javad Azimi Over a year ago

thanks bro... problem : output break in multiline and made error

Javad Azimi Over a year ago

newCell2.innerHTML = '<select id="AppVersionGroupId" name="AppVersionGroupId"><option value=""></option> <option value="46a08053-56e3-4320-aec3-7b521cca28ab">باگ</option>...

Community · Accepted Answer · 2017-05-23 12:06:56Z

0

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:

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Apr 28, 2014 at 7:30

amd

21.7k6 gold badges54 silver badges71 bronze badges

1 Comment

Javad Azimi Over a year ago

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 "'"

Collectives™ on Stack Overflow

Using Html.dropdownList() in Javascript Code

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related