Request information about movie from IMDB.
@{
ViewBag.Title = "MovieNavigator";
@model MovieNavigator.Web.ViewModels.HomeViewModel
}
<div class="row">
<div class="col-md-5">
<h2>Search movie</h2>
@using (Html.BeginForm("SearchMovie", "Home", FormMethod.Post))
{
<div class="form-group row">
<div class="col-md-8">
@Html.TextBoxFor(m => m.SearchTitle, new { @class = "form-control", placeholder = "Type movie title" })
</div>
<input type="submit" class="btn btn-secondary mb-2" value="Search" />
</div>
}
</div>
</div>
<div class="row">
<div class="col-md-6">
@if (!string.IsNullOrEmpty(Model.SearchTitle) && !string.IsNullOrEmpty(Model.SearchResult))
{
<h2>Search results</h2>
<div class="alert alert-danger">@Model.SearchResult</div>
}
@if (Model.Movies.Any())
{
<h2>Search results: @Model.SearchResultsCount</h2>
@Html.Partial("_DataPagination", new MovieNavigator.Web.ViewModels.DataPaginationViewModel() { Pagination = Model.DataPagination })
<table class="table table-striped">
<thead>
<tr>
<th>Title</th>
<th>Year</th>
<th> </th>
</tr>
</thead>
<tbody>
@foreach (var movie in Model.Movies)
{
<tr>
<td>@movie.Title</td>
<td>@movie.Year</td>
<td><a href="/movie-details" data-toggle="modal" data-target="#movieDetails" data-imdbid="@movie.imdbID">Details</a></td>
</tr>
}
</tbody>
</table>
}
</div>
@Html.Action("RecentSearch")
</div>
<div class="modal fade" id="movieDetails" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="max-width: 1000px!important;" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title"></h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-4 movie-poster"></div>
<div class="col-8">
<table class="table table-striped">
<tbody>
<tr>
<th>Year</th>
<td><span class="movie-year"></span></td>
</tr>
<tr>
<th>Rated</th>
<td><span class="movie-rated"></span></td>
</tr>
<tr>
<th>Released</th>
<td><span class="movie-released"></span></td>
</tr>
<tr>
<th>Runtime</th>
<td><span class="movie-runtime"></span></td>
</tr>
<tr>
<th>Genre</th>
<td><span class="movie-genre"></span></td>
</tr>
<tr>
<th>Director</th>
<td><span class="movie-director"></span></td>
</tr>
<tr>
<th>Writer</th>
<td><span class="movie-writer"></span></td>
</tr>
<tr>
<th>Actors</th>
<td><span class="movie-actors"></span></td>
</tr>
<tr>
<th>Plot</th>
<td><span class="movie-plot"></span></td>
</tr>
<tr>
<th>Country</th>
<td><span class="movie-country"></span></td>
</tr>
<tr>
<th>Language</th>
<td><span class="movie-language"></span></td>
</tr>
<tr>
<th>Awards</th>
<td><span class="movie-awards"></span></td>
</tr>
<tr>
<th>Metascore</th>
<td><span class="movie-metascore"></span></td>
</tr>
<tr>
<th>IMDB ID</th>
<td><span class="movie-imdbid"></span></td>
</tr>
<tr>
<th>IMDB rating</th>
<td><span class="movie-imdbrating"></span></td>
</tr>
<tr>
<th>IMDB votes</th>
<td><span class="movie-imdbvotes"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#movieDetails').on('show.bs.modal', function (e) {
var button = $(e.relatedTarget);
var imdbId = button.data('imdbid');
var modal = $(this);
var url = 'https://www.omdbapi.com/?apikey=fe53f97e&plot=short&r=json&i=' + imdbId + '&type=movie';
$.ajax(url, {
complete: function (xhr) {
oData = $.parseJSON(xhr.responseText);
if (oData.Response === "False") {
modal.hide();
} else {
modal.find('.modal-title').text(oData.Title);
modal.find('.movie-year').html(oData.Year);
modal.find('.movie-rated').html(oData.Rated);
modal.find('.movie-released').html(oData.Released);
modal.find('.movie-runtime').html(oData.Runtime);
modal.find('.movie-genre').html(oData.Genre);
modal.find('.movie-director').html(oData.Director);
modal.find('.movie-writer').html(oData.Writer);
modal.find('.movie-actors').html(oData.Actors);
modal.find('.movie-plot').html(oData.Plot);
modal.find('.movie-country').html(oData.Country);
modal.find('.movie-language').html(oData.Language);
modal.find('.movie-awards').html(oData.Awards);
if (oData.Metascore !== "N/A")
modal.find('.movie-metascore').html(oData.Metascore + '/100');
else
modal.find('.movie-metascore').html(oData.Metascore);
modal.find('.movie-imdbid').html(oData.imdbID);
modal.find('.movie-imdbrating').html(oData.imdbRating);
modal.find('.movie-imdbvotes').html(oData.imdbVotes);
if (oData.Poster.includes('http', 0)) {
modal.find('.movie-poster').html('<img src="' + oData.Poster + '" alt="' + oData.Title + '" />');
modal.find('.movie-poster').show();
}
else {
modal.find('.movie-poster').html('');
modal.find('.movie-poster').hide();
}
}
}
});
});
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
$('#movieDetails').find('.movie-poster').html('');
});
});
</script>