JQuery RadioButtons 的本地存储值缺少回传值
JQuery Locally Stored Values for RadioButtons missing Values for Postback
我想知道是否有人可以帮助我解决我的问题,我有一些动态刷新的 RadioButtons,但如果有人编辑这些,我想在内容再次刷新时保留这些值。到目前为止,我有一个有效的解决方案,直到我保存表单,其中 RadioButton 值丢失。
让我解释一下:
在我们的表单中,每次选中角色标准单选按钮时都会获取内容。
如果用户在内容中选择了一些单选按钮和评论文本,如果用户决定添加额外的角色标准,那么这将丢失。请注意,此页面上有许多单选按钮和评论字段,它们会根据选择而变化。
为了纠正这个问题,我添加了一些 jQuery 来在本地存储中存储 RadioButtons 和 Comments 的值,然后在重新绘制上下文区域后重新填充这些值。有问题的单选按钮是使用 Razor 在局部视图 (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();
}
});
}
});
}
这很好用,用户 none 更聪明。但是在保存时有些不同。一旦回发发生,单选按钮的值就会丢失。我需要使用这些,所以我可以使用 Form.Request 来获取值。
查看 Fiddler,发送回服务器的参数是 RadioButton 名称,但值为空。
TextComments 通过,所以我知道它与单选按钮的检查方式有关。如果我在没有 JQuery 重新填充任何内容的情况下保存一个新表单,那么所有值都应该是它们应该的值,即单选按钮名称值是 True 或 False。
但是JQuery恢复项目后,每个输入的值参数都是“”空白,我注意到检查的值也没有移动,但不确定是否正常。我试图用更多 JQuery 强制其中的值,但无论我尝试过什么,都没有运气。
我试过手动设置这些项目,试图强制它有一个值,但没有成功。
这是怎么回事,有人能帮忙吗?测试通常在 IE11 中进行,因为这是公司标准(不要问),但行为在 Chrome 中似乎是相同的,所以我认为这与浏览器无关。
您正在调用 radioButtons.val()
,它设置单选按钮的值。但是函数没有 return 任何东西,所以值被设置为空字符串。
此外,您需要在保存时从 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;
});
我想知道是否有人可以帮助我解决我的问题,我有一些动态刷新的 RadioButtons,但如果有人编辑这些,我想在内容再次刷新时保留这些值。到目前为止,我有一个有效的解决方案,直到我保存表单,其中 RadioButton 值丢失。
让我解释一下:
在我们的表单中,每次选中角色标准单选按钮时都会获取内容。
如果用户在内容中选择了一些单选按钮和评论文本,如果用户决定添加额外的角色标准,那么这将丢失。请注意,此页面上有许多单选按钮和评论字段,它们会根据选择而变化。
为了纠正这个问题,我添加了一些 jQuery 来在本地存储中存储 RadioButtons 和 Comments 的值,然后在重新绘制上下文区域后重新填充这些值。有问题的单选按钮是使用 Razor 在局部视图 (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();
}
});
}
});
}
这很好用,用户 none 更聪明。但是在保存时有些不同。一旦回发发生,单选按钮的值就会丢失。我需要使用这些,所以我可以使用 Form.Request 来获取值。
查看 Fiddler,发送回服务器的参数是 RadioButton 名称,但值为空。
TextComments 通过,所以我知道它与单选按钮的检查方式有关。如果我在没有 JQuery 重新填充任何内容的情况下保存一个新表单,那么所有值都应该是它们应该的值,即单选按钮名称值是 True 或 False。
但是JQuery恢复项目后,每个输入的值参数都是“”空白,我注意到检查的值也没有移动,但不确定是否正常。我试图用更多 JQuery 强制其中的值,但无论我尝试过什么,都没有运气。
我试过手动设置这些项目,试图强制它有一个值,但没有成功。
这是怎么回事,有人能帮忙吗?测试通常在 IE11 中进行,因为这是公司标准(不要问),但行为在 Chrome 中似乎是相同的,所以我认为这与浏览器无关。
您正在调用 radioButtons.val()
,它设置单选按钮的值。但是函数没有 return 任何东西,所以值被设置为空字符串。
此外,您需要在保存时从 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;
});