Question

我想知道是否有人可以帮助我解决一些动态刷新的RadioButtons的问题，但是如果有人进行编辑，我想保留这些值（如果再次刷新内容）。到目前为止，我有一个可行的解决方案，直到保存表单为止，在该表单中RadioButton值丢失了。

让我解释一下：

在我们的表单上，每次选中“角色标准”单选按钮都将获取内容。

如果用户选择了内容中的单选按钮和注释文本，则在用户决定添加额外的角色标准时，这将丢失。请注意，此页面上有许多单选按钮和注释字段，它们会根据选择而改变。

要解决此问题，我添加了一些jQuery，以将RadioButtons和Comments的值存储在本地存储中，然后在重绘上下文区域后重新填充这些值。有问题的单选按钮是使用Razor在Partitial View（MVC）中创建的，在页面上它们显示如下：
-注意值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中删除未选中的单选按钮ID。否则，您将不会忘记之前检查过的按钮。因此，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;
});

jQuery的RadioButtons本地存储值缺少回发值

1 个答案: