В коде страницы SRC пустое, но в alert() в нём есть строка

index.cshtml

<div class="card-body" onclick="setFooterPlayerCourse(this)">
    <h6 class="card-title">@composition.Artist.ArtistName</h6>
    <h7 class="card-text">@composition.CompositionName</h7>
    <audio controls="controls" height="100" width="100">
        <source src="@composition.FilePath" type="audio/mp3" />
        <embed ID="embed-source" height="100" width="100" src="@composition.FilePath" />
    </audio>
</div>

site.js

function setFooterPlayerCourse(el)
{
    try {
        alert(el.children[2].currentSrc);
        alert(document.getElementById("player-source-element").src);
        document.getElementById("player-source-element").src = el.children[2].currentSrc; 
        alert(el.children[2].currentSrc);
        alert(document.getElementById("player-source-element").src);
    } catch (e) { alert(e) }
}

А на срендеренной странице в хроме оно пустое, там нету этой строки и src=""

<div>
    <audio id="player" controls="controls" height="80" width="100%">
        <source id="player-source-element" src="" type="audio/mp3" />
    </audio>
</div>

В чём может быть дело?

Upd: (player-source-element определён в _Layout.cshtml)

В поле Alert выводится следующее (замазана ссылка): введите сюда описание изображения


Ответы (1 шт):

Автор решения: Ivan Silkin

Решилось при помощи "Ajax" и "JQuery".

<div class="card-body" onclick="setFooterPlayerSourse(this)">
    <data value="AudioID"></data>
    <h6 class="card-title">Artist</h6>
    <h7 class="card-text">Composition</h7>
</div>

<div id="player-audio-div" >
    <audio id="player-audio-element" controls="controls" height="80" width="100%">
        <source id="player-source-element" src="null" type="audio/mp3" />
    </audio>
</div>

onclick="setFooterPlayerCourse(this)" вставляется в тег "div" в первом элементе которого содержится тег data и в атрибуте value - идентификатор композиции из базы данных

function setFooterPlayerSourse(el)
{
    try {
        // <data value="AudioID"></data>
        let audio_id = el.children[0].value;
        // https://localhost:5001/GetHtmlPlayer/?id=1
        let ctrl = (el.baseURI + 'GetHtmlPlayer/?id=' + audio_id);
        if ($("#player-source-element") != undefined) {
            $.ajax({ //$.get({ 
                url: ctrl,
                type: 'GET',
                contentType: 'html',
                success: function (response) {
                    console.log('Ajax returned: ' + response);
                    $("#player-audio-div").html('');
                    $("#player-audio-div").append(response);
                    plr = $("#player-audio-element").get(0);
                    plr.play();
                },
                error: function (error_) {
                    console.log("Ajax error: " + error_);
                }
            });
        }
    } catch (e) {
        alert(e)
    }
}
→ Ссылка