0

皆さん。Google で質問に対する回答を検索しましたが、asp.net Web コントロールの生成された HTML 要素の一意の ID に関する解決策しか見つかりませんでした。しかし、それは私が探しているものではありません。必要なのは、同じページに複数のインスタンスがある場合に競合しないように、Web コントロールの JavaScript をプログラムする方法です。たとえば、テキスト ボックスとボタンがあり、ユーザーがボタンをクリックすると、テキスト ボックスの値を含むアラートが表示される、次の単純なユーザー コントロールを考えてみましょう。

このようなユーザー コントロールのインスタンスが 2 つ以上あるとします。それらの ID は動的に生成され、すべて互いに異なるため、javascript が適切なテキスト ボックスのメッセージを表示することを確認するにはどうすればよいですか? 実行時にこれらの ID を検出する方法は知っていますが、それは問題ではありません。しかし、問題は、javascrip がインスタンスの要素のみを参照するようにユーザー コントロールをプログラムする方法です。これは、単純なユーザー コントロールの例のボタンと同じです。ユーザー コントロールが 10 個ある場合、それは 10 個のボタンになり、もちろん 10 個のテキスト ボックスになります。ここでの単純な警告メッセージは、あまり単純ではなくなってきていると思います。

しかし、それは本当に単純なことかもしれません。方法がわからないだけです。これを手伝ってくれる人に感謝します。

4

3 に答える 3

1

これに取り組む方法はたくさんあります。

私が使用したいのは、JS関数を記述して、要素を明示的に参照せずに、要素（または要素ID）をパラメーターとして受け取るようにすることです。次に、（ユーザー）コントロールの背後にあるコードで、OnClientClickを設定するか、jQuery（またはその他）を呼び出して要素をバインドするJSの小さな部分を作成します。

例はそれをより明確にする必要があります：

MyUserControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyUserControl.ascx.cs" Inherits="MyUserControl" %>
<div style="border: 1px solid gray; margin: 1em;">
    My ID = "<%= ID%>"<br />
    <asp:TextBox runat="server" ID="tbx" />
    <asp:Button runat="server" ID="btn" Text="Alert!" />
</div>

MyUserControl.ascx.cs

protected void Page_Load(object sender, EventArgs e)
{
    var script = string.Format("ShowAlert('{0}'); return false;", tbx.ClientID);
    btn.OnClientClick = script;
}

MyUserControl.js

function ShowAlert(textboxId)
{
    var textbox = jQuery("#" + textboxId);
    alert(textbox.val());
}

他の場所（ページ、親コントロール、...）

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="MyUserControl.js"></script>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <my:UserControl runat="server" ID="control1" />
        <my:UserControl runat="server" ID="control2" />
        <my:UserControl runat="server" ID="control3" />
        <my:UserControl runat="server" ID="control4" />
        <my:UserControl runat="server" ID="control5" />
    </div>
</form>
</body>

このようにして、作業を行う実際のJSが1回だけ含まれ、必要なすべてのコントロールIDがパラメーターとして渡されます。

もちろんon()、マークアップが可能な限りJSから解放されるように、OnClientClickを使用するよりも、jQueryの関数（または使用するフレームワークによっては同様のメカニズム）を使用して関数をイベントにバインドすることをお勧めします。

于 2013-03-13T13:21:02.030 に答える
0

解決策の 1 つは、クリック イベント リスナーを親要素にアタッチし、関数コールバックで要素をリッスンすることです。この方法では、ID についてまったく心配する必要がなく、クラスまたはイベント ソース タイプのみに基づいて作業できます。このリンクを確認してください

次の擬似コードを確認してください

<div class="portion" >

...
<input type="button"...>

<div/>


//jquery psudo code
$(".portion").live(function(e){
if (e.target == input){
//do action
}
});
于 2013-03-13T13:38:22.053 に答える
0

Clientidmode を使用し、各ボタンにクリック イベント ハンドラー (javascript) をアタッチします。次に、javascrpt/jquery を使用してボタン ID を取得し、最後の 2 桁を取得し、ボタン ID から取得した最後の 2 桁を静的テキスト「txtEcho」に追加して、対応するテキスト ID を取得します。

例：

テキスト コントロール:

 ID="txtEcho01" runat="server" ClientIDMode="Static"

ボタン制御:

ID="btnEcho01" runat="server" ClientIDMode="Static"
于 2013-03-13T12:47:47.843 に答える