代码之家  ›  专栏  ›  技术社区  ›  Rush Frisby

使用javascript或jquery手动更新updatepanel

  •  12
  • Rush Frisby  · 技术社区  · 14 年前

    是否可以使用javascript或jquery手动更新updatepanel?

    我的网页顶部有一个文本框。当用户离开该文本框时,我希望运行一些服务器代码(它将向我的数据库中添加一条记录),然后在页面底部有一个更新面板,该面板将被刷新。updatepanel有一个gridview,其中将添加一个记录条目)

    8 回复  |  直到 9 年前
        1
  •  21
  •   Azhar    14 年前

    只需调用这个javascript函数。这里updatepanel1是updatepanel的ID

     <script type="text/javascript">
    
                var UpdatePanel1 = '<%=UpdatePanel1.ClientID%>';
    
                function ShowItems()
                {
                   if (UpdatePanel1 != null) 
                   {
                       __doPostBack(UpdatePanel1, '');
                   }
                }       
    
            </script>
    
        2
  •  12
  •   Howli    10 年前

    我想我得到了答案…必须在更新面板中创建隐藏按钮,然后调用

    __doPostBack('<%= Button.ClientID %>','');
    
        3
  •  9
  •   Culme    9 年前

    虽然这是一个古老的问题,但我认为它值得再提一个解决方案。

    如果您不希望依赖隐藏的按钮或虚幻的\ 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”感觉像一个黑客。-)

        4
  •  3
  •   Rony    13 年前

    在我的例子中,答案是使用唯一的ID。 clientid不起作用。

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

    这很管用。别问我为什么。

        5
  •  1
  •   Marian Schutz    11 年前

    为异步回发创建函数:

        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);
        }
    

    在需要时调用此函数(在Click事件、Load事件等中):

     __doPostBackAsync("UpdatePanel1", "");
    

    在codebehind页中,加载检查异步回发并更新所需的更新面板:

    if (scriptManager.IsInAsyncPostBack)
    {
          if (Request["__EVENTTARGET"] == UpdatePanel1.ID)
          {
             ...
    
             //Do update
             UpdatePanel1.Update();
          }
    }
    
        6
  •  0
  •   itfake    10 年前

    您只需要在更新面板中触发的控制开关上调用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>
    
        7
  •  0
  •   Alexandre N.    9 年前

    这对我很有用:

    <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(); }
    }
    
        8
  •  -1
  •   MaciejLisCK    11 年前

    ASPX:

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_OnLoad" > ...
    

    CodeBehind:

    protected void UpdatePanel1_OnLoad(object sender, EventArgs e)
    {
        var rawArguments = Page.Request["__EVENTARGUMENT"];
        if(rawArguments != null)
        {
            var arguments = HttpUtility.ParseQueryString(rawArguments);
    
            switch (arguments["EventName"])
            {
                case "Event1":
                    var parameter1Value = arguments["parameter1"];
                    var parameter2Value = arguments["parameter2"];
                    break;
            }
        }
    }
    

    Javascript:

    function updatePanelPartialPostback(updatepanelId, eventName, parameters) {
        var parametersParsed = "EventName=" + eventName + "&";
    
        for (var propertyName in parameters) {
            parametersParsed += propertyName + '=' + parameters[propertyName] + '&';
        }
    
        __doPostBack(updatepanelId, parametersParsed);
    }
    
    
    updatePanelPartialPostback('<%= UpdatePanel1.ClientID %>', 'Event1', { parameter1: 'value1', parameter2: 'value2' });