个人中心
gpt4 book ai didi

asp.net 用户控件中的 Javascript 变量 - 覆盖同一插入用户控件中的变量

转载 作者：行者123 更新时间：2023-11-28 02:29:00 24 4
gpt4 key购买 nike

我在 Default.aspx 中插入了四个相同的 UserControl。我想将数据写入 HiddenField 并使用 javascript 将这些数据写入 Label1。

该方法仅适用于最后加载的 UserControl - HiddenFieldLoader3。

为什么该方法不适用于所有用户控件？我该如何修复我的代码？

默认.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 变量包装在创建者函数中。然后，每次调用 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 的脚本有点乱七八糟。我建议您查看我整理的示例，以提取有用的信息，并考虑重新思考和/或重写您的做事方式。你的大脑正在插入你走向某种“全局” View ，或者某种称为 HFLoader 的自 Action 用域变量。但是，如果页面上有 5 个实例，那么您确实需要某个 HFLoader 对象的实例，而不是 HFLoader 的某些全局概念。这就像创建类的新实例而不是使用类的静态或单例实例——两个截然不同的概念!

我希望这会有所帮助。

关于asp.net 用户控件中的 Javascript 变量 - 覆盖同一插入用户控件中的变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14488736/

24 4 0
文章推荐： css - 无法覆盖事件链接上的线性渐变
文章推荐： c++ - 如何检测 C++ 中的换行符？
文章推荐： css - 单页加载css
文章推荐： c++ - 行号 0 超出范围 0..-1 LIBPQ
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com