html dropdownlist helper in javascript

Question

I'd to set a local javascript variable to the output of an html helper. See the following snippet for an example:

<script type="text/javascript">
     $(function () {
              var dtypes = '@Html.DropDownList("TypeId",new SelectList(@ViewBag.MyTypes,"Value","Text"))';
      });
      alert(dtypes);
</script>

This doesn't give me an alert. Am I doing something wrong? Thanks for any help.

This code doesn't make any sense. @Html.DropDownList produces HTML markup for a <select> element. What exactly are you trying to achieve here? — Justin Helgerson
– Justin Helgerson, Commented May 15, 2013 at 18:35
I bet you're getting a syntax error when using this. The DropDownList method will put in some new lines into its output so your string is unterminated. You will likely have to create your own extension method to make this work. Or, better yet, why have the HTML markup in a Javascript object? — Justin Helgerson
– Justin Helgerson, Commented May 15, 2013 at 18:49

Sławomir Rosiek · Accepted Answer · 2013-05-15 20:14:12Z

1

You should encode your html to be valid JavaScript string:

<script type="text/javascript">
 $(function () {
          var dtypes = '@Ajax.JavaScriptStringEncode(Html.DropDownList("TypeId",new SelectList(@ViewBag.MyTypes,"Value","Text")))';
  });
  alert(dtypes);
</script>

answered May 15, 2013 at 20:14

Sławomir Rosiek

4,0733 gold badges28 silver badges44 bronze badges

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

4 Comments

Joe Over a year ago

I'm having a similar problem with a @HTML helper DropDownList. I copied and pasted your code into my .cshtml file and I get an "overload ... has some invalid arguments" error on the Ajax.JavaScriptsStringEncode method. Any ideas why it wouldn't work in a C# Razor file?

Joe Over a year ago

If I enclose the string in "" and then escaped the "s within the string with \" the encode worked: var dtypes = '@Ajax.JavaScriptStringEncode("Html.DropDownList(\"TypeId\",new SelectList(@ViewBag.MyTypes,\"Value\",\"Text\"))")'; It didn't solve my problem though since I'm encoding to inject into a node with jQuery .html(). But when injected into a node it renders as a string not a HTML DropDownList Helper. Please see my post stackoverflow.com/questions/17904426/…

Sławomir Rosiek Over a year ago

You should surround Ajax.JavaScriptStringEncode with Html.Raw so you need @Html.Raw(Ajax.JavaScriptStringEncode())

Joe Over a year ago

var dtypes = @Html.Raw(Ajax.JavaScriptStringEncode(Html.DropDownList("TypeId",new SelectList(@ViewBag.MyTypes,"Value","Text")))); gives the same "invalid argument" error. Would you please write out fully your suggested syntax for your original var dtypes example. Even if that encoding would work will it render as html code, not as a text string, when updating a node with .html()? Best to answer at my stackoverflow.com/questions/17904426/… post since we are getting quite a bit afar of the original question in this post. Thank you.

arghtype · Accepted Answer · 2014-10-20 09:20:19Z

0

You could simply use @Ajax.JavaScriptStringEncode("") and \ in the string before quotation mark.

Your code would be:

var dtypes = '@Ajax.JavaScriptStringEncode("Html.DropDownList(\"TypeId\", 
   new SelectList(@ViewBag.MyTypes,\"Value\",\"Text\"))")';

edited Oct 20, 2014 at 9:20

arghtype

4,54211 gold badges51 silver badges62 bronze badges

answered Oct 20, 2014 at 9:04

Wes

111 silver badge6 bronze badges

Comments

Justin Lim · Accepted Answer · 2017-06-09 08:06:24Z

0

Encode your html helper with @Ajax.JavascriptStringEncode(); And dont forget to convert the Html.DropDownList Helper to string with .ToString().

Here is an example:

<script type="text/javascript">
    $(function () {
      var dtypes = '@Ajax.JavaScriptStringEncode(Html.DropDownList("TypeId",new SelectList(@ViewBag.MyTypes,"Value","Text")).ToString())';
     });
    alert(dtypes);
</script>

answered Jun 9, 2017 at 8:06

Justin Lim

3516 silver badges17 bronze badges

Collectives™ on Stack Overflow

html dropdownlist helper in javascript

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related