I have a JavaScript if condition containing some parison operators (<=, >=) inside a partial view. This JavaScript is surrounded by MVC the Razor <text> tags.

With this, my JS is dynamically loading based on the Model properties. However if I have parison operators in the JavaScript method, it is throwing an error.

Working scenario:

    @if (Model.SomeTrueCondition)
    {
        <text>
        function JSMethod() {
            AnotherJSMethod();
            return;
        }
        </text>
    }  

Not working scenario (if I call the AnotherJSMethod() using parison operators)

    @if (Model.SomeTrueCondition)
    {
        <text>
        function JSMethod() {
            // This if condition containing parison operators are not being accepted!
            if ($('#aTextBox').val().length <= 0 || $('#bTextBox').val().length <= 0) {
                AnotherJSMethod();
                return;
            }
        }
        </text>
    }

I tried moving this JS method in another .js file and tried embedding the below way but I still see the same issues.

@section JavaScriptIncludes
{
   <script type="text/javascript" src="@Url.Content("/Scripts/SomeScript.js")" />
}

Getting below error,

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: End of file or an unexpected character was reached before the "" tag could be parsed. Elements inside markup blocks must be plete. They must either be self-closing ("<br />") or have matching end tags ("<p>Hello&lt/p>"). If you intended to display a "<" character, use the "<" HTML entity.

Pl. can someone tell me what am I missing here!

Feel free to correct the question/content/tags in order to reach out to right people.

I have a JavaScript if condition containing some parison operators (<=, >=) inside a partial view. This JavaScript is surrounded by MVC the Razor <text> tags.

With this, my JS is dynamically loading based on the Model properties. However if I have parison operators in the JavaScript method, it is throwing an error.

Working scenario:

    @if (Model.SomeTrueCondition)
    {
        <text>
        function JSMethod() {
            AnotherJSMethod();
            return;
        }
        </text>
    }  

Not working scenario (if I call the AnotherJSMethod() using parison operators)

    @if (Model.SomeTrueCondition)
    {
        <text>
        function JSMethod() {
            // This if condition containing parison operators are not being accepted!
            if ($('#aTextBox').val().length <= 0 || $('#bTextBox').val().length <= 0) {
                AnotherJSMethod();
                return;
            }
        }
        </text>
    }

I tried moving this JS method in another .js file and tried embedding the below way but I still see the same issues.

@section JavaScriptIncludes
{
   <script type="text/javascript" src="@Url.Content("/Scripts/SomeScript.js")" />
}

Getting below error,

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: End of file or an unexpected character was reached before the "" tag could be parsed. Elements inside markup blocks must be plete. They must either be self-closing ("<br />") or have matching end tags ("<p>Hello&lt/p>"). If you intended to display a "<" character, use the "<" HTML entity.

Pl. can someone tell me what am I missing here!

Feel free to correct the question/content/tags in order to reach out to right people.

• javascript
• asp-mvc
• razor
• parison-operators

• Just copied and pasted your code(Not working scenario ) and worked fine for me. Are you sure this snippet is causing the issue ? – Shyju Commented Nov 12, 2018 at 22:29
• @Shyju, thank you for responding. The Model property, JS method name and textbox names are diff but ultimately this is what I have it! Pl. be informed that this entire code is in a partial view. – SharK Commented Nov 12, 2018 at 22:32
• If its in a partial, then your @section ... would not work (sections are not supported in partials) – user3559349 Commented Nov 12, 2018 at 22:43
• 1 An easier approach would be to just assign you property to a javascript variable inside <script> tags - e.g. var x = @Html.Raw(Json.Encode(Model.SomeTrueCondition)); if (x) { .... } – user3559349 Commented Nov 12, 2018 at 22:46
• 1 Its not clear why you would want to generate inline scripts like that. But since this will be evaluated on the server when the page is rendered, then why not refer to the model property that is used in the value attribute of the textbox rather than the textbox itself? – user3559349 Commented Nov 14, 2018 at 7:15

4 Answers 4

As a workaround, you can use @Html.Raw("<=") instead of <=.

The reason this happens is plicated, so I will explain at the end.

Don't use JS in Razor views

Use external JS files. The @section in the question seems unnecessary. You can conditionally render scripts without it. E.g.

@if (hasPermissions)
{
   <script src="path/to/script.js"></script>
}

This is the best long-term solution and well worth the effort for larger projects, since:

• This makes your scripts unobtrusive. As a result, bundlers, TypeScript, npm packages, and so on are easier to use.
• This forces you to organize your code better.

For some reason, if you can't do that...

Then the most consistent way to stop the error is to exclusively use @**@ Razor ments in views, even for JS code. This can be done easily with the Find and Replace feature of VS.

If you can't do that either, then the least bad workaround is to simply invert your conditional directions in if statements. (Change <= to >=). If you're using a for loop, you can likely just use < instead of <= in your termination condition.

Do not use the @Html.Raw("<=") helper function as stated in the other answer. Despite the fact that it generates valid code in the end, it uses a Razor helper for something that should be pure JS. Using this pletely disables JS IntelliSense for the same line, so if you have a JS syntax error, it will not warn you.

When does the bug occur?

When all of the following conditions are met:

• There is a <= (less than or equals) operator in the JS. It likely thinks the = is part of a tag name.
  • <, <<, >, and >= do not cause problems.
• Script is in a <text></text> context
• There is a JS ment (line or block) somewhere between the <= and the closing </text> tag. Razor ments are ok. Exceptions are:
  • There is a > operator or template string literal (e.g. `>`) before the offending ment.
  • It cannot be in a normal string literal.

Examples

(All these are in <text> tags.)

// No problem since > occurs before ment
if (0 <= 1){}
0>0;
// Hello

if (0 <= 1){}
/* This ment breaks it because it happens before the operator */
0>0;

if (0 <= 1){}
@* This is fine *@
0>0;

I just add this ment //> after loop block and worked for me :)

like this:

for(let i =0;i<=10;i++){//>//in some where it was working
//your code here
}//>//in some where it was working 

You can avoid using the <text> block that seems to cause the issue by converting your condition to JS. For example:

var condition = @Model.SomeTrueCondition.ToString().ToLower();
if (condition) {
    function JSMethod() {
        // This statement is no longer a problem if it's not in <text></text>
        if ($('#aTextBox').val().length <= 0 || $('#bTextBox').val().length <= 0) {
            AnotherJSMethod();
            return;
        }
    }
}