Syntax error in Razor view when passing model properties as parameters to javascript function

Question

I get a Syntax error on each comma ( , ) and on the last bracket ( ) ) in the following code:

<script type="text/javascript">
    Filters.priceRangeInit(@Model.Min, @Model.Max, @Model.From, @Model.To);
</script>

The javascript function is in another file and looks like this:

Filters = {
    priceRangeInit: function (min, max, from, to) {
        $('#price-range-slider').slider({
            min: min,
            max: max,
            step: 50,
            values: [from, to],
            slide: function (event, ui) {
                $('#left-price-range-amount').val(ui.values[0]);
                $('#right-price-range-amount').val(ui.values[1]);
            }
        });
    }
};

The model looks like this:

public class PriceRangeFilterModel
{
    public int Min { get; set; }
    public int Max { get; set; }
    public int From { get; set; }
    public int To { get; set; }
}

I use using Visual Studio 2012, ASP.NET MVC 3 and Razor and everything works fine in the browser, but I want to get rid of the 4 syntax errors I get in the IDE.

If I pass the parameters as strings I don't get errors anymore, but then I'd have to cast each one back to int to make the slider work:

<script type="text/javascript">
    Filters.priceRangeInit('@Model.Min', '@Model.Max', '@Model.From', '@Model.To');
</script>

Do you have any other ideas about how to write this call so that I don't get syntax errors?

Answer 1

Razor Intellisense is just broken in Visual Studio. Your code is perfectly valid and you should ignore those warnings and hope that Microsoft will fix it in future versions.

Answer 2

To suppress the syntax errors, either wrap string values in quotes or wrap numbers in parseInt() as follows:

var myInt = parseInt('@Model.MyInt');
var myStr = '@Model.MyString';

Or, for your example:

Filters.priceRangeInit(parseInt('@Model.Min'), parseInt('@Model.Max'), parseInt('@Model.From'), parseInt('@Model.To'));

The roundtrip conversion is annoying but takes no time, really.