Good morning all,

I'm sure this is a gimme, but I have no idea where this issue is ing from.

I have the following lines in a view:

<fieldset>
    <dl>
        <dt>
            <label for="FormTypes">Form Type:</label>
        </dt>
        <dd>           
            <% =Html.DropDownList("FormTypes", "All") %>
        </dd>
    </dl>
</fieldset>
<fieldset>
    <dl>
        <dt>
            <label for="Parts">Form Part:</label>
        </dt>
        <dd>           
            <% =Html.DropDownList("Parts", "All") %>
        </dd>
    </dl>
</fieldset>

This causes no problems, but when adding the following script to the top of to update Parts based on the selection of form type (following the answer to this SO question Bind DropDownlists with JQuery in Asp.Net)

<script type="text/javascript">
    <!--
        $('#FormTypes').change(function() {
            var val = $(this).val();
            $parts = $('#Parts');
            $.ajax({
                url: '<%= Url.Action('FormParts') %>',
                dataType: 'json',
                data: { ID: val },
                success: function(parts) {
                    $.each(parts, function(i, part) {
                        $parts.append('option value="' + part.ID+ '">' + part.Code + '</option>');
                    });
                },
                error: function() {
                    alert('Failed to retrieve parts list.');
                }
            });
        });

    //-->
</script>

(where the FormParts action will return a new object to populate the parts drop down list)

I get the message: Too many characters in character literal on the line

<% =Html.DropDownList("Types") %>

It appears this issue is caused by the javascript being added, but why and why the error is on the previously good line of code in the markup and not in the script?

Thanks in advance.

Good morning all,

I'm sure this is a gimme, but I have no idea where this issue is ing from.

I have the following lines in a view:

<fieldset>
    <dl>
        <dt>
            <label for="FormTypes">Form Type:</label>
        </dt>
        <dd>           
            <% =Html.DropDownList("FormTypes", "All") %>
        </dd>
    </dl>
</fieldset>
<fieldset>
    <dl>
        <dt>
            <label for="Parts">Form Part:</label>
        </dt>
        <dd>           
            <% =Html.DropDownList("Parts", "All") %>
        </dd>
    </dl>
</fieldset>

This causes no problems, but when adding the following script to the top of to update Parts based on the selection of form type (following the answer to this SO question Bind DropDownlists with JQuery in Asp.Net)

<script type="text/javascript">
    <!--
        $('#FormTypes').change(function() {
            var val = $(this).val();
            $parts = $('#Parts');
            $.ajax({
                url: '<%= Url.Action('FormParts') %>',
                dataType: 'json',
                data: { ID: val },
                success: function(parts) {
                    $.each(parts, function(i, part) {
                        $parts.append('option value="' + part.ID+ '">' + part.Code + '</option>');
                    });
                },
                error: function() {
                    alert('Failed to retrieve parts list.');
                }
            });
        });

    //-->
</script>

(where the FormParts action will return a new object to populate the parts drop down list)

I get the message: Too many characters in character literal on the line

<% =Html.DropDownList("Types") %>

It appears this issue is caused by the javascript being added, but why and why the error is on the previously good line of code in the markup and not in the script?

Thanks in advance.

• asp
• javascript
• asp-mvc
• asp-ajax

2 Answers 2

While there's nothing wrong with the line you seperated out, this part in the original code does bother me:

<%= Url.Action('FormParts') %>

You used single quotes for the string in ASP. This marks it as a character literal, and not a string. Replace them with double quotes and you should be fine.

<%= Url.Action("FormParts") %>

I'm not sure where that issue was ing from, I've updated the script to the following and it works.

<script type="text/javascript">
    <!--

    $(function() {
        $('#FormTypes').change(function() {
            //clear all items in list and replace "All" option
            $parts = $('#FormParts');
            $parts.html("");
            $parts.append('<option value="">All</option>');

            var selectedValue = $(this).val();
            if (selectedValue != "") {
                $.ajax({
                    url: '<%= Url.Action("FormParts") %>',
                    dataType: 'json',
                    data: { FormTypeID: selectedValue },
                    success: function(parts) {
                        //repopulate list with JSON objects
                        $.each(parts, function(i, part) {
                            $parts.append('<option value="' + part.ID + '">' + part.Code + '</option>');
                        });
                    },
                    error: function() {
                        alert('Parts list could not be retreived. \n Please use the feedback link to inform us');
                    }
                });
            }
        });
    });
    //-->
</script>

For anyone using this code, in future, please note I've added the evaluation

if (selectedValue != "")

this has been added if the option "All" is selected in the first FormTypes drop down list, there is no dependent part list that should be populated.