Question

I’m running into a problem with using Html.DropDownListFor() with jQuery. I’m using ASP.NET MVC 2, C#, .NET 4 and jQuery 1.4.2.

The error I’m getting is ‘Uncaught SyntaxError: Unexpected token ILLEGAL’ (seeing this in the console using Chrome’s developer tools).

I’ll build up to the issue:

Here’s the setup of my SelectList in the controller:

            var Additives = new SelectList(
            new[]
            {
                new { Value = 1, Name = "FCS" },
                new { Value = 2, Name = "Fungizone" },
                new { Value = 3, Name = "HEPES" },
                new { Value = 4, Name = "Investigator supplied" },
                new { Value = 5, Name = "L-Glutamine" },
                new { Value = 6, Name = "None" },
                new { Value = 7, Name = "Pen Only" },
                new { Value = 8, Name = "Pen/Strep" },
                new { Value = 9, Name = "Pen/Strep/Antibiotic" },
                new { Value = 10, Name = "Strep Only" }
            }
            , "Value", "Name");

        ViewData["additives"] = Additives;

Here’s where I use this SelectList in a view with a button to add another additive row:

            <div id="freshAdditive">
                <%: Html.Label("--Additives--")%><br />
                <%: Html.DropDownListFor(model => model.freshAdditive[0], (SelectList) ViewData["additives"], string.Empty)%>
                <%: Html.TextBoxFor(model => model.freshAdditiveAmount[0])%>
                <input id="moreAdditive" class="buttoncenter" value="More Additive" type="button" />
            </div>

Here’s where I’m attempting to use Html.DropDownListFor with jQuery, this is where I’m attempting to add another additive row using jQuery:

    <script type="text/javascript">
    // Add additional additive
    $("#moreAdditive").click(function () {
        //alert("More Additive");
        var insertCode = '<br />'
            + '<%: Html.DropDownListFor(model => model.freshAdditive[1],  (SelectList) ViewData["additives"], string.Empty) %>'
            + '<%: Html.TextBoxFor(model => model.freshAdditiveAmount[1])%>'
        $('#freshAdditive').append(insertCode);
    });
</script>

(Using a hard-coded element of 1 intentionally… I’ll refactor once I get the basics working!) If I comment out the line containing Html.DropDownListFor(), the Html.TextBoxFor() helper seems to work just fine with jQuery. I’m thinking this has something to do with multi-line strings, but haven’t found a way to handle it in jQuery. I did find somethine here but am unable to get it working.

Seems like this should be straight forward, but I’m not finding many suggestions. Any ideas?

Thanks!

Answer 1

Another way to do this would be to render your code into a hidden div. Then use jquery to clone the elements. Try something like this:

<div id="hiddenHtml" style="display:none;">
     <%: Html.DropDownListFor(model => model.freshAdditive[1],  (SelectList) ViewData["additives"], string.Empty) %>
     <%: Html.TextBoxFor(model => model.freshAddit    
</div>
<script type="text/javascript">
// Add additional additive
$("#moreAdditive").click(function () {
    //alert("More Additive");
    var insertCode = $("#hiddenHtml").html();
});