web-dev-qa-db-ja.com

JavaScriptまたはjQueryを使用してUpdatePanelを手動で更新します

JavaScriptまたはjQueryを使用してUpdatePanelを手動で更新することは可能ですか？

私が持っているのは私のページの上部にあるTextBoxです。ユーザーがそのTextBoxを離れると、サーバーコードを実行したい（データベースにレコードが追加されます）。ページの下部に、更新されるUpdatePanelがあります。 UpdatePanelには、追加されたレコードのエントリを持つGridViewがあります）

javascriptjqueryasp.net.netupdatepanel
12
Rush Frisby

このjavascript関数を呼び出すだけです。ここで、UpdatePanel1はupdatepanelのIDです。

 <script type="text/javascript">

            var UpdatePanel1 = '<%=UpdatePanel1.ClientID%>';

            function ShowItems()
            {
               if (UpdatePanel1 != null) 
               {
                   __doPostBack(UpdatePanel1, '');
               }
            }       

        </script>
21
Azhar

私は私の答えを得たと思います... UpdatePanelで隠しボタンを作成してから呼び出す必要があります

__doPostBack('<%= Button.ClientID %>','');
12
Rush Frisby

古い質問ですが、もう1つの解決策について言及する価値があると思います。

非表示のボタンや幻想的な__doPostBackに依存したくない場合は、次のページで説明されているように、「ClientScript.GetPostBackEventReference」のオプションがあります。

http://www.4guysfromrolla.com/articles/033110-1.aspx

つまり、UpdatePanelが次のように宣言されている場合：

<asp:UpdatePanel ID="MyUpdatePanel" runat="server">...</UpdatePanel>

次に、JavaScriptで、このサーバーサイドコードによって生成されたスクリプトを呼び出すことができます。

ClientScript.GetPostBackEventReference(MyUpdatePanel, "")

したがって、aspxページには次のようなものがあります。

function MyJavaScriptFunction(){
   doSomeStuff();
   <%=ClientScript.GetPostBackEventReference(MyUpdatePanel, "")%>
}

<％と％>の間のコードは、ページが解析されるときに実際のjavascript呼び出しに置き換えられるため、ブラウザーでページのソースコードを表示することでコードを確認できます。

他の返信よりも簡単ではないかもしれませんが、余分な要素が導入されておらず、__ doPostBackがハックのように感じられるので私はそれを好みます。 :-)

9
Culme

私の場合、答えはUniqueIDの使用でした。 ClientIDが機能しませんでした。

 __doPostBack("<%=btnTest.UniqueID %>", "");

これは完全に機能します。理由を聞かないでください。

3
Rony

非同期ポストバックの関数を作成します。

    function __doPostBackAsync(eventName, eventArgs) {
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        if (!Array.contains(prm._asyncPostBackControlIDs, eventName)) {
            prm._asyncPostBackControlIDs.Push(eventName);
        }

        if (!Array.contains(prm._asyncPostBackControlClientIDs, eventName)) {
            prm._asyncPostBackControlClientIDs.Push(eventName);
        }

        __doPostBack(eventName, eventArgs);
    }

必要な場所（クリックイベント、ロードイベントなど）でこの関数を呼び出します。

 __doPostBackAsync("UpdatePanel1", "");

Codebehind Page_Loadで、非同期ポストバックを確認し、必要なUpdatePanelを更新します。

if (scriptManager.IsInAsyncPostBack)
{
      if (Request["__EVENTTARGET"] == UpdatePanel1.ID)
      {
         ...

         //Do update
         UpdatePanel1.Update();
      }
}
1
Marian Schutz

UpdatePanelでトリガーしたコントロールウィッチでchange（）を呼び出す必要があります。

例えば：

  <asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="updatePanel1" ChildrenAsTriggers="True">
    <ContentTemplate>
      <asp:DropDownList ID="ddl" runat="server" Visible="true" AutoPostBack="true" CssClass='someClass' />
    </ContentTemplate>
    <Triggers>
     <asp:AsyncPostBackTrigger ControlID="ddl" EventName="SelectedIndexChanged" />
    </Triggers>
  </asp:UpdatePanel


<script>          
  $(".someClass").change();
 </script>
0
itfake

これは私のために働きます：

<asp:UpdatePanel id="pnl" UpdateMode="Conditional" runat="server">
 <contentemplate>
    <div>...your content...</div>
     <div style="display: none; line-height: 0pt;">
        <asp:Button id="btnUpdate" runat="server" UseSubmitBehavior="false"  />
     </div>
</contentemplate>
</asp:UpdatePanel>

JavaScript：

function doUpdate()
{
  var btn = document.getElementById("<%#= btnUpdate.ClientID %>");
  if(btn != null) { btn.click(); }
}
0
Alexandre N.