I'm having trouble with updating an ASP:UpdatePanel using javascript (jQuery). Here're what I have.
I'm using the hidden button trick as I seem not the be able to get the ClientID of the update panel for a __doPostBack trick).
<asp:UpdatePanel runat="server" ID="pnlUpdate">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpdate" />
</Triggers>
<ContentTemplate>
<asp:UpdateProgress runat="server" AssociatedUpdatePanelID="pnlUpdate" DynamicLayout="false" DisplayAfter="100">
<ProgressTemplate>
<img alt="Laddar..." src="img/loader.gif" width="16" height="11"/>
</ProgressTemplate>
</asp:UpdateProgress>
<div style="display:none;">
<asp:Button runat="server" ID="btnUpdate" CommandName="Refresh" CommandArgument='<%# Eval("Id") %>'/>
</div>
<asp:Repeater runat="server" Id="rptrEnquiry">
...
</asp:Repeater>
<%= DateTime.Now.ToString() %>
Fire!
</ContentTemplate>
</asp:UpdatePanel>
In the codebehind that handles the btnUpdate (in a GridView RowCommand) the rptrEnquiry is rebound when btnUpdate is pressed.
If I press the button directly (while not hidden) everything works perfectly (updateprogess is shown and date updated and repeater updated.
But if I click the fire link and trigger the button through javascript only the date is updated but the updateprogress isn't shown and the repeater isn't rebound. While debugging I can see that the rebound code is executed but it's effect isn't in the update.
Ok, so I mangaged to solve my problems by totally rebuilding the whole thing. A few lessons learned that might help someone else:
I'm having the updatepanel in a gridview, when I sepparated the updatepanel part into a control of it's own most of my problems was solved, such as not beeing able to reference pnlUpdate.
http://encosia.com/2007/10/24/are-you-making-these-3-common-aspnet-ajax-mistakes/ was very helpful.
Updates in the update panel is controlled in it's PreRender. By using __EVENTTARGET only the panel we're interested in, is updated.
protected void pnlUpdate_PreRender(object sender, EventArgs args)
{
if (Request["__EVENTTARGET"] == pnlUpdate.ClientID)
{
PreBind();
switch(Request["__EVENTARGUMENT"])
{
case "toggle":
Toggle();
break;
case "purchase":
Purchase();
break;
case "update":
/* nop */
break;
}
Bind();
}
}
To get the __EVENTTARGET to have the proper clientId (it's empty string if using a button) I needed to fire of the panel update using javascript:
<a href="javascript:__doPostBack('<%= pnlUpdate.ClientID %>','toggle');">
<img runat="server" ID="imgToggle" src="~/img/grid_plus.gif" title="Expandera" alt="" width="14" height="14"/>
</a>
Have you tried something like this? (Taken from Easily refresh an UpdatePanel, using JavaScript).
there’s an easy method for triggering
a postback targeted at the
UpdatePanel: __doPostBack().
As long as the event target of a
__doPostBack() call is an async trigger of an UpdatePanel, the ASP.NET
AJAX framework will intercept the
postback and fire a partial postback
instead.
<a href="#" onclick="__doPostBack('<%= pnlUpdate.ClientID %>', '');"/>
Related
I am having one master page that has one update panel.
Content place holder is within the update panel
Now i have child page which has a File upload control
To make work File upload control, i have to put Postback trigger.
But question is where i can put that Postback trigger ??
If i put Postback trigger in Master page than it will give me error that control does not found
and i can't put Postback trigger because child page has not other update panel
What is the solution for this problem ?
Simply wrap the FileUpload with an UpdatePanel, which don't do anything and hasn't any side effect but will solve the problem.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnSubmit" runat="server" Text="Button" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnSubmit" />
</Triggers>
</asp:UpdatePanel>
Perhaps I misunderstood the control, or very possibly am not implementing it correctly, but I've used a ModalPopupExtender much like I'd like to use a MessageBox in desktop development. The problem I'm running into is that once I call the Show() method of the ModalPopupExtender it continues to execute the server side code despite the fact that the user has not yet clicked the button set as the OkControlID. Is this the normal behavior, and or is there a way to hault code execution until the OkControlID has been clicked. To specify, I don't want to create another event in the button click handler as this popup is inline. Here is my code - any advice is appreciated.
My Control:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ModalMessage.ascx.cs" Inherits="LB.ModalMessage" %>
<asp:Button ID="btnPopup" runat="server" style="display: none;"/>
<ajaxToolkit:ModalPopupExtender ID="ModalMessageExtender" runat="server"
OkControlID="btnOkay" PopupControlID="Panel1"
TargetControlID="btnPopup" BackgroundCssClass="modalPopupBG">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel CssClass="whitebubble" ID="Panel1" style="display: none; max-width:400px;" runat="server">
<div style="padding:5px 5px 35px 5px;">
<asp:Label ID="lblMessage" Font-Size="Medium" runat="server" ForeColor="Black"/>
<br />
<asp:Button runat="server" Text="Ok" Width="75px" Height="30px" ID="btnOkay" CssClass="modalButton gray modalButton"/>
</div>
</asp:Panel>
The control code behind:
public void ShowMessage(string message)
{
this.lblMessage.Text = message;
ModalMessageExtender.Show();
}
My content page:
<%# Register Src="~/ModalMessage.ascx" TagName="ModalMessage" TagPrefix="mm" %>
<mm:ModalMessage runat="server" ID="mpeMessage"/>
My content code behind:
mpeMessage.ShowMessage("Please enter a username before attempting to reset your password.");
UPDATE:
Sorry for the lack of clarity - let me make my question more clear. If I do the following:
mpeMessage.ShowMessage("Please enter a username before attempting to reset your password.");
Response.Redirect("Register.aspx");
The redirect occurs and the ModalPopupExtender never gets shown. I'm somewhat new to web development so please forgive me if I'm using incorrect terminology. But essentially, I want the execution of code in the code behinds to wait for the user to click "Ok". I'm trying to replace something like this:
ScriptManager.RegisterStartupScript(this, typeof(string), "Message", "alert('Your new account has been created!'); window.location='" + continueUrl + "';", true);
With something a little nicer looking, and since I'm already doing a postback anyway, I thought calling the ModalPopupExtender programmatically would be fine. Hopefully this clears up my question. Thank you all for your responses so far.
You can use validation controls , to check whether the fields are properly filled or not
for more details check the following links:
http://www.w3schools.com/aspnet/aspnet_refvalidationcontrols.asp
http://msdn.microsoft.com/en-us/library/aa479013.aspx
If i am understanding your query correctly then you want that until user does not click on "ok" button on modelpopup, user should not be able to click on page.
if you want this then add PopupDragHandleControlID="Panel1" in your modelpopup control.
<ajaxToolkit:ModalPopupExtender ID="ModalMessageExtender" runat="server"
OkControlID="btnOkay" PopupControlID="Panel1" PopupDragHandleControlID="Panel1"
TargetControlID="btnPopup" BackgroundCssClass="modalPopupBG">
</ajaxToolkit:ModalPopupExtender>
UPDATE
just replace Response.Redirect("Register.aspx"); to btnOkay click event.
on aspx page -
<asp:Button runat="server" Text="Ok" Width="75px" Height="30px" ID="btnOkay" OnClick="btnOkay_Click" CssClass="modalButton gray modalButton"/>
on aspx.cs page -
protected void btnOkay_Click(object sender, EventArgs e)
{
Response.Redirect("Register.aspx");
}
then until user will not click on "Ok" button. he/she can't redirect to Register Page.
I have this code in my aspx page:
<form id="form2" runat="server">
<asp:ScriptManager ID="ItemsScriptManager" runat="server" EnablePartialRendering="true" />
<asp:Button runat="server" ID="SearchButton" OnClick="ItemsSearch" Text="Search" />
<asp:UpdatePanel runat="server" ID="ItemsUpdatePanel">
<ContentTemplate>
<asp:ObjectDataSource runat="server" ID="ItemsDS"
TypeName="TemplateGridViewODSPagingSorting.ItemDAO" SelectMethod="GetItems" />
<asp:GridView runat="server" ID="ItemsGridView" DataSourceID="ItemsDS"
AllowPaging="true" AllowSorting="true" PageSize="4">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</form>
By pressing on another page of the GridView the Page_Load is triggered, is this normal behavior for a partial postback?
Partial rendering using UpdatePanel does not change or affect the whole Page life cycle in ASP.NET.
it's a small trick used to re-render only a certain region of the page in the browser (the UpdatePanel) but nothing else change, so yes, it's normal to see Page_Load and all other events to be triggered as usual; it has to be like that or it would not work :)
Yes, the during update panel update, the page_load will be called with every asynchronous postback to the server, to overcome this, you can use jquery ajax.
My page contains a Repeater that is loaded with data asynchronously as the data becomes available, using an UpdatePanel to manage the asynchronous requests.
The page contains something a little like this:
<asp:UpdatePanel ID="DataUpdatePanel" runat="server">
<ContentTemplate>
<table>
<asp:Repeater ID="RepeaterBlock" runat="server">
<HeaderTemplate><thead><tr><th>Name</th><th>Status</th><th class="empty"></th></tr></thead></HeaderTemplate>
<ItemTemplate><tr>
<td><a class="link" href="Detail.aspx?item=<%# DataBinder.Eval( Container.DataItem, "Name") %>"><%# DataBinder.Eval( Container.DataItem, "Name") %></a>
</td>
<td><%# DataBinder.Eval( Container.DataItem, "Status") %></td>
<td class="no-border">
[<asp:LinkButton CommandName='Schedule' CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Name") %>' ID="ScheduleButton" runat="server" CausesValidation="false" >Schedule</asp:LinkButton>]
</td>
</tr></ItemTemplate>
</asp:Repeater>
</table>
</ContentTemplate>
</asp:UpdatePanel>
The problem being that the LinkButton does not appear to trigger a postback of any kind- there is no visible response to clicking on it and putting a break point on the event listener in the codebehind, it is never triggered.
I have tried manually adding a Trigger like this:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ScheduleButton" />
</Triggers>
But unfortunately becausee the controls are within the ContentTemplate it crashes out if I try to do that.
Another avenue I have explored is to explicitly add them in the codebehind:
RepeatData.DataBind();
RepeatData.ItemCommand += new RepeaterCommandEventHandler(RepeatData_ItemCommand);
UpdateScripts.RegisterAsyncPostBackControl(FindControlRecursive( RepeatData, "SchedulButton"));
The FindControlRecursive method just behaves like FindControl only it actually finds controls.
That doesn't crash out, but it also doesn't cause the LinkButtons to become effective.
Can anyone suggest what I need to do to cause them to post back as I expect them to?
Edit: Originally I had this page working without the UpdatePanel and it worked fine, with more data it started timing out, so I needed to obtain the data asynchronously. It was when I made this change that the linkbuttons ceased working.
You need to register all your link buttons to OnCommand with a server side event handler to use the CommandName / CommandArg properties.
[<asp:LinkButton CommandName='Schedule' CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Name") %>' ID="ScheduleButton" runat="server" CausesValidation="false" OnCommand="LinkButtonCommandEventHandler" >Schedule</asp:LinkButton>]
See msdn reference:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.linkbutton.commandname.aspx
You need either <asp:Repeater ID="RepeaterBlock" runat="server" OnItemCommand="RepeaterData_ItemCommand">
or RepeatData.ItemCommand += new RepeaterCommandEventHandler(RepeatData_ItemCommand); in each postback before RepeatData.DataBind();
I have the following ASPX code:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" ID="UpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button runat="server" ID="UpdateButton1" OnClick="NextImg_Click" Text="Update" />
<asp:Repeater runat="server" ID="urlsUpdateRepeater">
<ItemTemplate>
<!-- THIS WOULD BE A LOOP FROM HERE -->
<!-- OPENS RESULT ITEM DIV CONTAINER -->
<div id="result_item">
<a href="<%# Eval("myUrl") %>" target="_blank">
<%# Eval("urlPageTitle")%></a>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
I have a NextImg_Click() event which works fine.
I use this code for DataBind... what is the Update method?
urlsUpdateRepeater.DataSource = resultsCollection;
urlsUpdateRepeater.DataBind();
Everything would appear to be in order. But every time the Update button is clicked it re-renders the whole page instead of the partial-postback UpdatePanel only.
It is driving me completely mad as I can't see anything wrong with the code. Is there some simple thing I'm missing?! Please help!
The search and data is displayed correctly (inside the panel) it just will not do a partial postback.
Appreciate your help with my noob problems!
Because the button is inside your UpdatePanel's ContentTemplate, it is unnecessary to take any extra action to get a partial page postback.
Try removing the line from your Page_Load() method.
Taken from MSDN:
Use the RegisterAsyncPostBackControl
method to register controls outside an
UpdatePanel control as triggers for
asynchronous postbacks, and to
potentially update the content of an
update panel. To update an UpdatePanel
control programmatically, call the
Update method.
So, you're control (UpdateButton1) is inside the UpdatePanel, no need for the ScriptManager1.RegisterAsyncPostBackControl call - ditch it and your problem is solved.
The problem was that my <form> tag was nested further into the document than it's corresponding end tag (with Warning!)...
Upon moving my form tag - it worked!
Entirely my fault, thanks guys.