У меня есть приложение asp.net mvc core 2.2.На странице загружается партиал:
<div class="col-md-9" id="content">
@await Html.PartialAsync("_TrainingContent")
</div>
партиал имеет модель и загружает видео с помощью проигрывателя video.js:
@model Partner2Train.Models.ModuleViewModels.TrainingContentViewModel
@if (Model != null)
{
<li>Do some training stuff for @Model.ModuleId</li>
<div class="row">
<div id="instructions">
<video id="my_video" class="video-js vjs-default-skin" width="640" height="267"
poster=''
data-setup='{ "aspectRatio":"640:267", "playbackRates": [0.5, 1, 2], "controls":true, "preload":"auto", "autoplay":false, "inactivityTimeout":0 }'>
<source src="~/video/sample_video.mp4" type="video/mp4" />
<source src="~/video/sample_video.webm" type="video/webm" />
<source src="~/video/sample_video.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
</div>
</div>
<div class="row" style="margin-top:25px;">
<div id="db_data">
<label>Current video location: </label> <input type="text" id="watched_value" value="" disabled /><br />
<label>Total video duration: </label> <input type="text" id="total_duration" value="" disabled />
</div>
</div>
<br /><br />
}
else
{
<text>Please select a module</text>
}
Если у меня есть функции javascript, которые модифицируют div и загружают видео, запускают документ, готово, видео загружается, и вы можете воспроизводить его.Однако, когда я обновляю партиал с помощью вызова ajax:
$("#tcontent").click(function () {
$.ajax({
url: "Module/TrainingContent/?id=2",
type: "get",
//data: $("form").serialize(), //if you need to post Model data, use this
success: function (result) {
$("#content").html(result);
}
});
})
Видео больше не загружается.Вызов ajax в конечном итоге вернет обновленную модель для отображения в частичном, другом видео, тексте и т. Д. Я предполагаю, что это не сработало, потому что ajax не запускает загрузку страницы, поэтому видео javascript не загружается снова.Поэтому я переместил видео javascript в функцию и вызвал ее при успешном вызове ajax:
$("#tcontent").click(function () {
$.ajax({
url: "Module/TrainingContent/?id=2",
type: "get",
//data: $("form").serialize(), //if you need to post Model data, use this
success: function (result) {
$("#content").html(result);
vidprep();
vidbutton();
}
});
})
Однако я получаю тот же результат, что он не загружает элементы управления.Функции запускаются, как я вижу некоторый отладочный текст в консоли, но не добавят элементы управления видео, просто показывая окно с неотформатированным первым кадром.
Если вы обновляете партиал с помощью ajax, как вы получаетеJavaScript, чтобы воздействовать на элементы в частичном?
Любая помощь будет высоко ценится, так как я застрял на этом пару дней.
Элементы после вызова ajax 
Вот две мои функции JS, которые работают, сообщения печатаются на консоль:
function vidprep() {
console.log("In partial video function");
// Stop if HTML5 video isn't supported
if (!document.createElement('video').canPlayType) {
$("#video_controls").hide();
console.log("Can't Play Video");
return;
}
var video = document.getElementById("my_video");
// Play/Pause ============================//
$("#play_button").bind("click", function () {
video.play();
});
$("#pause_button").bind("click", function () {
video.pause();
});
$("#play_toggle").bind("click", function () {
if (video.paused) {
video.play();
$(this).html("Pause");
} else {
video.pause();
$(this).html("Play");
}
});
// Play Progress ============================//
$(video).bind("timeupdate", function () {
var timePercent = (this.currentTime / this.duration) * 100;
$("#play_progress").css({ width: timePercent + "%" })
});
// Load Progress ============================//
$(video).bind("progress", function () {
updateLoadProgress();
});
$(video).bind("loadeddata", function () {
updateLoadProgress();
});
$(video).bind("canplaythrough", function () {
updateLoadProgress();
});
$(video).bind("playing", function () {
updateLoadProgress();
});
function updateLoadProgress() {
if (video.buffered.length > 0) {
var percent = (video.buffered.end(0) / video.duration) * 100;
$("#load_progress").css({ width: percent + "%" })
}
}
// Time Display =============================//
$(video).bind("timeupdate", function () {
$("#current_time").html(formatTime(this.currentTime));
$("#watched_value").val(formatTime(this.currentTime));
});
$(video).bind("durationchange", function () {
$("#duration").html(formatTime(this.duration));
$("#total_duration").val(formatTime(this.duration));
});
function formatTime(seconds) {
var seconds = Math.round(seconds);
var minutes = Math.floor(seconds / 60);
// Remaining seconds
seconds = Math.floor(seconds % 60);
// Add leading Zeros
minutes = (minutes >= 10) ? minutes : "0" + minutes;
seconds = (seconds >= 10) ? seconds : "0" + seconds;
return minutes + ":" + seconds;
}
}
function vidbutton() {
var $refreshButton = $('#refresh');
var $results = $('#css_result');
console.log("In video button");
function refresh() {
var css = $('style.cp-pen-styles').text();
$results.html(css);
}
refresh();
$refreshButton.click(refresh);
// Select all the contents when clicked
$results.click(function () {
$(this).select();
});
}