1

Default.aspxに4つの同じUserControlを挿入しています。データを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>

UserControl：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();
4

1 に答える 1

1

インスタンスではなく単一のインスタンス変数を使用しているため、機能しませんHFLoader。

HFLoaderしたがって、これを修正する1つの方法は、オブジェクトがメソッド呼び出しごとにスコープされるように、クローザー（関数、ローカルスコープ）でラップすることです。HFLoader以下の例では、変数を作成者関数でラップしました。次に、を呼び出すたびHFLoaderCreatorに、オブジェクトの異なるバージョン（インスタンス）が生成されHFLoaderます。真のJSクラスを作成する代わりにこの方法を選択した理由は、それを実行する方法を示すために最小限のコード変更が必要だったためです。

編集。また、メソッドなどを呼び出すために、後日HFLoaderをリコールしたいとしますsaveHiddenField。これを行うために、私はこれを2つ実行しました。1）data('HFLoader')渡された3つの要素に追加したので、いずれか1つを使用してHFLoader設定を呼び出すことができます。そして2）メソッドを呼び出すためにトリガーできるカスタムイベントを追加しました。これらの2つのオプションは、jQueryプラグイン開発者が基礎となる構造へのアクセスを許可するために使用する2つの異なる方法を示しています。

<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オブジェクトのインスタンスが本当に必要です。これは、クラスの静的インスタンスまたはシングルトンインスタンスを使用する代わりに、クラスの新しいインスタンスを作成するようなものです。2つの非常に異なる概念です。

これがお役に立てば幸いです。

于 2013-01-23T20:48:59.803 に答える