Friday, March 23, 2012

UpdatePanel Progress Emulation or How to show "Progress" information when we need to generate full postback (by PostBackTrigger) in the UpdatePanel

Initial data
We have an UpdatePanel. In this UpdatePanel we have two buttons. By clicking each button application does something. Also we have an UpdateProgress for the UpdatePanel. BUT one button generate full PostBack.
<%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="UpdatePanelProgressEmulation._Default" %>
<%-- It is registration for a web user control that include presentation layout of our progress information. --%>
<%@ Register src="Preloader.ascx"  tagname="Preloader" tagprefix="uc1" %>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManagerMain" unat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanelMain" runat="server">
        <Triggers>
            <%--Register our full postback action for button--%>
            <asp:PostBackTrigger ControlID="btnWithPostBackTrigger" />
        </Triggers>

        <ContentTemplate>
            <%--UpdateProgress - uses ucPreloader. As in the above code.--%>
            <asp:UpdateProgress ID="UpdateProgressMain" EnableViewState="false"    AssociatedUpdatePanelID="UpdatePanelMain" runat="server">
                <ProgressTemplate>
                    <uc1:Preloader    ID="ucPreloader" ClientIDMode="Static"   runat="server" />
                </ProgressTemplate>
            </asp:UpdateProgress>
       
            <asp:Button runat="server" ID="btnWithoutPostBackTrigger" Text="Button without PostBackTrigger " BackColor="#006600" BorderStyle="Solid" BorderColor="#003300" ForeColor="White"/>
            <asp:Button runat="server" ID="btnWithPostBackTrigger" Text="Button with PostBackTrigger" BackColor="#CC0000" BorderStyle="Solid"  BorderColor="Maroon" ForeColor="White" />
          
        </ContentTemplate>
       
    </asp:UpdatePanel>
</asp:Content>

The code of the Preloader.ascx used to show progress info:
<%--A simple Div that shows us "Loading" message.--%>
<div style="top:150px; width:100%; left:0px; display:block;position:fixed; z-index:2000;" align="center" >
    <table style=" width:600px; height:200px; z-index:2002; background-color:#f9f9f9; border-style:solid; border-color:Grey; ">
        <tr>
            <td valign="middle" align="center">
                <h1 style=" color:Navy">Loading: 5000 milliseconds...</h1>
            </td>
        </tr>     
    </table>
</div>

So, if we click this button with a full PostBack action - we don't see any Progress. If we click the button without the full PostBack action - we see this progress information. But it is not friendly for user, because in one time he sees progress info, in another time he doesn't see it. It would be much better if user has ability to see progress information for each situation.

Investigation
There are many ways to solve this situation. But I select simplest way, as for me. And it is emulation of the showing of the progress info for Update Panel.

Solution 
The idea – to run JavaScript code by clicking our FullPostBack button. In any cases this code will be runned and will be executed before a moment when request of our page will be send to server and will be back.  We click button – and by JavaScript shows ProgressInfo. And until  request don’t return from the server – we see our ProgressInfo. Also we don’t need to think how to hide our ProgressInfo, because when our request returns from server – we will have reRander of our page and it will hide our ProgressInfo automatically.

Code in aspx file…
<div id="divPreloader" style="visibility:hidden;">
      <uc1:Preloader    ID="ucPre"  runat="server" />
</div>

Add this code above somewhere outside of the UpdatePanel.  The purpose of this code – to show  our progressinfo for our  FullPostBack. I placed it  above UpdatePanel. We will find this div by JavaScript and will show it. Yes, if you want you can find Preloader that is used by UpdatePanel inside. But I  prefer to have separate div for this.

And add OnClientClick="ShowProgress('divPreloader')" to our btnWithPostBackTrigger. ShowProgress – it is our JavaScript function that will show what we need.

Code in .vb file
Private Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        Dim PageLoadedHandlerScript As String = " function getObject (sId) { if(!sId) return null; else if (document.all && document.all[sId])  return document.all[sId];  else if (document.getElementById)  return document.getElementById(sId); else return null;}" _
         & " function ShowProgress(sId) { var dP = getObject(sId); if (dP != null) { dP.style.visibility = 'visible'; } }"
        Page.ClientScript.RegisterClientScriptBlock(Me.GetType, "getObjectScript", PageLoadedHandlerScript, True)
        btnWithPostBackTrigger.OnClientClick = "ShowProgress('divPreloader')"
End Sub

In this code we register our JavaScript on the page. There are two functions – the first function finds DOM element by id or name. The second function is our ShowProgress function that is used by btnWithPostBackTrigger. You can use your own JavaScript and jQuery if you need. 

That’s all. Hope it will help you.
to sources >>

32 comments:

  1. Robotic Pool Cleaners are the next generation of automatic pool cleaners and are increasingly becoming the pool cleaner of choice. Robot vacuum cleaners offer convenience and produce great results. Simply plug the robotic cleaner into an outlet (GFCI protected ofcourse), place the cleaner in the pool, and turn it on. The robotic cleaner moves along the bottom of the pool, climbs the walls and most stairs clean

    ReplyDelete
  2. Point by point data about Ezekiel Akande, a Pain Management expert in Somerset KY, including diagram, specialist profile, clinical licenses, subsidiary

    ReplyDelete
  3. Great blog here! Also your site a lot up fast! What web host are you the use of? Can I get your associate hyperlink for your host? I want my website loaded up as quickly as yours lol카지노사이트

    ReplyDelete
  4. Very well written article. It will be valuable to anyone who employess it, including me. Keep up the good work – looking forward to more posts.카지노사이트

    ReplyDelete
  5. 카지노사이트핫Good to become visiting your weblog again, it has been months for me. Nicely this article that i've been waited for so long. I will need this post to total my assignment in the college, and it has exact same topic together with your write-up. Thanks, good share . Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our. Come here and read it once

    ReplyDelete
  6. The Big cartel eCommerce stage is an extremely simple to utilize eCommerce stage controlled by large cartel designers, craftsmen, specialists, and originators. It has numerous extraordinary highlights that make it one of the strong eCommerce stages in the commercial center. The primary highlights of huge cartel eCommerce stage are given beneath:

    Extremely valuable for imaginative spaces of online organizations like music, style, garments, and others
    Extremely simple to utilize eCommerce stage
    Extraordinary request the executives and stock administration capacities
    Inherent website improvement abilities
    Simple to coordinate with virtual entertainment investigation apparatuses and stages
    Upholds strong customization highlights
    Adaptable valuing alongside a FREE fundamental membership
    Proficient grade client service>> ecommerce software development company

    ReplyDelete
  7. Learn about possibilities and limitations with the great features of our excellent grader. A lot of students don't have attention to their grades because they are not interested in them, so they might end up with lower grades. This proper noun checker can help you raise your grades by just 8 points each time, so you will get an increase in your average grade over time.

    ReplyDelete
  8. I was searching some information about UpdatePanel Progress Emulation on google yesterday. Then a friend of mine sent me a link to this post. I have carefully read the information given on this link. In the middle of that post, I got information about a tool from the part of speech checker website. I also tried using that tool. I like that tool. I also share this tool with my friend.

    ReplyDelete
  9. I was searching about UpdatePanel for many days. My friend also knew about this. He shared a link of this post with me. Through this post, I got excellent information about correct conjunction websites. I came to know that by using this website we can improve our English. I started improving my English through this website.

    ReplyDelete
  10. I often get good information from your posts. Let me also tell you that a complicated sentence generator is a sentence generator designed to be fast and easy to use, which can generate complex sentences from simple and easy words. You can select a word from the filled yellow box and paste it into the text box and create multiple words, combine them with existing words, or add new words that you want to create.

    ReplyDelete
  11. Improving your grammar skills doesn't have to be a chore. With the many online resources available, you can quickly and easily learn the ins and outs of proper grammar. From grammar checkers to sentence breakdown tools, these resources can help you master the fundamentals of sentence structure, punctuation, and more. Take advantage of these free resources to become a more confident and effective writer. correct grammar online

    ReplyDelete
  12. Hello! Clear your text of all noun errors with our proper noun checker. Now your mistakes will be fixed in just a couple of minutes thanks to the precise features of our tool. You can not only check nouns but also correct all grammatical, spelling and punctuation errors!

    ReplyDelete
  13. Hello! To effectively train your AI to work with pictures and recognize the objects you are interested in on them, you need our training and information description specialists who will teach your AI to accurately work with annotation pictures, semantic parts in pictures of any complexity, road markings or any other type of information

    ReplyDelete
  14. Hey anyone wants to know how to generate full postback. If yes then you must read this post for getting more information about this topic. I also get some helpful hints from this post. They also mentioned about sentence subject finder tool in between of their post. I opened that tool and start using it. It helps us to improve our mistakes in pronouns.

    ReplyDelete
  15. Thanks for sharing the information keep updating, looking forward to more post.
    Nice post ! I love its your site after reading ! thanks for sharing. I actually wanted to construct a word to be able to appreciate you for the splendid items you are posting on this site. Very well written article. It will be valuable to anyone who employ it, including me. Keep up the good work – looking forward to more posts.
    evidence for protective order virginia
    can police officer file protective order virginia

    ReplyDelete
  16. This product is very like CRM arrangements, yet comes a lot greater than that and gives a significantly more thorough scope of administrations, including client communication errands and overseeing different inner cycles of the organization.

    Quite, as per the Scene Counseling Gathering 2020 report, 93% of organizations that went to ERP arrangements noticed its positive effect on their organizations. No big surprise that ERP counseling organizations are popular these days, and the worldwide market for ERP counseling will arrive at $86B by 2027, as per the figure of 2019 United Statistical surveying>> erp software consulting

    ReplyDelete
  17. Wonderful message you shared here. It was very well authored and easy to understand.DUI Lawyer Amelia VA

    ReplyDelete
  18. Add character to your kitchen design with a wide range of kitchen cabinet doors and drawer fronts.

    ReplyDelete
  19. We are renowned for providing our patients with the most reasonably priced, painless medical care they have loved for years.

    ReplyDelete
  20. Sharing your cell phones can be risky. But with I-Cell Station's trustworthy services,

    ReplyDelete
  21. A blog is a discussion or informational website published on the World Wide Web

    ReplyDelete
  22. Constructing a house in DHA (Defence Housing Authority) Karachi is a popular dream

    ReplyDelete
  23. Digital Marketing USA, a digital marketing agency in USA,

    ReplyDelete
  24. We deliver big ideas and even bigger results with more agility and efficiency than larger digital agencies.

    ReplyDelete
  25. Hence, people miss out on the most essential part of the sales process.

    ReplyDelete
  26. E-Biz, a leading digital marketing agency, commenced its journey in Ireland as a Printing

    ReplyDelete
  27. We aim to work in partnership with our clients and build a good working

    ReplyDelete
  28. Our team has experience bringing in both e-commerce sales as well as service leads.

    ReplyDelete
  29. This comment has been removed by the author.

    ReplyDelete
  30. A clever solution to ensure consistent progress display, even during full postbacks! Your use of JavaScript to manage the progress information provides a seamless user experience. Thanks for sharing this helpful technique. Impugnado Divorcio Estado de Nueva York

    ReplyDelete
  31. To emulate progress in an UpdatePanel when using a PostBackTrigger for a full postback, consider incorporating visual elements like loading spinners. Use JavaScript to trigger these visuals during postbacks, providing users with a visual cue that an operation is in progress. This enhances user experience by conveying ongoing activity during full page updates. Your blog packs a punch in just a few sentences. Your words are like gems. Thank you for sharing this! A quick, delightful read that left me inspired.divorce laws in virginia

    ReplyDelete
  32. UpdatePanel Progress can be customized to match the application's design and functionality, improving overall usability and responsiveness. By implementing UpdatePanel Progress, developers can create more dynamic and engaging web applications that effectively communicate the status of asynchronous operations to users. Truck accidents attorneys

    ReplyDelete