asp.net mvc - Using Html.dropdownList() in Javascript Code - Stack Overflow

admin管理员组

文章数量:1023044

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

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

• javascript
• asp-mvc
• html-helper
• html.dropdownlistfor

Share Improve this question Follow asked Apr 28, 2014 at 5:45 Javad AzimiJavad Azimi 9511 silver badge1111 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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 .

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

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

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/en-US/docs/Web/API/Node.appendChild

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

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

• javascript
• asp-mvc
• html-helper
• html.dropdownlistfor

Share Improve this question Follow asked Apr 28, 2014 at 5:45 Javad AzimiJavad Azimi 9511 silver badge1111 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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 .

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

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

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/en-US/docs/Web/API/Node.appendChild

本文标签： aspnet mvcUsing HtmldropdownList() in Javascript CodeStack Overflow