Как вызвать функцию jquery при загрузке и вернуть логическое значение MVC ASP.NET

Question

У меня есть тег изображения в моем MVC View, который я хочу отображать только тогда, когда логическое значение, возвращаемое из контроллера, равно true. Я написал функцию jquery, которая вызывается при загрузке изображения, которая в свою очередь вызывает метод контроллера и возвращает логическое значение. Однако функция jquery никогда не вызывается при загрузке изображения. Я очень плохо знаю Jquery и не уверен, правильно ли я это называю.

 <div class="imageHolder">
     <img id="icon" data-userId="@Model.Users[i].Id" src="~/Images/Icon.png" onclick="location.href='/UserDetails/GetUserID?userID=@Model.Users[i].Id'" />
 </div>

Функция Jquery:

$("#icon").load(function () {
            $.ajax({
             type: "POST",
             url:"UserDetails/CheckIfUserDataExists?userId=" + $('#icon').attr('data-userId'),
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             success: function (data) {
                    if (data == "true") {
                        $('#icon').show();
                    }
                    else {
                        $('#icon').hide();
                    }
              },
       });
   }

Метод контроллера:

[HttpGet]
        public ActionResult CheckIfUserDataExists(int userId)
        {
           if(userRepository.CheckIfUserHasData(userId))
            {
                return Json(true);
            }
           else
            {
                return Json(false);
            }
        }

Заранее спасибо,

Answer 1

Фрагмент JQuery для запуска кода после загрузки изображения:

$('#icon').attr('src', '~/Images/Icon.png').load(function () {
    // run Ajax code
    console.log('#icon image loaded');
});

Answer 2

Если изображение кэшируется, оно будет загружено до привязки события. Попробуйте ниже.

$("#icon").one("load", function () {
    $.ajax({
         type: "POST",
         url:"UserDetails/CheckIfUserDataExists?userId=" + $('#icon').attr('data-userId'),
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function (data) {
                if (data == "true") {
                    $('#icon').show();
                }
                else {
                    $('#icon').hide();
                }
          },
   });
}).each(function () {
    if (this.complete) $(this).load();
});

Обработчик .one выполняется не более одного раза для каждого элемента для каждого типа события, поэтому он будет выполняться только один раз. Цикл с функцией .each обеспечит запуск события загрузки, даже если он кэширован.