Solved

Using AJAX to switch data in listview based on a 10 second interval.

Posted on 2008-10-09
12
281 Views
Last Modified: 2012-05-05
Greetings.. and thank you for reading my post..

.NET Framework : 3.0
Language : C#
Visual Studio 2008.

I have this listview which is displayed as a "campain" on my mainpage of my website.
I'm using this objectdataSource which gets a set of data. It might return all from 1 to X (objects).

What i want to accomplish.. is to populate the listview with data from the first object --> 10 seconds --> fade-out --> populate listview with data from second object --> 10 seconds... etc.etc.etc... until the IList is empty.

So basically. i need to databind the listview with different data on each "reload"/"timer", but i have _NOO_ idea how to do this at the moment..

Any code help here would be greatly appreciated !..

It's a tricky question so it will be rewarded.

I have some code to display below :


THE LISTVIEW AND PANELS : 

<asp:UpdatePanel runat="server" ID="upnlCampain" UpdateMode="Conditional">

                    <ContentTemplate>

                        <asp:Panel runat="server" Width="100%" ID="pnlCampain">

                            <asp:ListView runat="server" ID="lvCampain" DataKeyNames="Id" DataSourceID="odsCampain"

                                OnItemCommand="lvCampain_OnItemCommand">

                                <LayoutTemplate>

                                    <asp:PlaceHolder runat="server" ID="itemPlaceholder" />

                                </LayoutTemplate>

                                <ItemTemplate>

                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">

                                        <tr>

                                            <td valign="top" width="70%">

                                                <table width="100%" border="0" cellspacing="2" cellpadding="2">

                                                    <tr>

                                                        <td>

                                                            <div style="float:left; vertical-align:top;">

                                                                <asp:ImageButton runat="server" ID="imgCampainChallenge" ImageUrl="~/gfx/challenge_icon_hover.gif" CommandName="View" CommandArgument='<%# Eval("displayIdeaId") %>' />

                                                            </div>

                                                            <div style="float:left; margin-left:10px; margin-top:5px">

                                                                <asp:Label runat="server" ID="lblCampainTitle" CssClass="campaintitle" Text='<%# Eval("Title") %>' Width="100%" /><br />

                                                                <asp:Label runat="server" ID="lblCampainText" CssClass="campaintext" Text='<%# Eval("Description") %>' />

                                                            </div>

                                                        </td>

                                                    </tr>

                                                    

                                                    <tr>

                                                        <td valign="top">

                                                            <div style="width: 100%; display: block; padding:10px; background-color:#f8f8f8; border: dashed 1px #f2f1f1; width:100%">

                                                                

                                                                <asp:LinkButton runat="server" ID="lnkTitle" CssClass="plainlinkbuttonlarge" Text='<%# Eval("displayIdeaTitle") %>'

                                                                    Font-Size="Small" Font-Bold="True" CommandName="View" CommandArgument='<%# Eval("displayIdeaId") %>' />

                                                                <div style="float: left; padding-bottom: 10px; padding-top: 10px; width:100%;">

                                                                    <asp:Label runat="server" ID="labbelabb" CssClass="campaintextdefault" Text='<%# formatBackground(Eval("displayIdeaBackground")) %>' />

                                                                </div>

                                                                <div style="float: left; padding-top: 15px;">

                                                                    <asp:Label runat="server" ID="Label8" Text="opprettet " ForeColor="#999966" Font-Size="X-Small"

                                                                        Font-Italic="True" meta:resourcekey="Label8Resource1" />

                                                                    <asp:Label runat="server" ID="Label9" Text='<%# getDate(Eval("displayIdeaDate_Created")) %>'

                                                                        Font-Italic="True" Font-Size="X-Small" ForeColor="#999966" meta:resourcekey="Label9Resource1" />

                                                                    <asp:Label runat="server" ID="Label1" Text=" av " ForeColor="#999966" Font-Size="X-Small"

                                                                        Font-Italic="True" meta:resourcekey="Label1Resource1" />

                                                                    <asp:LinkButton runat="server" style="text-decoration:none" ID="lnkAuthor" Text='<%# Eval("displayUserFirstname") + " " + Eval("displayUserLastname") %>'

                                                                        Font-Size="X-Small" CommandName="ViewProfile" CommandArgument='<%# Eval("displayIdeaauthorId") %>'

                                                                        meta:resourcekey="lnkAuthorResource1" />

                                                                </div>

                                                            </div>

                                                        </td>

                                                    </tr>

                                                    <tr>

                                                        <td valign="top">

                                                        </td>

                                                    </tr>

                                                </table>

                                            </td>

                                            <td valign="top" width="30%">

                                                <table width="100%" border="0" cellspacing="2" cellpadding="2">

                                                    <tr>

                                                        <td valign="top">

                                                        <div style="vertical-align:middle; text-align:center;">

                                                            <asp:Imagebutton runat="server" ID="imgCampainReadMore" ImageUrl="~/gfx/campain_readmore.gif" CommandName="View" CommandArgument='<%# Eval("displayIdeaId") %>' />

                                                        </div>

                                                        </td>

                                                    </tr>

                                                    <tr>

                                                        <td valign="top">

                                                        </td>

                                                    </tr>

                                                </table>

                                            </td>

                                        </tr>

                                    </table>

                                </ItemTemplate>

                            </asp:ListView>

                            <asp:ObjectDataSource ID="odsCampain" runat="server" TypeName="Dao.initiativeDao, App_Code"

                                SelectMethod="activeCampain">

                                <SelectParameters>

                                    <asp:SessionParameter DefaultValue="0" SessionField="companyid" Name="companyid"

                                        Type="Int32" />

                                </SelectParameters>

                            </asp:ObjectDataSource>

                        </asp:Panel>

                    </ContentTemplate>

                </asp:UpdatePanel>
 
 

THE OBJECT DATASOURCE CODE : 

public IList Campain activeCampain(int companyid)

        {

            DetachedCriteria currentCampainCrit = DetachedCriteria.For<Campain>()

                               .CreateAlias("Company", "cpy")

                               .Add(Expression.Eq("Active", 1))

                               .Add(Expression.Eq("cpy.CId", companyid))

                               ;

            

Campain[] campainlist = Campain.FindAll(currentCampainCrit);

return campainlist.ToList<Campain>();

        }

Open in new window

0
Comment
Question by:Nygter
  • 7
  • 5
12 Comments
 
LVL 14

Accepted Solution

by:
CtrlAltDl earned 500 total points
ID: 22682121
Here is an article on how to do it:
http://ibuyspy.net/AJAX/Documentation/Live/tutorials/TimerControlWithUpdatePanelsTutorial.aspx

I've also included some code below.

<asp:Timer ID="Timer1" runat="server" Interval="100" OnTick="Timer1_Tick">

</asp:Timer>

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

  <Triggers>

    <asp:AsyncPostBackTrigger ControlID="Timer1"

        EventName="Tick" />

    </Triggers>

</asp:UpdatePanel>
 

protected void Timer1_Tick(object sender, EventArgs e)

{

      upnlCampain.Update();

}

Open in new window

0
 
LVL 14

Expert Comment

by:CtrlAltDl
ID: 22682176
Ok my previous posts takes care of the 10 second updatepanel refresh.  I just realized there is more to this question.

Are you talking about paging through results from a query every time it refreshes?
0
 

Author Comment

by:Nygter
ID: 22682184
Thank you CtrlAltDl !

I'll check out the solution tomorrow morning..

Best regards Terje.
0
 

Author Comment

by:Nygter
ID: 22682213
Every time (each 10 seconds) it should change the data in the listview..

So.. it will start with the first object in the IList, then after 10 seconds.. switch the data to object two, until the list is empty..

So.. the objectDataSource will have a list of objects of type Idea. So i some how have to databind each "tick" to the next object in the list..

Hope that was understandable..

if you have more questions, i'll answer them in about 30 minutes.. quick trip home first :)

Terje.
0
 

Author Comment

by:Nygter
ID: 22682219
Oh.. by the way.. it might be that the listview is not the way to go, feel free to recommend another display-control instead if you like.
0
 
LVL 14

Expert Comment

by:CtrlAltDl
ID: 22682264
As far as fade-in and out on the updatepanel goes...

http://www.saintycorp.com/ajax/UpdatePanelAnimation/UpdatePanelAnimation.aspx
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 14

Expert Comment

by:CtrlAltDl
ID: 22682336
The List control should be fine.  It should work with any data-based control.

So do you need to change the name of the object after each refresh (ie odsCampain1 -> odsCampain2 -> odsCampain3 -> etc...)?
0
 

Author Comment

by:Nygter
ID: 22682980
Well.. Lets say it this way..

If i have 8 ideas registrered, and i have marked 5 of them that should be displayed in the listview control, since the field "active" is set to "1".

The ods will then pick those 5, into a list and return it to the listview.. The issue is that a listview takes all those 5 and puts them on the listview together. I want to display one after one with fading between them.. Just like a marketing banner :)

So the question is : how do i "manipulate" the listview control (or any simular control maybe?) to do what i'm after ? I want to display them all, but not together :)

So i need to do something "somewhere" in the code, that gets the first object and databinds it to the listview, then get the next one and databinds... etc.etc.etc...

Thanx for the help so far !

Terje.
0
 

Author Comment

by:Nygter
ID: 22685744
Everything works now perfectly, now i just need to get the "fading issue" between the "ticks"..

any ideas CtrlAltDl ?

Tl
0
 

Author Closing Comment

by:Nygter
ID: 31504763
Great solution which led me in the right direction..
0
 
LVL 14

Expert Comment

by:CtrlAltDl
ID: 22690671
Won't the UpdatePanelAnimationExtender do the job for you?
0
 

Author Comment

by:Nygter
ID: 22690769
Hmm.. not sure how to do the updatepanelanimationextender mate :)

See this question :

http://www.experts-exchange.com/Programming/Languages/C_Sharp/Q_23805240.html
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Image(7) 1 53
insert image with its metadata into SQL server Database 3 88
C# Json POSt to Rest API 4 36
free scanner TWAIN can be operated with a Web application 9 38
We all know that functional code is the leg that any good program stands on when it comes right down to it, however, if your program lacks a good user interface your product may not have the appeal needed to keep your customers happy. This issue can…
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
Migrating to Microsoft Office 365 is becoming increasingly popular for organizations both large and small. If you have made the leap to Microsoft’s cloud platform, you know that you will need to create a corporate email signature for your Office 365…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…

911 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

20 Experts available now in Live!

Get 1:1 Help Now