1.10.3.Updating the DOM

• 1.Install toastr install-package toastr

• 2.Modify New.cshtml

<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-4 col-sm-4">
    <ul id="movies" class="list-group"></ul>
   </div>
 </div>
   <button class="btn btn-primary">Submit</button>
   @*div.form-group>label+input[type='text'].form-control*@
</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: 2,
    highlight: true
   }, {
     name: 'customers',
     display: 'name',
     source: customers
    }).on("typeahead:select", function (e, customer) {
     vm.customerId = customer.customerId;
    });


   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: 2,
    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();
    console.log(vm)

    $.ajax({
     url: "/api/newRental",
     method: "post",
     data: vm
    })
     .done(function () {
      toastr.success("Rental successfully recorded");
     })
     .fail(function () {
      toastr.error("Something unexpected happened");
     });
   });

• 3.Modify typehead.css

    .tt-container {
        position: relative;
    }

• 4.Modify movieContoller

        [HttpGet]
        public IHttpActionResult GetMovies(string query)
        {
            var moviesQuery = _context.Movies
                        .Include(c => c.genreType);
  
            if (!String.IsNullOrWhiteSpace(query))
            {
                moviesQuery = moviesQuery.Where(c => c.Name.Contains(query));
            }
  
            var moviesDto = moviesQuery
                           .ToList()
                           .Select(Mapper.Map<Movie, MovieDto>);
  
            return Ok(moviesDto);
        }

• 5.Modify customerContoller

        [HttpGet]
        public IHttpActionResult GetCustomers(string query = null)
        {
            var customerQuery = _context.Customers
                .Include(c => c.membershipType);
  
            if (!String.IsNullOrWhiteSpace(query))
            {
                customerQuery = customerQuery.Where(c => c.Name.Contains(query));
            }
  
            var customerDtos = customerQuery
                .ToList()
                .Select(Mapper.Map<Customer, CustomerDto>);
  
            return Ok(customerDtos);
        }