Передача параметра в функцию JavaScript из модели MVC

Question

У меня есть бритва, которая отображает несколько фотографий.Когда пользователь нажимает на фотографию, я хочу, чтобы эта фотография отображалась в другом поле.

Отображать все фотографии (фотографии отображаются нормально):

 @foreach (var item in Model.CatalogItems)
                            {
                                <td><img src="../../Content/@item.ProductImageURL" onclick="changeImage('@item.Id')" border="0" data-toggle="tooltip" style="width:120px; height: 120px; border: 1px solid #444; vertical-align: bottom;" data-placement="top" title="@item.ProductDescription" /></td>
                            } 

JavaScript для изменения другой фотографиик выбранной фотографии:

<script type="text/javascript">

    function changeImage(itemid) {
        document.getElementById("#empty-item1").innerHTML = "<img src='../../Content/@Model.CatalogItems[itemid].ProductImageURL' border='0'
    }
</script>

Я получаю сообщение об ошибке при использовании функции JavaScript: имя itemid не существует в текущем контексте.

Answer 1

Это потому, что itemId является переменной javascript.Выражение C # @Model.CatalogItems[itemid] будет выполнено на сервере.

Механизм просмотра бритвы выполнит код в вашем представлении бритвы, и вывод этого (в основном HTML и JavaScript, который может понять браузер) будет отправлен клиенту (браузеру).Браузер выполнит этот ответ (проанализирует HTML, JavaScript и выполнит его) на стороне клиента.Метод changeImage - это метод JavaScript, который выполняется в браузере, когда конечный пользователь нажимает на изображение.Когда бритва выполняет строку @Model.CatalogItems[itemid] для вывода, она не имеет переменной itemId, определенной / доступной, следовательно, вы получаете ошибку.

Вместо передачи itemId, вы можете передатьпуть к изображению как есть.

onclick="changeImage('../../Content/@item.ProductImageURL')"

и в вашем методе changeImage используйте это значение для обновления другого изображения src

function changeImage(src) {
    document.getElementById("#empty-item1").innerHTML = "<img src='" + src +"' />
}