Building a Photo Tagging Application using ASP.NET 2.0, LINQ, and Atlas
page 7 of 9
by Scott Guthrie
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 38534/ 142

Step 6: Photo Details and Ajax Editing

The PhotoListing.aspx page above links each thumbnail image to a PhotoDetails.aspx page that shows the picture full-size, as well as lists out all of its tags.  Users visiting the site can also optionally edit the tags using an inline Ajax-editing UI experience.

Figure 8

Figure 9

To implement the Ajax-UI I used the Atlas UpdatePanel control, and then nested an ASP.NET MultiView control within it.  The Multiview control is a built-in control introduced in ASP.NET 2.0, and allows you to provide multiple “view” containers that can contain any HTML + server controls you want.  You can then dynamically switch between the views within your code-behind page however you want.  If the Multi-View control is nested within an Atlas UpdatePanel, then these view-switches will happen via Ajax callbacks (so no full-page refresh).


For the tag editing experience above I defined both “readView” and “editView” views within the Multiview control, and added “edit”, “cancel” and “save” link-buttons within them like so:

Listing 11

<atlas:UpdatePanel ID="p1" runat="server">
        <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
            <asp:View ID="readView" runat="server">
                <asp:Label id="lblTags" runat="server" />
                <span class="photoBtn">
                    <asp:LinkButton ID="btnEdit" runat="server"
 OnClick="btnEdit_Click">[Edit Tags]</asp:LinkButton>
            <asp:View ID="editView" runat="server">
                <asp:TextBox ID="txtTags" runat="server" />
                <span class="photoBtn">
                    <asp:LinkButton ID="btnSave" runat="server"
 OnClick="btnSave_Click">[Save Tags]</asp:LinkButton>
                    <asp:LinkButton ID="LinkButton1" runat="server"

I then wired-up event-handlers for these 3 link-buttons in my code-behind like so:

Listing 12

protected void btnEdit_Click(object sender, EventArgs e)
protected void btnCancel_Click(object sender, EventArgs e)
protected void btnSave_Click(object sender, EventArgs e)

The “save” event-handler above in turn calls the UpdatePhoto method and passes in the editView’s <asp:textbox> value as arguments.  This method is defined within the code-behind like so: 

Listing 13

void UpdatePhoto(string tagString)
  PhotoDB photoDb = new PhotoDB();
  Photo photo = photoDb.Photos.Single(p =  > p.PhotoId == photoId);
  photo.Tags = photoDb.TagWith(tagString, ' ');

The above method retrieves the specified Photo from the database, removes its current tags, and then uses the below “TagWith” helper method to create a new collection of tag instances to associate with the picture:

Listing 14

public EntitySet < Tag > TagWith(string tagNames, char separator)
  EntitySet < Tag > tags = new EntitySet < Tag > ();
  tagNames = tagNames.Trim();
  foreach (string tagName in tagNames.Split(separator))
  tags.Add(new Tag
    Name = tagName
  return tags;

And with that I now have an editable Ajax-enabled editing experience for viewing and dynamically adding new Tags to my photos. 

View Entire Article

User Comments

Title: dfds   
Name: vvxc
Date: 2012-11-02 8:00:17 AM
Title: Dear   
Name: Bilal khan
Date: 2012-08-07 1:13:37 PM
Plz send this article to my email address

thanks in advance
Title: th   
Name: Janaa
Date: 2009-09-28 9:09:50 AM
Thats seems to be very useful. I will try to use it on my site thx.

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-05-27 10:01:05 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search