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

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">
 
    <ContentTemplate>
                
        <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
        
            <asp:View ID="readView" runat="server">
            
                Tags: 
                <asp:Label id="lblTags" runat="server" />
                
                <span class="photoBtn">
                    <asp:LinkButton ID="btnEdit" runat="server"
 OnClick="btnEdit_Click">[Edit Tags]</asp:LinkButton>
                </span>
                
            </asp:View>
        
            <asp:View ID="editView" runat="server">
            
                Tags:
                <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"
 OnClick="btnCancel_Click">[Cancel]</asp:LinkButton>
                </span>
            
            </asp:View>
        
        </asp:MultiView>
 
    </ContentTemplate>
 
</atlas:UpdatePanel>

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)
{
  MultiView1.SetActiveView(editView);
}
 
protected void btnCancel_Click(object sender, EventArgs e)
{
  MultiView1.SetActiveView(readView);
}
 
protected void btnSave_Click(object sender, EventArgs e)
{
  UpdatePhoto(txtTags.Text);
}

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);
 
  photoDb.Tags.RemoveAll(photo.Tags);
  photo.Tags = photoDb.TagWith(tagString, ' ');
 
  photoDb.SubmitChanges();
}

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
Comment:
vxcv
Title: Dear   
Name: Bilal khan
Date: 2012-08-07 1:13:37 PM
Comment:
Plz send this article to my email address


iam.bilal@yahoo.com

thanks in advance
Title: th   
Name: Janaa
Date: 2009-09-28 9:09:50 AM
Comment:
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-2019 ASPAlliance.com  |  Page Processed at 2019-06-25 8:42:09 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search