.NET Developer Professional Technical Resources US-WA-Seattle Post A Job | Post A Resume

FAQ WebControls

The CSK breaks up the display of content into smaller controls. For example, under Engine\Framework\ContentPages\Controls, you'll find a control to display the content title (in Title.cs), and the content's brief description (BriefDescription.cs), which can display our FAQ question and the introduction. All we will need to add are a couple of controls specific to the FAQ module: a control to display the answer and the reference, and a control to provide a link for authorized users to edit the FAQ content.

FaqAnswer and FaqReference

All of the controls at this level derive from the .NET Framework WebControl class. We simply need to set the CssClass property for our control, retrieve the text to display from the current HttpContext, and override the RenderContents method to write the text.

Create these controls in the Engine\Module\Faqs\Controls directory. The control to display the answer to an FAQ is as follows:

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using ASPNET.StarterKit.Communities.Faqs;
using System.ComponentModel;
namespace ASPNET.StarterKit.Communities
{
   [Designer(typeof(ASPNET.StarterKit.Communities.CommunityDesigner))]
   public class FaqAnswer : WebControl
   {
       public FaqAnswer() : base()
       {
           CssClass = "faqAnswerText";
           if(Context != null)
           {
               Object faqInfo = Context.Items["ContentInfo"];
               if(faqInfo != null)
               {
                   _text = ((FaqInfo)faqInfo).AnswerText;
               }
           }
       }
       public string Text
       {
           get { return _text; }
           set { _text = value; }
       }
       override protected void RenderContents(
                         HtmlTextWriter writer) 
       {
           SectionInfo objSectionInfo = 
                         (SectionInfo)Context.Items["SectionInfo"];
           writer.Write(
                  CommunityGlobals.FormatText(
                                objSectionInfo.AllowHtmlInput,
                                objSectionInfo.ID, _text));  
       }
       private string _text;
   }
}

First, notice that our previous components were in the ASPNET.StarterKit.Communities.Faqs namespace, but we place our control in a higher level namespace. This remains consistent with the rest of the CSK where the skin files typically set up a Community tag prefix pointing to the ASPNET.StarterKit.Communities namespace. We can place the above component into a skin with a line similar to:

 <community:FaqAnswer Runat='Server' ID='Answer1'
     NAME='Answer1'/>

The FaqReference control looks very similar to the FaqAnswer control. Both override RenderContents and use the CommunityGlobals class for proper transformation and formatting of the outgoing text. Generally, you will want to break each field of a new module into a specific control to use from a content skin. It is up to the skin designer to decide where to lay out the fields for presentation.

FaqEditContent

Every CSK module uses a control derived from EditContent to display links for authorized users to add, delete, move, comment, and moderate content. All we need to do is set the appropriate URL properties. The logic in the base class will determine when to display the appropriate links. We perform all of the work in the constructor, as follows:

public FaqEditContent()
{
   if (Context != null) 
   {
       PageInfo pageInfo = (PageInfo)Context.Items["PageInfo"];
       int contentPageID = pageInfo.ID; 
       AddUrl = "Faqs_AddFaq.aspx";       
       EditUrl = String.Format(
                       "Faqs_EditFaq.aspx?id={0}", 
                       contentPageID);
       DeleteUrl = String.Format(
                       "ContentPages_DeleteContentPage.aspx?id={0}", 
                       contentPageID);
       MoveUrl = String.Format(
                       "ContentPages_MoveContentPage.aspx?id={0}", 
                       contentPageID);
       CommentUrl = String.Format(
                       "Comments_AddComment.aspx?id={0}", 
                       contentPageID);
       ModerateUrl = "Moderation_ModerateSection.aspx";
   }
}

With these small pieces built we are ready to tackle the actual content display.

Content Classes

In the traditional ASP.NET paradigm, the content classes are the code-behind files. Since the CSK takes a slightly different tack to allow high levels of customization, we will not be able to use the IDE to keep our web form in sync with the code behind the form. No real tie exists between the two, since each code file supports multiple versions of the same web form (the skins). Instead, we will need to manually keep track of which controls are on the page, and manually wire up the events that we need. The task is not difficult but does require some extra attention to control names and other details.

We have four content classes to write for the four pages we will need for our FAQ module:

• Faq: To display a single FAQ item
• FaqSection: To display a list of FAQs
• AddFaq: For the data entry of FAQ content
• EditFaq: For the update of FAQ content

The amount of code you will need to write for a content class varies widely. Using the ContentItemPage and ContentListPage CSK classes we can display an FAQ and an FAQ list with very little code. We will look at these two classes first.

Faq and FaqSection

The FaqSection class derives from ContentListPage, which can do most of our work with just a little more of information.

public class FaqSection : ContentListPage
{
   public FaqSection() : base()
   {
       SkinFileName = _skinFileName;
       GetContentItems = _getContentItems;
   }
   string _skinFileName = "Faqs_FaqSection.ascx";
   GetContentItemsDelegate _getContentItems = 
               new GetContentItemsDelegate(FaqUtility.GetFaqs);
}

At this point, we need to pick the actual filename for our skin and set the SkinFileName property. This step is essential to SkinnedCommunityControl (the base class of ContentListPage) for finding the correct skin to load.

When we wrote the data-access methods in FaqUtility, we mentioned the need to maintain a specific method signature of return type and parameters. The method signature we used was the one for a GetContentItemsDelegate delegate. The base class will use the delegate within the BindContent method to retrieve and display all the FAQs in a given section. The Faq class follows the same pattern, but initializes the skin file to Faqs_Faq.ascx, and assigns the delegate to the FaqUtility.GetFaq method.

AddFaq and EditFaq

These two classes present a bit of a challenge. Since the data-access methods to insert and update module content vary widely from module to module, there is no base class available to reduce the workload through a delegate. Instead, we will need to find controls that are specific to our module to get and set values, and invoke the FaqUtility data-access routines in response to user events.

Before reaching this point, you may want to sketch out a skin file to know what controls you will need on the page. We know the skin file that we will use to add and edit FAQs will need the following input controls:

• TextBox: For the FAQ question
• TextBox: For the FAQ introduction
• TopicPicker: For FAQ sections supporting topics
• HtmlTextBox: For the FAQ answer
• HtmlTextBox: For the FAQ references

In addition, we would like to preview the control, which requires five more controls for display instead of input. These five controls should be the same as the ones we will use in the display of an FAQ. So we will use the FaqAnswer control we wrote earlier to display the answer. Let us look at the EditFaq class as an example.

The constructor is as follows:

 public EditFaq() : base()
 {
   SkinFileName = _skinFileName;
   SectionContent = _sectionContent;
         
   this.SkinLoad += new SkinLoadEventHandler(SkinLoadFaq);
   this.Preview += new PreviewEventHandler(PreviewFaq);
   this.Submit += new SubmitEventHandler(SubmitFaq);
 }

The constructor initializes the skin file name and section content properties, which we will define later. The constructor then wires up event handlers for three events defined in the base class ContentEditPage. These event handlers will contain the logic for loading the skin, handling the preview button click, and the submit button click. They are a part of every content edit page.

 void SkinLoadFaq(Object s, SkinLoadEventArgs e) 
 {
   txtQuestion = (TextBox)GetControl(e.Skin, "txtQuestion");
 
      // continue initializing all controls with GetControl . . .
 }

As we discussed in earlier chapters, the CSK dynamically loads a skin (ASCX) file that lays out the controls for a particular theme. If you need to programmatically interact with any of the controls on a skin, you'll need to obtain a reference to the control. When editing an FAQ we will need to obtain the contents of the TextBox object holding the FAQ question. You can obtain references to controls using the GetControl and GetOptionalControl methods implemented in the SkinnedComunnityControl base class. There are additional controls we will need reference to, but only the question TextBox is shown here:

 protected override void OnLoad(EventArgs e) 
 {
   if (!Page.IsPostBack) 
   {
     ContentPageID = Int32.Parse(
       Context.Request.QueryString["id"]);
             
     FaqInfo faqInfo = 
       (FaqInfo)FaqUtility.GetFaqInfo(
       objUserInfo.Username, ContentPageID);
             
     EnsureChildControls();
     txtAnswer.Text = faqInfo.AnswerText;
     dropTopics.SelectedTopicID = faqInfo.TopicID;
     txtIntro.Text = faqInfo.IntroText;
     txtQuestion.Text = faqInfo.QuestionText;
     txtReference.Text = faqInfo.ReferenceText;
   }
 }

When the page loads, we need to retrieve the information for an existing FAQ from the database. The CSK will pass the content identifier in the query string parameters, so we fetch the ID and pass it along to the GetFaqInfo method of the FaqUtility class we examined earlier. Once we have an FaqInfo object in hand, we can populate controls on the page (which we obtained references to during the skin load event) with FAQ information.

 void PreviewFaq(Object s, EventArgs e) 
 {
   if(objSectionInfo.EnableTopics)
     topicPreview.Name = dropTopics.SelectedItem.Text;
   questionPreview.Text = txtQuestion.Text;
   introductionPreview.Text = txtIntro.Text;
   answerPreview.Text = txtAnswer.Text;
   referencePreview.Text = txtReference.Text;
 }

When the user clicks the preview button, we need to shuttle all of the content in the edit controls to the preview controls, which will render the content with the styles we use to display content. This gives the author a better idea of how the content will look when the content goes live. The ContentEdit base class will take care of toggling the preview panel control visibility so the author can see the results.

 void SubmitFaq(Object s, EventArgs e) 
 {
   if (Page.IsValid) 
   {
     // Get Topic
     int topicID = -1;
     if (objSectionInfo.EnableTopics)
       topicID = Int32.Parse(dropTopics.SelectedItem.Value);
        
     FaqUtility.EditFaq(
       objUserInfo.Username,
       objSectionInfo.ID,
       ContentPageID,
       topicID,
       txtQuestion.Text,
       txtIntro.Text,
       txtAnswer.Text,
       txtReference.Text);               
 
     Context.Response.Redirect(CommunityGlobals.CalculatePath(
       String.Format("{0}.aspx", ContentPageID)));
   }
 }

The SumbitFaq event handler uses the FaqUtility class to put the updated content into the database. Once this is done, we send the user off to the content page with a Response.Redirect to view the updated FAQ.

 int ContentPageID 
 {
   get { return (int)ViewState["ContentPageID"]; }
   set { ViewState["ContentPageID"] = value; }
 }
 TextBox txtQuestion;
 TopicPicker dropTopics;
 TextBox txtIntro;
 HtmlTextBox txtAnswer;
 HtmlTextBox txtReference;
 DisplayTopic topicPreview;
 Title questionPreview;
 BriefDescription introductionPreview;
 FaqAnswer answerPreview;
 FaqReference referencePreview;
 string _skinFileName = "Faqs_AddFaq.ascx";
 string _sectionContent = 
   "ASPNET.StarterKit.Communities.Faqs.FaqSection";
}

The AddFaq page looks similar to the EditFaq page and can be seen in the code download. The only work left is in presenting the data via skins and style sheets.

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers