A Simple ASP.NET Flickr Application – Part 2

This is a second part of the article, if you missed the previous post you can find it here:
A Simple ASP.NET Flickr Application – Part 1

To download the source code click here.

Table of contents

A Simple ASP.NET Flickr Application – Part 1

  1. Introduction
  2. Getting started
  3. The web.config

A Simple ASP.NET Flickr Application – Part 2

  1. Constructing the page
  2. The make up
  3. The result
  4. Notes

Constructing the page

Add a new web form to your project and place inside it a DropDownList. After that, place inside the page an ObjectDataSurce control. For this ObjectDataSurce control, you can use the Designer and the Smart Task for making things quicker.

<p>
    List of default user sets:
    <br />
    <asp:DropDownList ID="ddlSets" runat="server" 
        AutoPostBack="True" DataSourceID="odsSets"
        DataTextField="Title" DataValueField="PhotosetId" 
        Height="21px" Width="450px"
        OnSelectedIndexChanged="ddlSets_SelectedIndexChanged">
    </asp:DropDownList>
</p>
<asp:ObjectDataSource ID="odsSets" runat="server" 
        OldValuesParameterFormatString="original_{0}"
        OnSelecting="odsSets_Selecting" 
        SelectMethod="GetPhotoSetsByUser" 
        TypeName="Infrastructure.BLL.FlickrBLL">
    <SelectParameters>
        <asp:Parameter Name="userId" Type="String" />
    </SelectParameters>
</asp:ObjectDataSource>

As you can see, our method is expecting a value so it can properly retrieve the data. As our user ID is stored in theweb.config, this is the approach for passing a requested argument:

protected void odsSets_Selecting(object sender, ObjectDataSourceSelectingEventArgs e)
{
   e.InputParameters["userId"] = ConfigurationManager.AppSettings["defaultUser"].ToString();
}

Intercept the Selecting event and manually set the expected parameter. I’m getting it from the web.config; you can choose any other way, e.g.: using another control in the page (if you create a user search). If you are inexperienced, you may be wondering how I got the DataTextField and DataValueField values. Simple, they are properties of the Photoset class, which is an element of PhotosetCollection, that is our called method return type. To explore other properties, create an instance of the Photoset class, select it, and hit F12.

Now I will add a ListView control in order to list the data that is the outcome of my query.

<asp:ListView ID="lvImages" runat="server" DataSourceID="odsPhotos">
    <EmptyDataTemplate>
        <span>No data was returned.</span>
    </EmptyDataTemplate>
    <ItemTemplate>
        <a href="<%# Eval("MediumUrl") %>" rel="images" title="<%# Eval("Title") %>">
            <img alt="" src="<%# Eval("SquareThumbnailUrl") %>" />
	</a> 
	</ItemTemplate>
    <LayoutTemplate>
        <div id="itemPlaceholderContainer" runat="server" style="">
            <span runat="server" id="itemPlaceholder" />
        </div>
            <asp:DataPager ID="DataPager1" runat="server" PageSize="<%$ appSettings:defaultPageSize %>">
                <Fields>
                    <asp:NextPreviousPagerField ButtonType="Image" ShowFirstPageButton="true" ShowNextPageButton="false"
                        ShowPreviousPageButton="true" FirstPageImageUrl="~/images/first.gif" PreviousPageImageUrl="~/images/previous.gif" />
                    <asp:TemplatePagerField>
                        <PagerTemplate>
                            Page
                            <asp:Label runat="server" ID="labelCurrentPage" 
		Text="<%# Container.TotalRowCount > 0 ? (Container.StartRowIndex / Container.PageSize) + 1 : 0 %>" />
                            of
                            <asp:Label runat="server" ID="labelTotalPages" 
                Text="<%#  Math.Ceiling ((double)Container.TotalRowCount / Container.PageSize) %>" />
                        </PagerTemplate>
                    </asp:TemplatePagerField>
                    <asp:NextPreviousPagerField ButtonType="Image" ShowLastPageButton="true" ShowNextPageButton="true"
                        ShowPreviousPageButton="false" LastPageImageUrl="~/images/last.gif" NextPageImageUrl="~/images/next.gif" />
                    <asp:TemplatePagerField>
                        <PagerTemplate>
                            <br />
                            Total Pictures in this set:
                            <asp:Label runat="server" ID="labelTotalPictures" Text="<%#  (double)Container.TotalRowCount %>" />
                        </PagerTemplate>
                    </asp:TemplatePagerField>
                </Fields>
            </asp:DataPager>
    </LayoutTemplate>
</asp:ListView>

Note that I specified a very simple ItemTemplate; the code speaks for itself. The important thing to note is that inside the layout template, there is a DataPager control. When the DataPager is inside a ListView control, setting the PagedControlID of the DataPager isn’t necessary. The container ListView is automatically associated as the paged control.

Obviously, this will not work without a data source, so here we go, an ObjectDataSource is served.

<asp:ObjectDataSource ID="odsPhotos" runat="server" 
        EnablePaging="True" OldValuesParameterFormatString="original_{0}"
        SelectCountMethod="GetPagedSetCount" 
        SelectMethod="GetPagedSet" TypeName="Infrastructure.BLL.FlickrBLL"
        OnSelecting="odsPhotos_Selecting">
    <SelectParameters>
        <asp:ControlParameter ControlID="ddlSets" 
            DefaultValue="0" Name="setId" PropertyName="SelectedValue"
            Type="String" />
    </SelectParameters>
</asp:ObjectDataSource>

You can use Designer and the Smart Task, but be aware that a guided procedure will add the parameters that are used for paging and the app will not work correctly. Take a look at the properties that enable paging and the count method.

Now we need to set a maximum rows property, but as this property is specified in the web.config, we will do it from code.

protected void odsPhotos_Selecting(object sender, ObjectDataSourceSelectingEventArgs e)
{
   e.Arguments.MaximumRows =
     int.Parse(ConfigurationManager.AppSettings["defaultPageSize"]);
}

That’s almost it, but there are some small problems, like viewing the second page of a set and then changing the set, setting one that has just one page. Badly sad, more simply, at each set change, we need to reset the page counter.

protected void ddlSets_SelectedIndexChanged(object sender, EventArgs e)
{
    DataPager pgr = lvImages.FindControl("DataPager1") as DataPager;
    if (pgr != null && lvImages.Items.Count != pgr.TotalRowCount)
    {
        pgr.SetPageProperties(0, pgr.MaximumRows, false);
    }
}

Now, that’s it, and everything should work perfectly!

AJAXing

Let’s get rid of postbacks. Add on the page a ScriptManager and make the following changes:

Surround the ListView with the following code:

<asp:UpdatePanel ID="upImages" runat="server" style="text-align: center;">
    <ContentTemplate>
        // my list view
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddlSets" />
    </Triggers>
</asp:UpdatePanel>

As the DropDownList is outside of the ListView, we need to indicate that even that control triggers a postback and that should be managed properly. Can’t be simpler!

The make up

I said before that we will use a lighbox plug-in called Colorbox. So let’s set it up. First of all, put all the images that are coming with this plug-in into the images directory, then do the same for the CSS style. Open the CSS file that you just copied, and check the image paths. Pay attention to comments about IE workarounds and the connected paths. Copy the necessary scripts to a script folder and then be ready for some code. We should link our scripts and the CSS file, so in the page head, add the following:

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.colorbox-min.js"></script>

Once we are done, we need to create an instance of Colorbox in order for this to work. As the JavaScript is no longer “bound” after a callback made via UpdatePanel, we need to reinitialize our Colorbox.

<script type="text/javascript">// <![CDATA[
        $(document).ready(function () {
            $("a[rel='images']").colorbox({ transition: "fade" });
        });

        function pageLoad(sender, args) {
            if (args.get_isPartialLoad()) {
                $("a[rel='images']").colorbox({ transition: "fade" });
            }
        }
// ]]></script>

For further information about the light box, and how you can get more from this practical plug-in, refer to the Colorbox webpage.

The result

In the end, by using a style that was automatically created by VS2010, this is the result:

FlickrPreview1

Here is a bit more detailed view:

FlickrPreview2

Notes

The default user for Filckr in the demo is actually an active and very nice Flickr profile. It’s my friend’s profile, mind_in_motion, so if you like nice photos, check it out. Thanks Jean Claude!  I’ll try to answer all of your questions, if any, just post a comment.

Joyful programming!

Afterword

This article was initially published on CodeProject.com and if you prefer you can still consult it there. No changes to the code or text are made.

Download source code – 145 KB

About these ads

One thought on “A Simple ASP.NET Flickr Application – Part 2

  1. Pingback: A Simple ASP.NET Flickr Application – Part 1 « Mummy's blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s