使用 JavaScript 或 jQuery 手动更新 UpdatePanel
Posted
技术标签:
【中文标题】使用 JavaScript 或 jQuery 手动更新 UpdatePanel【英文标题】:Update an UpdatePanel manually using JavaScript or jQuery 【发布时间】:2011-03-30 06:15:39 【问题描述】:是否可以?
我的页面顶部有一个文本框。当用户离开该 TextBox 时,我想运行一些服务器代码(它将向我的数据库添加一条记录),然后在页面底部我有一个 UpdatePanel,它将被刷新。 UpdatePanel 有一个 GridView,它将为记录添加一个条目)
【问题讨论】:
【参考方案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' );
【讨论】:
以上是关于使用 JavaScript 或 jQuery 手动更新 UpdatePanel的主要内容,如果未能解决你的问题,请参考以下文章
使用 Javascript/jQuery 更改 Telerik RadEditor 的值