Home > .net 3.5, AJAX, c#, LINQ, Visual Studio 2008 > WebGallery 2.0 – #4 – Adding Admin Tools

WebGallery 2.0 – #4 – Adding Admin Tools

February 25, 2008

So far, we’ve discussed:

  1. Creating the basic data model for the WebGallery.
  2. Changes to the HttpHandler to increase speed and efficiency.
  3. Building and viewing the individual galleries–created using clean, simple HTML code.

Our galleries are now visible; however, we need a few administration tools to handle changes, such as updating the title and description or fixing a broken thumbnail (since they’re pre-generated now). 

#1 – Introduction
#2 – HttpHandler and LINQ Data Model
#3 – Building the Galleries

NOTE: Code downloads are available on the Introduction post.

This post will cover the topic of using the ModalPopupExtender to manage files once their added into the galleries.

Edit File Properties Modal Popup

If you’ve been reading my blog for long, you’ve discovered that I really like the modal popups.  They add a cleaner UI feeling to applications and help bridge the gap between Windows forms and the Web.  They’re great for scenarios, such as this, where you want to modify something, but not “move” the user somewhere else.

Note: This post will assume you have extended a DIV or Panel control using the ModalPopupExtender before, if not, check out the AJAX Control Toolkit’s guide.  I am going to focus on the controls ON the popup.

I tend to use DIVs rather than <asp:Panel /> controls.  No real reason except that I prefer the clean HTML to server-side rendered HTML.  I’ve never measured if there’s a performance decrease, so to each their own.

The panel and popup controls are hidden until an Administrator logs in; this keeps the page size slightly smaller for typical users. 

EditPanel.Visible = Page.User.IsInRole(“Administrators”);

HiddenButton.Visible = Page.User.IsInRole(“Administrators”);

mpeModifyPopup.Enabled = Page.User.IsInRole(Administrators”);

In Post #3, we added an “EditButton” to each ItemTemplate.  The EditButton, an ImageButton control, called the ItemCommand method when clicked and passed the command argument (which happened to be the item’s “Id” field) to the command.  Now we’re ready to use that logic and dig into the ModifyCommand method.

protected void ModifyCommand(int fileId)

{

mpeModifyPopup.Show();

WebFile file =

((List<WebFile>)Session[“CurrentGallery”])

.Single(i => i.Id == fileId);

 

EditName.Text = file.Name;

EditDescription.Text = file.Description;

SavePopupButton.CommandArgument = fileId.ToString();

DeletePopupButton.CommandArgument = fileId.ToString();

EditGallery.DataSource = db.GetGalleriesByRole(Page.User);

EditGallery.DataTextField = “Name”;

EditGallery.DataValueField = “Id”;

EditGallery.SelectedValue = file.GalleryId.ToString();

EditGallery.DataBind();

 

EditUpdatePanel.Update();

}

The ModifyCommand method can be explained by:

  1. Showing the ModalPopupExtender’s DIV control.
  2. Selecting a WebFile from the database based on the command argument passed to the method (fileId).
  3. Populating the controls on the modal popup.
  4. Populating the gallery drop down list from the database and binding.
  5. Updating the UpdatePanel on the modal popup to display the changes in #2–4.

The four ImageButtons on the Edit form each have associated methods: Delete, Cancel, Save, and UpdateThumbnail (the Regenerate button).

Delete

Our Delete ImageButton has a bit of extra JavaScript attached to it to provide users a confirmation for their delete:

OnClientClick=”return confirm(‘Are you sure you want to delete this file?’);”

When true, the button’s OnClick method fires.  Since our data context has an existing Delete method, we’ll use that.

protected void DeletePopupButton_Click(object sender,
EventArgs e)

{

try

       {

              db.RemoveWebFile(

Convert.ToInt32(DeletePopupButton.CommandArgument));

             mpeModifyPopup.Hide();

             BindListView(true);

}

catch (Exception ex)

       {

              Status.Text = ex.Message;

}

}

If the RemoveWebFile method fires correctly and doesn’t throw an error, then hide the modal popup and rebind the ListView control (the boolean parameter informs the ListView that the data source HAS changed and to refresh the session cache).

Cancel

The Cancel button simply hides the form and resets the Status literal control to blank.

Save

Save operates the same as Delete, however, instead of deleting based on the Id, the UpdateWebFile method is called passing in the parameters from the data form.

UpdateThumbnail

The UpdateThumbnail (Regenerate)’s method works the as the other update methods, however, with an added twist.  The thumbnail can be regenerated without modifying other information about the file, so the extra button and two indicators were added—if the update is successful, the “Regenerate” button is replaced by a “Success!” image; failure is noted by a similar “Failure!” image.

 

protected void UpdateThumbnailPopupButton_Click(

object sender, EventArgs e)

{

try

       {

db.UpdateWebFileThumbnail(

Convert.ToInt32(SavePopupButton.CommandArgument));

 

UpdateThumbnailPopupButton.ImageUrl =

“~/Images/Success.png”;

       Status.Text = “Thumbnail updated successfully.”;

}

       catch (Exception ex)

       {

              UpdateThumbnailPopupButton.ImageUrl =

“~/Images/Failed.png”;

Status.Text = ex.Message;

}

}

Not necessary, but a little something extra.

With this, we now have “on the fly” editing tools—without ever leaving the gallery page. 

Example

  1. dianne
    September 12, 2008 at 6:04 pm

    Good 235rter2rwer23r

  2. jim
  3. tom
  1. March 6, 2008 at 12:27 am
Comments are closed.
%d bloggers like this: