В локально сохраненных значениях JQuery для RadioButton отсутствуют значения для обратной передачи

Question

Интересно, может ли кто-нибудь помочь мне с моей проблемой, когда у меня есть некоторые RadioButton, которые динамически обновляются, но если кто-то редактирует их, я хочу сохранить значения, если содержимое обновляется снова. Пока у меня есть рабочее решение, пока я не сохраню форму, в которой значения RadioButton теряются.

Позвольте мне объяснить:

В нашей форме контент выбирается каждый раз, когда установлен переключатель «Role Criteria».

Если пользователь выбирает радиокнопки и текст комментария в контенте, он теряется, если пользователь решает добавить дополнительные критерии роли. Обратите внимание, что на этой странице имеется много переключателей и полей комментариев, и они меняются в зависимости от выбора.

Чтобы исправить это, я добавил несколько jQuery для хранения значений RadioButton и Comments в локальном хранилище, а затем заново заполнял значения после перерисовки контекстной области. Рассматриваемые переключатели создаются в режиме Partitial View (MVC) с использованием Razor, на странице они выглядят так:
- Обратите внимание на значения True & False.

        <td class="text-center">
                <label class="text-center" id="lblCourseApplicableYes">
                    <input name="CourseApplicable" id="CourseApplicableYes" type="radio" checked="checked" value="True">
                    <label for="Yes">Yes</label>
                </label>
                <label class="text-center” id="lblCourseApplicableNo">
                    <input name="CourseApplicable" id="CourseApplicableNo" type="radio" value="False">
                    <label for="No">No</label>
            </label>
        </td>

Это основной вызов, который я использую для сохранения и восстановления выбора пользователя и работает визуально, как я ожидаю:

Вызывается до запуска AJAX для обновления содержимого:

function StoreValues() {
     window.localStorage.clear();
     $("#UpdatePanel").each(function () {
         var textFields = $(this).find('input[type=text], textarea');
         var radioButtons = $(this).find('input:radio');
         if (typeof (window.localStorage) != "undefined") {
             textFields.val(function () {
                 localStorage.setItem(this.id, $(this).val());
             });
             radioButtons.val(function () {
                 if ($(this).prop("checked")) {

                     localStorage.setItem(this.id, true);
                 }
             });
         }
     });
 }

Вызывается после того, как вызов AJAX перерисовывает содержимое успешного вызова:

function RestoreValues() {
     $("#UpdatePanel").each(function () {
         var textFields = $(this).find('input[type=text], textarea');
         var radioButtons = $(this).find('input:radio');
         if (typeof (window.localStorage) != "undefined") {
             textFields.val(function () {
                 if (localStorage.getItem(this.id) !== null) {
                     return localStorage.getItem(this.id);
                 }
             });
             radioButtons.val(function () {
                if (localStorage.getItem(this.id) !== null) {

                    $(this).click(function() {
                        $(this).prop("checked", true);                       
                    });

                    $(this).click();
                }
             });
         }
     });
 }

Это хорошо работает, и пользователь не мудрее. Однако на сохранении все немного по-другому. Когда происходит обратная передача, значения переключателей теряются. Мне нужно использовать их, чтобы я мог использовать Form.Request для получения значений.

Глядя на Fiddler, параметры, отправляемые обратно на сервер, являются именами RadioButton, но значения пусты.

TextComments проходят, так что я знаю, что это как-то связано с проверкой радиокнопки. Если я сохраню новую форму без повторного заполнения чего-либо JQuery, то все значения будут такими, какими они должны быть, то есть значение имени радиокнопки - True или False.

Однако после того, как JQuery восстановит элементы, параметр value на каждом входе будет пустым, я заметил, что проверенное значение тоже не перемещается, но не уверен, что это тоже нормально. Я пытался усилить ценность с помощью JQuery, но мне не повезло, что бы я ни пытался.

Я пытался установить эти элементы вручную, чтобы попытаться заставить их иметь значение, но безуспешно.

Что происходит, кто-нибудь может помочь? Как правило, тестирование проводилось в IE11, поскольку это стандарт компании (не спрашивайте), но в Chrome такое же поведение, поэтому я не думаю, что это связано с браузером.

Answer 1

Вы звоните radioButtons.val(), который устанавливает значения переключателей. Но функция ничего не возвращает, поэтому значения устанавливаются в пустую строку.

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

radioButtons.each(function() {
    if (this.checked) {
        localStorage.setItem(this.id, true);
    } else {
        localStorage.removeItem(this.id);
    }
});

Вы также должны звонить .each() вместо .val() для текстовых элементов.

И создание обработчика click просто для проверки кнопки кажется ненужным. В RestoreValues просто напишите:

radioButtons.prop("checked", function() {
    return localStorage.getItem(this.id) !== null;
});