Unable to create a null constant value of type 'System.Collections.Generic.List


@{
    ViewBag.Title = "New Rental Form";
}

<h2>New Rental Form</h2>

<form id="newRental">
    <div class="form-group">
        <label>Customer</label>
        <div class="tt-container">
            <input id="customer" type="text" value="" class="form-control" />
        </div>
    </div>
    
    <div class="form-group">
        <label>Movie</label>
        <div class="tt-container">
            <input id="movie" type="text" value="" class="form-control" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 col-sm-1">
            <ul id="movies" class="list-group"></ul>
        </div>
    </div>

    <button class="btn btn-primary">Submit</button>
</form>


@section scripts
{


    <script>
        $(document).ready(function () {

            var vm = {
                movieIds: []
            };

            var customers = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '/api/customers?query=%QUERY',
                    wildcard: '%QUERY'
                }
            });

            $('#customer').typeahead({
                minLength: 3,
                highlight: true
            }, {
                name: 'customers',
                display: 'name',
                source: customers
            }).on("typeahead:select", function(e, customer) {
                vm.customerId = customer.id;
            });

            var movies = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '/api/movies?query=%QUERY',
                    wildcard: '%QUERY'
                }
            });

            $('#movie').typeahead({
                minLength: 3,
                highlight: true
            }, {
                name: 'movies',
                display: 'name',
                source: movies
            }).on("typeahead:select", function (e, movie) {
                $("#movies").append("<li class='list-group-item'>" + movie.name + "</li>");

                $("#movie").typeahead("val", "");

                vm.movieIds.push(movie.id);
            });


            $("#newRental").submit(function (e) {

                e.preventDefault();

                $.ajax({
                        url: "/api/newRentals",
                        method: "POST",
                        data: vm
                    })
                    .done(function() {
                        console.log("done");
                    })
                    .fail(function() {

                    });
            });

        });
    </script>
}`