Solved

How to create a preload for a Griedview in asp.net 2.0?

Posted on 2008-06-19
22
315 Views
Last Modified: 2013-11-26
HI,
I have this page:" View.aspx" This page have a "textbox" and a "button".The button's name is "Searchbtn" and the textbox's name is "Searchtxt". Also in the same page I have a panel named "panel1" which contain a griedview that I named. "GriedViewSearch".
When the page appears for first time the "Panel1" is invisble until the client input a name in the textbox and click the search button. Then the Panel1 will appear showing the GriedView with the best matches for whatever the client was looking for.
Everything happend in the page "View.aspx"  and all the controls are ASP. By the way teh griedview make a trip to the database to show whatever the client was looking for.

My problem is that the griedview take a long time to show up with the result so I need to create a control may be a gif animation or a swf animation to show  to the client while the page is going to the server and pulling the information. When the information is ready to be show and Panel1 is ready to appear then the gif animation will end and  the griedview will appear.

It is sore it off like a preload, so any ideas how to do that?

By the way I am using C#, asp.net 2.0 and Javascript

Thanks for your help!!! :) :)
0
Comment
Question by:eddyperu
  • 12
  • 5
  • 5
22 Comments
 
LVL 3

Expert Comment

by:McCoin
ID: 21822588
There are several things you can do and there are a lot of things to take into consideration.
If the query takes a long time you may want to look at optimizing the query or the database itself (for example puting indexes within the database).

You can consider using an AJAX approach to pull the data asynchronously so the user can still use the front end.
Using an animated Gif is very common and there is nothing wrong with that at all.

You could also consider Caching the data (if there isn't a significant amount of information). You could store a datatable, dataview, or something similar into a session variable or into viewstate (again if it's not too big). That way whenever you need to run a query against the data, you can just use what's in your variable instead of hitting the database again.

I hope that helps, if not, let me know and I'll see what I can do.
0
 
LVL 4

Author Comment

by:eddyperu
ID: 21823043
What do you think using the Progress Bar from AJAX, the only required to use this is to have an update Panel. Also I realized that the Textbox and the button are inside a Web User Control,  and that bring a lot of question.
1) After Wrapped my "GriedViewSearch" with an Update Panel, how Can I connect the button "Searchbtn" from my web user control to the Update Panel that contain "GriedViewSeach", remember this  GriedView is located in the view.aspx.

Would you mind to create an example how to do this...Thanks,

2)If you have time , Could you explain me more about this line:
"You can consider using an AJAX approach to pull the data asynchronously so the user can still use the front end. " , was you talking about the progress bar?

Thansk for your help one more time
0
 
LVL 4

Author Comment

by:eddyperu
ID: 21825358
I am adding my code so you can see what I am doing.
 I think that the really question is how can I trigger a button in my Web User Control to Update a Panel in my normal Page. Below you can see the logic what I am trying to do :

VIew.aspx:
    < UserControl that has a button "SearchButton" and a textbox, so the client can look for someone>
    <Update Panel, The "SearchButton" needs to come here and update this Panel>
         < GriedView, This is the information or result that is coming from a Database>
    </Update Panel is closing>

Thats it!!  Thanks for your help! :)
       
Web user Control:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ConnectingButton.ascx.cs" Inherits="ConnectingButton" %>

<asp:Button ID="SearchBtn" runat="server" Text="Button from Web User Control" />
 

Page VIEW.aspx:

  <UPC:ConnectingButton  ID="Connection" runat="server"/>

  <asp:UpdatePanel ID="UpdatePanel1" runat="server">

    <ContentTemplate> 

      //IN this space goes the GriedView but for now I am 

      //setting an label that catch the time from a click function

      <asp:Label id="lblTime" runat="server"></asp:Label>

      <asp:Button ID="Button1" runat="server" Text="Button in the page" 

       OnClick="Button1_Click" />

    </ContentTemplate> 

    <Triggers>

     <asp:AsyncPostBackTrigger ControlID ="Button1" EventName="Click" />

    </Triggers>         

  </asp:UpdatePanel>

  <asp:UpdateProgress ID="UpdateProgress1" runat="server">

      <ProgressTemplate>

           <img src="25-1.gif" /> Updating page ....

      </ProgressTemplate>

  </asp:UpdateProgress>
 

Code Behind C# in View.Aspx :

  protected void Button1_Click(object sender, EventArgs e)

    {

        System.Threading.Thread.Sleep(3000); 

        lblTime.Text = "Time " +

        DateTime.Now.ToString();    

    }

Open in new window

0
 
LVL 3

Expert Comment

by:McCoin
ID: 21825885
Here is a link that should give you exactly what you need.
http://msdn.microsoft.com/en-us/library/bb399001.aspx

The last example should be close to what you're looking for

I hope this helps
0
 
LVL 4

Author Comment

by:eddyperu
ID: 21825935
THanks, for your  fast anwer but That didn't help me.
They are giving examples of an update panel with a button which is in the same page triggering the update panel. I am not looking for that.

I am looking for a button that is set in a Web user Control that can trigger and Update Panel that is in the "View Page".

Thanks
0
 
LVL 3

Expert Comment

by:McCoin
ID: 21826519
No problem I'll do what I can.

There is a section in that link that is titled:
"Refreshing an UpdatePanel Control with an External Button "
which includes step by steps on how to apply the trigger.
in part it reads;
By default, a postback control (such as a button) inside an UpdatePanel control causes a partial-page update. By default, a button or other control outside an UpdatePanel control causes the whole page to be refreshed, as you have seen.

You can also configure a control outside the update panel to be a trigger that refreshes just the update panel.

Let me know if this helps

To refresh of an UpdatePanel control with an external button
0
 
LVL 4

Author Comment

by:eddyperu
ID: 21830711
Thanks for your fast answer but I think that we are talking about different issues here. I know about the update panel and the buttons that can be triggered inside the update panel or outside from the update panel. My question  is about a button that is inside a WEB USER CONTROL. You see, to trigger the update panel I need a button, this button is not in the page itself, it is inside the WEB USER CONTROL.

THAT IS COMPLETE DIFFERENT from the tutorial that you gave me. I know that I  need to change in somehowy this:
    <Triggers>
     <asp:AsyncPostBackTrigger ControlID ="Button1" EventName="Click" />
    </Triggers>

Where ControlID="Button1" need to be change for the BUtton ID that is inside the web user control. I was thinking that It can be domto do some javascript, but I don't know how.

Is this make sence?....Would you mind to write an example.It is more easy for me to understand it that way THANKS :)

0
 
LVL 3

Expert Comment

by:McCoin
ID: 21830808
I'll go ahead and try and pull in some additional help for you. I'll post a question that directs to your question and see if anyone has a more solid solution for you.
0
 
LVL 4

Author Comment

by:eddyperu
ID: 21831360
Thanks!! :)
0
 
LVL 33

Expert Comment

by:raterus
ID: 21832060
Your UserControl needs to define an Custom Event for this to take place.  Then inside the btnClick event handler in the UserControl, you raise the custom event, which is then bubbled up to the main page.

Then you attach this custom event to the AsyncPostBackTrigger.

If you post your usercontrol code, specifically the button click event, I'll show you what I mean.
0
 
LVL 4

Author Comment

by:eddyperu
ID: 21833141
Thanks!
This is my Web User contro code in the Server side:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class ConnectingButton : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void SearchBtn_Click(object sender, EventArgs e)
    {
 

    }
}

There is only one button(This button is the one that it will trigger the update Panel from the page View.aspx).

Now in my view.aspx page:
Page VIEW.aspx:
  <UPC:ConnectingButton  ID="Connection" runat="server"/>
  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
      //IN this space goes the GriedView but for now I am
      //setting an label that catch the time.
      <asp:Label id="lblTime" runat="server"></asp:Label>
      <asp:Button ID="Button1" runat="server" Text="Button in the page"
       OnClick="Button1_Click" />
    </ContentTemplate>
    <Triggers>
     <asp:AsyncPostBackTrigger ControlID ="Button1" EventName="Click" />
    </Triggers>        
  </asp:UpdatePanel>
  <asp:UpdateProgress ID="UpdateProgress1" runat="server">
      <ProgressTemplate>
           <img src="25-1.gif" /> Updating page ....
      </ProgressTemplate>
  </asp:UpdateProgress>
 
Code Behind C# in View.Aspx :
  protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        lblTime.Text = "Time " +
        DateTime.Now.ToString();    
    }
 
Also, all the way to the top of this question you can find my code with more details.

Thanks for your help,. Would you mind use mi code to write me an example.
Thanks one more time :)
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 4

Author Comment

by:eddyperu
ID: 21833165
One more thing the "Button1" that you see in my code, is an example that I set there for purpose of testing. You can erase it, and try to trigger that "UPdate Panel" and the "Progress bar" using the button from the Web user Control, the name of the button is "SearchBtn".
Thanks
0
 
LVL 33

Expert Comment

by:raterus
ID: 21833464
Your usercontrol should look like this

public partial class ConnectingButton : System.Web.UI.UserControl
{
    public event EventHandler MyClickEvent;
    protected void OnMyClickEvent(EventArgs e)
    {
        if (MyClickEvent != null)
        {
            MyClickEvent(this, e);
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void SearchBtn_Click(object sender, EventArgs e)
    {
            OnMyClickEvent(new EventArgs());
    }
}


Your asyncpostbacktrigger now looks like this,
<asp:asyncpostbacktrigger controlid="Connection" eventname="MyClickEvent" />

I tested this and it should work for you.
0
 
LVL 4

Author Comment

by:eddyperu
ID: 21833618
Sorry for bother you again, I am a rookie in this coding world. Would you mind to explain more about the "MiCLickEvent"?
I don' quite understand this. The button in my webusecontrol is "SearchBtn" this button need to update the "UpdatePanel1" that is in view.aspx page.

 In the code that I sent you there is a Label in my view.aspx page. I also add a button "BUtton1" in the page(view.aspx).
This is the server side code for a Button1 click event::
    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        lblPassword.Text = "Page refreshed at " +
        DateTime.Now.ToString();    
    }
     
I want that the "SearchBtn" from my Web User control do this...How??

Thansk, and more time thanks for your time :)
0
 
LVL 33

Accepted Solution

by:
raterus earned 500 total points
ID: 21833670
Think of it like this.  Just as the normal click event of a button talks to your UserControl, the MyClickEvent event of the usercontrol, talks to the underlying page.

if you (ultimately) want the search button click in your UserControl to run that code, add this to your Page class

    protected void Page_Load(object sender, EventArgs e)
    {
        Connection.MyClickEvent += new EventHandler(Connection_MyClickEvent);
    }

    void Connection_MyClickEvent(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        lblPassword.Text = "Page refreshed at " +
        DateTime.Now.ToString();  
    }
0
 
LVL 4

Author Comment

by:eddyperu
ID: 21833937
That is awesome, THanks..one more question and please tell me if you think that  I need to open another forum for this question.I will glad to do it.
There are 2 panels, one of them is going to have the  progress bar and the other panel in this case the will contating the label with the DateTime.Now:
So it will looks like this :
<asp:panel1>
            <ProgressTemplate>
                <img src="25-1.gif" />
                Updating page ....
            </ProgressTemplate>
</asp:panel1>
<asp:panel2>
      <asp:Label id="lblTime" runat="server"></asp:Label>
</asp:panel2>
It is possible for the ProgessTemplate to execute the giff and when It finish to show the Label with the date. The trick that I want to do is that <panel1> and the <panel2> need to be in the same position of the screen, one on top of the other, so the gift animation will end and the Label appear in the same position.
Thanks, You got my points :):) Wonderful work



0
 
LVL 33

Expert Comment

by:raterus
ID: 21834083
Yeah, that's probably something for your next question, I really don't have any experience there, and it is a new question!  Also, make sure you put it in the "ASP.Net Programming Zone", this question isn't there and should have been.
0
 
LVL 4

Author Comment

by:eddyperu
ID: 21834220
Thank you so much for your time and for your help!
eddy
0
 
LVL 4

Author Closing Comment

by:eddyperu
ID: 31468785
excellent
0
 
LVL 33

Expert Comment

by:raterus
ID: 21834343
Hey, how about McCoin, certainly he should get some points too.

Actually, I reread your original question, and it seems I didn't even answer that, but another question that was raised during the process.  If McCoin helped you at all he should get something!
0
 
LVL 4

Author Comment

by:eddyperu
ID: 21899026
Thanks Raterus!
You are right, he was really helpful, Is there a way to share your points, Now Ithat I hgave it to you?
Sorry about that McCoin!!1
0
 
LVL 3

Expert Comment

by:McCoin
ID: 21899055
Thanks, I'm sorry I wasn't able to help more.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now