web-dev-qa-db-ja.com

JavaScriptを使用したASP.NETポストバック

divドラッグ可能な小さなjQueryがいくつかあります。これらのdivはUpdatePanelに配置され、ドラッグストップでは_doPostBack() JavaScript関数を使用します。ここで、ページフォームから必要な情報を抽出します。

私の問題は、この関数を呼び出すとページ全体が再ロードされるが、更新パネルのみを再ロードすることです。

javascriptasp.netwebformsupdatepanelpostback
80
ErnieStings

ここに完全なソリューションがあります

asp.netページのフォームタグ全体

<form id="form1" runat="server">
    <asp:LinkButton ID="LinkButton1" runat="server" /> <%-- included to force __doPostBack javascript function to be rendered --%>

    <input type="button" id="Button45" name="Button45" onclick="javascript:__doPostBack('ButtonA','')" value="clicking this will run ButtonA.Click Event Handler" /><br /><br />
    <input type="button" id="Button46" name="Button46" onclick="javascript:__doPostBack('ButtonB','')" value="clicking this will run ButtonB.Click Event Handler" /><br /><br />

    <asp:Button runat="server" ID="ButtonA" ClientIDMode="Static" Text="ButtonA" /><br /><br />
    <asp:Button runat="server" ID="ButtonB" ClientIDMode="Static" Text="ButtonB" />
</form>

ページのコードビハインドクラスのコンテンツ全体

Private Sub ButtonA_Click(sender As Object, e As System.EventArgs) Handles ButtonA.Click
    Response.Write("You ran the ButtonA click event")
End Sub

Private Sub ButtonB_Click(sender As Object, e As System.EventArgs) Handles ButtonB.Click
    Response.Write("You ran the ButtonB click event")
End Sub
  • __doPostBack javascript関数がクライアントにレンダリングされるように、LinkBut​​tonが含まれています。単純にButtonコントロールを使用しても、この__doPostBack関数はレンダリングされません。この関数は、ほとんどのASP.NETページにさまざまなコントロールがあるためレンダリングされるため、通常、空のリンクボタンは必要ありません。

どうしたの？

2つの入力コントロールがクライアントにレンダリングされます。

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
  • __EVENTTARGETは__doPostBackの引数1を受け取ります
  • __EVENTARGUMENTは__doPostBackの引数2を受け取ります

__doPostBack関数は次のようにレンダリングされます。

function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
  • ご覧のとおり、非表示の入力に値を割り当てます。

フォームが送信/ポストバックが発生するとき：

  • ボタンクリックハンドラーを実行するサーバーコントロールボタンのUniqueIDを指定した場合（javascript:__doPostBack('ButtonB','')、そのボタンのボタンクリックハンドラーが実行されます。

クリックハンドラを実行したくないが、代わりに他の何かをしたい場合はどうすればよいですか？

__doPostBackへの引数として任意のものを渡すことができます

その後、非表示の入力値を分析し、それに応じて特定のコードを実行できます。

If Request.Form("__EVENTTARGET") = "DoSomethingElse" Then
    Response.Write("Do Something else") 
End If

その他の注意事項

  • クリックハンドラを実行するコントロールのIDがわからない場合はどうなりますか？
    • ClientIDMode="Static"を設定することが受け入れられない場合、次のようなことができます：__doPostBack('<%= myclientid.UniqueID %>', '')。
    • または：__doPostBack('<%= MYBUTTON.UniqueID %>','')
    • これにより、コントロールの一意のIDがjavascriptに挿入されます。
220
Brian Webster

Per Phairoh：パネル名が変更された場合に備えて、ページ/コンポーネントでこれを使用します

<script type="text/javascript">
     <!--
     //must be global to be called by ExternalInterface
         function JSFunction() {
             __doPostBack('<%= myUpdatePanel.ClientID  %>', '');
         }
     -->
     </script>
14
Laramie

Phairohの解決策は理論的には正しいように見えますが、この問題に対する別の解決策も見つけました。 UpdatePanels idをdoPostBack関数のパラメーター（イベントターゲット）として渡すことにより、更新パネルはページ全体ではなくポストバックします。

__doPostBack('myUpdatePanelId','')

*注：2番目のパラメーターは追加のイベント引数用です

これが誰かを助けることを願っています！

編集：だから、私が入力していたのと同じアドバイスが上で与えられたようです:)

8
ErnieStings

__doPostBackを直接使用するのは、2000年代にすっかりです。 2018年にWebFormsをコーディングする人は誰でもGetPostBackEventReferenceを使用します

（もっと真剣に、これを完全性の答えとして追加します。__doPostBackを直接使用するのは悪い習慣です（通常、単一のアンダースコア接頭辞はプライベートメンバーを示し、ダブルはより普遍的なプライベートメンバーを示します）。またはこの時点で廃止されます。 ClientScriptManager.GetPostBackEventReference で完全にサポートされているメカニズムがあります。

BtnRefreshがUpdatePanel内にあり、ポストバックを引き起こすと仮定すると、GetPostBackEventReferenceを次のように使用できます（ inspiration ）：

function RefreshGrid() {
    <%= ClientScript.GetPostBackEventReference(btnRefresh, String.Empty) %>;
}
7
mlhDev

誰かがこれで問題を抱えている場合（私がそうだったように）、UseSubmitBehavior = "false"属性を追加することでボタンのポストバックコードを取得できます。ボタンのレンダリングされたソースを調べると、実行する必要のある正確なjavascriptが表示されます。私の場合、IDではなくボタンの名前を使用していました。

6
user489998

UpdateパネルのクライアントIDを__doPostBack関数に渡そうとしましたか？私のチームはこれを行って、更新パネルを更新しました。

__doPostBack(UpdatePanelClientID, '**Some String**');
2
Jeremy Bade

フォームの送信を強制するため、_doPostBack()を呼び出すことはできません。 PostBackでUpdatePanelを無効にしないのはなぜですか？

1
Alex Rodrigues

まず、更新パネルを使用しないでください。これらは、MicrosoftがWeb開発者のために作成した2番目に悪いものです。

次に、must更新パネルを使用する場合、UpdateModeプロパティをConditionalに設定してみてください。次に、ページに追加するAsp：Hiddenコントロールにトリガーを追加します。変更イベントをトリガーとして割り当てます。 dragstopイベントで、非表示のコントロールの値を変更します。

これはテストされていませんが、理論は正しいようです...これが機能しない場合は、asp：buttonで同じことを試して、display：noneスタイルを設定し、changeイベントの代わりにclickイベントを使用できます。

1
phairoh