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.
