url.content显示相同的视频

Question

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">&times;</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>
}

Answer 1

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>