Please help me find what I am missing. url.content is not returning each item's video in a foreach loop instead it is showing the same video for each element. I would like to access each video in the videofilepath column of my table and display it on a modal (still a work in progress).
@foreach (var item in Model)
{
<div class="col-md-4 portfolio-item">
<img class="img-responsive img-thumbnail"
src='@item.PosterFilePath'alt="thumbnail" />
<strong> @Html.DisplayNameFor(model => model.Title)</strong>
@Html.DisplayFor(modelItem => item.Title)
<br>
<strong>@Html.DisplayNameFor(model => model.ReleaseDate)</strong>
@Html.DisplayFor(modelItem => item.ReleaseDate)
<br>
<strong>@Html.DisplayNameFor(model => model.Genre)</strong>
@Html.DisplayFor(modelItem => item.Genre)
<br>
<strong> @Html.DisplayNameFor(model => model.Price)</strong>
@Html.DisplayFor(modelItem => item.Price)
<br>
<strong>@Html.DisplayNameFor(model => model.Rating)</strong>
@Html.DisplayFor(modelItem => item.Rating)
<br>
<div class="">
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#ajax">Watch now</button>
<button class="btn btn-success" type="button"><span class="glyphicon-download"></span>Download</button>
</div>
<br>
@Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
@Html.ActionLink("Details", "Details", new { id = item.ID }) |
@Html.ActionLink("Delete", "Delete", new { id = item.ID })
</div>
<div class="modal fade" id="ajax">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h3>@Html.DisplayNameFor(model => model.Title)</h3>
</div>
<div class="modal-body">
<video id="video" poster="~/Images/algo.jpg"
controls="controls"
loop="loop">
<source src="@Url.Content(item.VideoFilePath)" type="video/mp4">
</video>
</div>
<div class="modal-footer">
<button type="button" id="btnClose" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon-folder-close"></span>Close</button>
<button type="button" class="btn btn-success">Download</button>
</div>
</div>
</div>
</div>
}
Your modal div needs to have a unique Id. If you have the Id of the video for example as part of the Model, you could prepend or append it:
<div class="modal fade" id="ajax@(Model.VideoId)"
and the same with the button that invokes it:
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#ajax@(Model.VideoId)">Watch now</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.