Ok, i renew my question.
Can I use UpdatePanel to handle this way.
You know, everything in the ContentTemplate, will be async, but how we handle the result before the result comes.
like
<asp:UpdatePanel>
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" /><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Label ID="info" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
when we click the button, it will query the database in back-end, which need some time, maybe several seconds, maybe longer. now how can i make the info label to display "querying", indicate the processing in back-end, the visitor should be wait for some while.
use ProgressTemplateuse ProgressTemplateuse ProgressTemplateuse ProgressTemplate
Add update proggress to your update panel:
<asp:UpdatePanel id="myUpdatePanel">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" /><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ContentTemplate>
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="myUpdatePanel" runat="server">
<ProgressTemplate>
<asp:Label ID="info" runat="server" Text="querying..."/>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:UpdatePanel>
See more options and samples on MSDN.
Related
I am looking for an alternative where user doesnt has to wait for postback in an asp.net page.
My situation :
I have several drop down lists on my asp.net page (11 infact) and I have a checkbox. 2 drop downs are cascading. i.e. selecting 1st drop down changes the 2nd drop down contents. I have a new option in some of the dropdowns (6 drop downs). If user chooses this option then a text box shows up with a "Add" button. Adding text to that text box and hitting "Add" adds the new value to the drop down and disappears this textbox and the button. So is it possible for using a non postback option but have the same situation going on? User does not like that the page postbacks 11 times. What is my alternative? If you need more information, please ask. Thanks
EDIT:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="ddlCustomerContact" runat="server" DataTextField="FullName" DataValueField="Customers_SourceIDfk2" AutoPostBack="true" TabIndex="1" />
</ContentTemplate>
</asp:UpdatePanel>
Protected Sub ddlCustomerContact_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ddlCustomerContact.SelectedIndexChanged
If ddlCustomerContact.SelectedIndex = 1 Then
divAddNewCustomerContact.Visible = True
Else
divAddNewCustomerContact.Visible = False
End If
End Sub
Your only real option if you don't want standard postbacks would be AJAX. There are numerous frameworks available, so you can use the Microsoft framework (bundled in 3.5+) or jQuery (also bundled in VS 2010+, I believe).
There are other frameworks available, but those two are going to be the most tightly integrated. Other frameworks will require a little more work to implement.
This is how I use an update panel for a widget that I created.
<asp:DropDownList ID="ddlPayrollStores" runat="server" OnSelectedIndexChanged="ddlPayrollStores_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
<asp:UpdatePanel ID="UpdatePanelPayroll" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlPayrollStores" EventName="SelectedIndexChanged"></asp:AsyncPostBackTrigger>
</Triggers>
<ContentTemplate>
<div class="dragbox-content">
<asp:Label ID="lblLabelHours" runat="server" Text="Reg Hours: " Width="350px"></asp:Label>
<asp:Label ID="lblTotalHours" runat="server" Text=""></asp:Label>
<br />
<br />
<asp:Label ID="lblLabelOverTime" runat="server" Text="Total Overtime Hours: " Width="350px"></asp:Label>
<asp:Label ID="lblTotalOvertime" runat="server" Text=""></asp:Label>
<br />
<br />
<asp:Label ID="lblLabelHoliday" runat="server" Text="Total Holiday: " Width="350px"></asp:Label>
<asp:Label ID="lblTotalHoliday" runat="server" Text=""></asp:Label>
<br />
<br />
<asp:Label ID="lblLabelVacation" runat="server" Text="Total Vacation: " Width="350px"></asp:Label>
<asp:Label ID="lblTotalVacation" runat="server" Text=""></asp:Label>
<br />
<br />
<asp:Label ID="lbllableTotalHours" runat="server" Text="Total Hours: " Width="350px"></asp:Label>
<asp:Label ID="lblTotalStoreHours" runat="server" Text=""></asp:Label>
<br />
<br />
<asp:Label ID="lblLabelPay" runat="server" Text="Total Pay: " Width="350px"></asp:Label>
<asp:Label ID="lblTotalPay" runat="server" Text=""></asp:Label>
<br />
<br />
<div style="align-content: center">
<asp:LinkButton ID="lbDetailed" runat="server" Text="Detailed Report" PostBackUrl="~/Reporting/Payroll/StorePayroll.aspx"></asp:LinkButton>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
This is for a payroll widget that shows the store's total payroll. So when I select which store I want to see with the drop down, the update panel will post back without posting back the entire page. In my case, it will just display numbers as labels. Hopefully this leads you in the right direction and possibly clears it up a bit.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ChatUserControl.ascx.cs"
Inherits="MetamorphismApp.ChatUserControl" %>
<asp:Timer ID="timer1" runat="server" OnTick="timer1_Tick" Interval="5000">
</asp:Timer>
<div id="divChatWindow" class="clChatWindow">
<div>
<asp:Label runat="server" Text='<%# Eval("username") %>' class="divHeader" ID="lblChatFriend"></asp:Label>
<asp:Image ID="imgFriend" runat="server" CssClass="classFriendImage" />
<asp:LinkButton ID="lbClose" runat="server" CommandName="Close" CssClass="lbClose"
OnClick="lbClose_Click">Close</asp:LinkButton></div>
<div class="chatText" id="idChatText" runat="server">
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timer1" EventName="Tick" />
<asp:AsyncPostBackTrigger ControlID="btnSendChat" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Repeater runat="server" ID="rpChatMessages">
<ItemTemplate>
<asp:Image ID="imageForFriend" runat="server" CssClass="clFriendsImage" ImageUrl='<%# "HttpImageHandler.jpg?username=" + DataBinder.Eval(Container.DataItem,"fromusername").ToString() %>' />
<asp:Label ID="chatMessage" runat="server" Text='<%# Eval("Message") %>'></asp:Label>
<br>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:TextBox ID="txtChatMessage" runat="server" Width="142px" CssClass="clChatMessage" EnableViewState="true"
TextMode="MultiLine"></asp:TextBox>
<asp:LinkButton ID="btnSendChat" runat="server" CommandName="Insert" CommandArgument='<%# Eval("username") %>'
OnClick="btnSendChat_Click" CssClass="btnSendChat">Send</asp:LinkButton>
</div>
I want to use updatepanel triggered by a timer control and after 5 seconds I get a sys.webforms error. I dont wanna populate my repeater using a webservice to be called via jquery and binding the data to the repeater. I want to use the updatepanel for data population. I have read several articles to avoid this error but havent found a solution yet. If I change asyncpostback trigger to postbacktrigger the page does a postback which I dont want to happen. I want to use updatepanel to solve this issue. What should I do?
It looks like you forgot to put ScriptManager control on your page.
I am getting error 503 status code. To my surprise if you are facing this error issue on the server then this issue is a server's issue and not your coding issue. Status 503 indicates that the server cannot fulfill the request and it gives this error. Try contacting your hosting provider.
I wrote the following
<asp:UpdatePanel ID="Download" runat="server">
<ContentTemplate>
<asp:Label ID="lblMessage" runat="server"
Text="Click the link to download the Report:"></asp:Label>
<asp:LinkButton ID="lbtnDownload" runat="server"
OnClick="lbtnDownload_Click" Text="Download Excel Sheet"></asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="lbtnDownload"/>
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="download1" runat="server" AssociatedUpdatePanelID="Download">
<ProgressTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl"indicator.gif" " />
</ProgressTemplate>
</asp:UpdateProgress>
But the progress bar image is not showing can any one tell why
Remove the following: <asp:PostBackTrigger ControlID="lbtnDownload"/>
Ok, first thing to check is that you are definitely posting back successfully, also add a delay interval:
<asp:UpdateProgress DisplayAfter="0" ID="download1" runat="server"
AssociatedUpdatePanelID="Download">
Im trying tp upload more than one image, and when each one I upload I will show it in a repeater, but in the code behind the FileUpload1.HasFile is always False , this is a piece of my code :
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional" >
<ContentTemplate>
<asp:Repeater ID="rpUploadedImages" runat="server">
<ItemTemplate>
<img src='../Images/<%# DataBinder.Eval(Container.DataItem, "ImagePath")%>'/><br />
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnupload" EventName="click" />
</Triggers>
</asp:UpdatePanel>
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<asp:Button ID="btnupload" runat="server" Text="Upload" onclick="btnupload_Click" />
The FileUpload control does not work with UpdatePanel, you will need to do a full post back to get the file on the server... Now there are a lot of tricks to make it ajaxy...
http://geekswithblogs.net/ranganh/archive/2008/04/01/file-upload-in-updatepanel-asp.net-ajax.aspx
Another tricky way is to create iframe with fileupload + submit button(or some trigger) inside your main form. iframe will postback with no effect to main page.
I have added two update panels to my page. I'm trying to update the first panel but not the second. The second panel contains validation controls which seem to be kicking in no matter what I try.
Code
<asp:ToolkitScriptManager runat="server" ID="ScriptManager" />
<asp:UpdatePanel ID="updatePnl" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:label ID="NoConsignments" runat="server" ForeColor="red" />
<br />
<asp:TextBox ID="StartDate" runat="server" /> <asp:TextBox ID="EndDate" runat="server" /> <asp:Button ID="Dates" OnClick="btDates" runat="server" Text="Search" />
<asp:calendarextender ID="Calendarextender2" targetcontrolid="StartDate" Format="dd/MM/yyyy" runat="server"></asp:calendarextender>
<asp:calendarextender ID="Calendarextender3" targetcontrolid="EndDate" Format="dd/MM/yyyy" runat="server"></asp:calendarextender>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Dates" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
I've left out some of the middle code of there is alot. If you would like any more code please let me know.
Am I missing something? or is this not the way that update panels should be used?
Thanks you so much for any help you can provide
I would guess that the validation controls in the second UpdatePanel are firing their client-side validation methods (so the update panel isn't posting back, which is correct).
You might be able to get around this by using the ValidationGroup property - assign the validation controls in the first update panel to one validation group (e.g. "ValidationGroupA"), and the validation controls in the second update panel to another validation group.
I haven't used UpdatePanels for a while, and you haven't included the mark up for the validators in the second panel.
However it looks to me like you might not be adding groups to your validation see this tutorial
e.g.:
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" ValidationGroup="First"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ValidationGroup="First" ErrorMessage="TextBox1 should not be blank"
ControlToValidate="TextBox1"/>
<asp:Button ID="Submit1" runat="server" ValidationGroup="First"
Text="Submit 1"/>
<asp:TextBox ID="TextBox3" runat="server" ValidationGroup="Second"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ErrorMessage=" TextBox3 should not be blank"
ControlToValidate="TextBox3" ValidationGroup="Second"/>
<asp:Button ID="Submit2" runat="server" ValidationGroup="Second"
Text="Submit 2"/>
</div>
</form>
</body>
Hope this helps and I haven't missed the point.
You have to specify ValidationGroups for your Buttons and Validators, f.e. Panel1 for your Searchbutton and Panel2 for your Validators in second UpdatePanel.
<asp:Button ID="Dates" ValidationGroup="Panel1" runat="server" Text="Search" />
....
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ValidationGroup="Panel2" ErrorMessage="RequiredFieldValidator"
ControlToValidate="TextBox1" />
</ContentTemplate>
</asp:UpdatePanel>