我有四个相同的UserControls插入Default.aspx。我想将数据写入HiddenField并使用javascript将此数据写入Label1。
该方法仅适用于最后加载的UserControl-HiddenFieldLoader3。
为什么该方法不适用于所有用户控件？如何修复我的代码？
Default.aspx
<%@ Register Src="~/HiddenFieldLoader.ascx" TagPrefix="uc1" TagName="HiddenFieldLoader" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Default.aspx</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="HiddenFieldLoader.js"></script>
</head>
<body>
<form id="form1" runat="server">
<uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader" />
<uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader1" />
<uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader2" />
<uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader3" />
</form>
</body>
</html>
用户控件：HiddenFieldLoader.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HiddenFieldLoader.ascx.cs" Inherits="NewControls.HiddenFieldLoader" %>
<script type="text/javascript">
HFLoader.declareVariables("<%=Button1.ClientID %>", "<%=HiddenField1.ClientID %>", "<%=Label1.ClientID %>");
</script>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" />
<input type="button" ID="Button1" value="Save" runat="server" />
<input type="button" ID="Button2" onclick="HFLoader.showEvent();" value="Show" runat="server" />
Javascript文件：HiddenFieldLoader.js
HFLoader = {
button: null,
hiddenField: null,
label: null,
declareVariables: function (btn, hf, label) {
HFLoader.button = btn;
HFLoader.hiddenField = hf;
HFLoader.label = label;
},
///////SHOW EVENT
showEvent: function () {
$("#" + HFLoader.label).html($("#" + HFLoader.hiddenField).val());
},
//////!SHOW EVENT
saveHiddenField: function (data) {
$("#" + HFLoader.hiddenField).val(data);
},
buttons: function () {
$("#" + HFLoader.button).click(function () {
var datatest = "Data from button ID: " + $(this).attr("id");
HFLoader.saveHiddenField(datatest);
$("#" + HFLoader.label).html($("#" + HFLoader.hiddenField).val());
return false;
});
},
init: function () {
$(function () {
HFLoader.buttons();
});
}
};
HFLoader.init();
最佳答案
它不起作用，因为您使用的是单个实例变量HFLoader，而不是实例。
因此，解决此问题的一种方法是将HFLoader包装在更近的位置（函数，局部作用域），以使对象在每次方法调用时都具有作用域。在下面的示例中，我将HFLoader变量包装在了一个creator函数中。然后，每次对HFLoaderCreator的调用都会产生HFLoader对象的不同版本（实例）。我选择以这种方式而不是创建一个真正的JS类的原因是因为它需要最少的代码更改来演示如何实现。
编辑。假设您还想稍后调用HFLoader来调用诸如saveHiddenField方法之类的东西。为此，我已经完成了2次。 1）我在传入的三个元素中添加了data('HFLoader')，因此您可以使用其中任何一个来调用HFLoader设置。 2）我添加了可以触发以调用方法的自定义事件。这两个选项显示了jQuery插件开发人员用来允许访问基础结构的两种不同方式。
<script type="text/javascript">
HFLoaderCreator("<%=Button1.ClientID %>", "<%=HiddenField1.ClientID %>", "<%=Label1.ClientID %>");
</script>
function HFLoaderCreator(btn, hf, label)
{
var HFLoader = {
button: null,
hiddenField: null,
label: null,
declareVariables: function (btn, hf, label) {
HFLoader.button = btn;
HFLoader.hiddenField = hf;
HFLoader.label = label;
},
saveHiddenField: function (data) {
$("#" + HFLoader.hiddenField).val(data);
},
buttons: function () {
$("#" + HFLoader.button).click(function () {
var datatest = "Data from button ID: " + $(this).attr("id");
HFLoader.saveHiddenField(datatest);
$("#" + HFLoader.label).html($("#" + HFLoader.hiddenField).val());
return false;
});
// add the data so it can be recalled at a later date
$("#" + HFLoader.button).data('HFLoader', HFLoader);
$("#" + HFLoader.hiddenField).data('HFLoader', HFLoader);
$("#" + HFLoader.label).data('HFLoader', HFLoader);
// add custom event handlers - saveHiddenField
$("#" + HFLoader.button).on('saveHiddenField', HFLoader.saveHiddenField);
$("#" + HFLoader.hiddenField).on('saveHiddenField', HFLoader.saveHiddenField);
$("#" + HFLoader.label).on('saveHiddenField', HFLoader.saveHiddenField);
// add custom event handlers - showEvent
$("#" + HFLoader.button).on('showEvent', HFLoader.showEvent);
$("#" + HFLoader.hiddenField).on('showEvent', HFLoader.showEvent);
$("#" + HFLoader.label).on('showEvent', HFLoader.showEvent);
},
init: function () {
$(function () {
HFLoader.buttons();
});
}
};
HFLoader.declareVariables(btn, hf, label);
HFLoader.init();
return HFLoader;
}
因此，现在就充分利用它。在JS中，如果要基于Button1 ID查找HFLoader数据，则可以执行以下操作：
<script type="text/javascript">
var HFLoader = $('#<%=Button1.ClientID %>').data('HFLoader');
HFLoader.showEvent();
</script>
如果要使用ButtonID1触发自定义事件（最终将调用showEvent方法），则可以执行以下操作：
<script type="text/javascript">
$('#<%=Button1.ClientID %>').trigger('showEvent');
</script>
如果您想内联进行操作，例如第一个示例...
<input type="button" ID="Button2" onclick="$('#<%=Button1.ClientID %>').data('HFLoader').showEvent();" value="Show" />
尽管我强烈建议改用JS将事件连接到Button2，例如：
$(function()
{
$('#<%=Button2.ClientID').click(function()
{
$('#<%=Button1.ClientID %>').data('HFLoader').showEvent();
return false;
});
});
这样，它不是嵌入式脚本。总体而言，HFLoader的脚本有点被黑。我建议您看一下我整理的示例，以提取有用的信息，并考虑重新考虑和/或重写您的工作方式。您的大脑将您推向某种“全局”视图，或某种称为HFLoader的自动作用域变量。但是，如果页面上有5个实例，那么您确实需要某些HFLoader对象的实例，而不是HFLoader的某些全局概念。这就像创建一个类的新实例，而不是使用一个类的静态或单例实例一样-两个截然不同的概念！
我希望这有帮助。