使用 JavaScript 或 jQuery 手动更新 UpdatePanel答案

【问题标题】：Update an UpdatePanel manually using JavaScript or jQuery使用 JavaScript 或 jQuery 手动更新 UpdatePanel
【发布时间】：2011-03-30 06:15:39
【问题描述】：

是否可以使用 JavaScript 或 jQuery 手动更新 UpdatePanel？

我的页面顶部有一个文本框。当用户离开该 TextBox 时，我想运行一些服务器代码（它将向我的数据库添加一条记录），然后在页面底部我有一个 UpdatePanel，它将被刷新。 UpdatePanel 有一个 GridView，它将为记录添加一个条目）

【问题讨论】：

标签： javascript jquery asp.net .net updatepanel

【解决方案1】：

只需调用这个 javascript 函数。这里 UpdatePanel1 是更新面板的 ID

 <script type="text/javascript">

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

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

        </script>

【讨论】：

【解决方案2】：

我想我得到了答案...必须在 UpdatePanel 中创建一个隐藏按钮，然后调用

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

【讨论】：

【解决方案3】：

虽然是一个老问题，但我认为它值得一提。

如果您不希望依赖隐藏按钮或虚幻的 __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 感觉就像一个 hack。 :-)

【讨论】：

【解决方案4】：

嗯，就我而言，答案是使用 UniqueID。 ClientID 无效。

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

这非常有效。不要问我为什么。

【讨论】：

【解决方案5】：

为异步回发创建函数：

    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", "");

在代码隐藏 Page_Load 中检查异步回发并更新所需的 UpdatePanel：

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

         //Do update
         UpdatePanel1.Update();
      }
}

【讨论】：

【解决方案6】：

您只需要在您在 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>

【讨论】：

【解决方案7】：

这对我有用：

<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】：

ASPX：

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

代码隐藏：

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

【讨论】：