Изображение продолжает исчезать при перезагрузке страницы

Question

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

Я пробовал несколько разных способов сделать это. Кажется, они работают, но проблема в том, что img продолжает исчезать. Я нажал кнопку. Кажется, что Jquery выполняется сразу, показывая правильное изображение, контроллер затем отправляет данные для таблицы и обновления страницы. Сокрытие изображения.

Вот событие нажатия кнопки.

<script>
    $(document).ready(function () {
        var rowCount = $('#policyTable tr').length;
        $("span#policyCount").text(rowCount);

        $("#btnDawn").click(function (e) {
           $('span#uwPic').prepend('<img src= "/Images/dawnL.jpg" />');  
        })
   })   
</script>

Опять же, это работает, но изображение не остается после загрузки страницы.

Как мне заставить изображение держаться?

Answer 1

Это, безусловно, предположение, но общая проблема заключается в том, что ваш HTML-элемент, на который вы щелкаете, вероятно, <a href="..." id="btnDawn"></a>, а навигация (href) выполняется прямо с щелчком мыши. Чтобы предотвратить навигацию, ваш обработчик кликов должен вернуть false.

$("#btnDawn").click(function (e) {
    $('span#uwPic').prepend('<img src= "/Images/dawnL.jpg" />');
    return false; // <-- add this
})

Answer 2

Благодаря идее из @Bosco выше, я смог найти решение. Когда контроллер вызывается, он обновляет страницу, чтобы показать вновь вызванные данные. Истекает вызов Jquery до обновления страницы. Что само по себе я не совсем понимаю, поскольку я думал, что вызовы Jquery не были сделаны до тех пор, пока страница не была обновлена ​​и загружена. Вперед, я думаю.

У меня есть оператор switch, который возвращает определенные виды на основе нажатой кнопки. Я также возвращаю сообщение TempData, которое отображает правильное изображение в представлении.

  switch (month)
        {
            case "dawn":
                TempData["CB"] = "Dawn's";
                TempData["DL"] = "1";
                return View(DawnL);

            case "josh":
                TempData["CB"] = "Josh's";
                TempData["JB"] = "1";
                return View(JoshB);

            case "kyle":
                TempData["CB"] = "Kyle's";
                TempData["KB"] = "1";
                return View(KyleB);

            case "hank":
                TempData["CB"] = "Hank's";
                TempData["HW"] = "1";
                return View(HankW);

            default:
                TempData["CB"] = "All";
                return View(NextMonth2);
        }

В представлении я использую это, чтобы найти правильное изображение.

  <th>
        @if (TempData["DL"] != null)
        {
            <img src="~/Images/dawnLThumbNail.jpg" id="dawn" alt="Dawn Lambert" />
        }
        else if (TempData["JB"] != null)
        {
            <img src="~/Images/joshBThumbNail.jpg" id="jb" alt="Josh Beaman" />
        }
        else if (TempData["KB"] != null)
        {
            <img src="~/Images/kyleBThumbNail.jpg" id="jb" alt="Kyle Burgess" />
        }
        else if (TempData["HW"] != null)
        {
            <img src="~/Images/hankWThumbNail.jpg" id="jb" alt="Hank Wilson" />
        }
    </th>

Сохраняет изображение после обновления. Задача решена.