How to create a Feedback Web User Control form in C# (Part 2)

If you have not read Part 1, read it here.

<%@ Control Language="C#" CodeFile="LeaveFeedBack.ascx.cs" Inherits="include_LeaveFeedBack" %>
   <asp:Table HorizontalAlign="Center" ID="BlogFeedbackTable" runat="server">
         <asp:TableRow><asp:TableCell>&nbsp;</asp:TableCell></asp:TableRow> 
         <asp:TableRow><asp:TableCell BackColor="#2BA94F" HorizontalAlign="Center" ForeColor="White" ColumnSpan="2">Feedback / Question></asp:TableCell></asp:TableRow>
      <asp:TableRow><asp:TableCell>&nbsp;</asp:TableCell></asp:TableRow> 
      <asp:TableHeaderRow>
      <asp:TableHeaderCell HorizontalAlign="Left">Your Name:</asp:TableHeaderCell>
         <asp:TableHeaderCell HorizontalAlign="Left">Your Email:</asp:TableHeaderCell>
      </asp:TableHeaderRow>
      <asp:TableRow>
         <asp:TableCell HorizontalAlign="Left"><asp:TextBox ID="TextBoxName" Width="245" MaxLength="20" runat="server" /></asp:TableCell>
         <asp:TableCell HorizontalAlign="Left"><asp:TextBox ID="TextBoxEmail" Width="245" MaxLength="50" runat="server" /></asp:TableCell>
      </asp:TableRow>
      <asp:TableRow><asp:TableCell>&nbsp;</asp:TableCell></asp:TableRow>
     <asp:TableHeaderRow>
         <asp:TableHeaderCell HorizontalAlign="Left" ColumnSpan="2">Subject:</asp:TableHeaderCell>
      </asp:TableHeaderRow>
      <asp:TableRow>
         <asp:TableCell HorizontalAlign="Left" ColumnSpan="2"><asp:TextBox ID="TextBoxSubject" Width="500" runat="server" /></asp:TableCell>
      </asp:TableRow>
      <asp:TableRow><asp:TableCell>&nbsp;</asp:TableCell></asp:TableRow> 
      <asp:TableHeaderRow>
         <asp:TableHeaderCell HorizontalAlign="Left" ColumnSpan="2">Feedback/Question:</asp:TableHeaderCell>
      </asp:TableHeaderRow>
      <asp:TableRow>
          <asp:TableCell HorizontalAlign="Left" ColumnSpan="2">
            <asp:TextBox runat="server" ID="TextBoxComment" TextMode="MultiLine" MaxLength="100" Height="100" Width="500" />
         </asp:TableCell>
      </asp:TableRow>
      <asp:TableRow>
         <asp:TableCell ColumnSpan="2">
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" 
            ControlToValidate="TextBoxComment" 
            ValidationExpression="^[\s\S]{0,300}$" 
            ErrorMessage="Your comment must be less than 300 characters." runat="server"></asp:RegularExpressionValidator>
         </asp:TableCell>
      </asp:TableRow> 
      <asp:TableRow>
         <asp:TableCell HorizontalAlign="Center" ColumnSpan="2">
            <asp:Button OnClick="onclick_submitComment" Width="100" ID="SubmitMessage" runat="server" Text="Submit" />
         </asp:TableCell>
      </asp:TableRow> 
      <asp:TableRow><asp:TableCell>&nbsp;</asp:TableCell></asp:TableRow>
      <asp:TableRow>
         <asp:TableCell ColumnSpan="2"> 
            <asp:GridView ID="blogGridView" runat="server" AutoGenerateColumns="False"
               Width="507" BackColor="White" BorderColor="#999999" BorderStyle="None"
               BorderWidth="1px" CellPadding="3" GridLines="Vertical" > 
               <RowStyle BackColor="#FFFFFF" ForeColor="Black" HorizontalAlign="Left"/>

                  <Columns>
                    <asp:TemplateField>
                       <ItemTemplate>
                          <asp:Table ID="feedbackTable" runat="server">
                             <asp:TableHeaderRow>
                                <asp:TableHeaderCell HorizontalAlign="Left">
                                   Comment posted: <%# Eval("TIMESTAMP") %> by <%# Eval("NAME") %>
                                </asp:TableHeaderCell>
                            </asp:TableHeaderRow>
                            <asp:TableRow><asp:TableCell>&nbsp;</asp:TableCell></asp:TableRow>
                            <asp:TableRow>
                              <asp:TableCell HorizontalAlign="Left"><%# Eval("COMMENT") %></asp:TableCell>
                            </asp:TableRow>
                       </asp:Table>
                     </ItemTemplate>
                  </asp:TemplateField> 
                </Columns>

                 <HeaderStyle BackColor="#2BA94F" ForeColor="White" />
                 <AlternatingRowStyle BackColor="#CCFF99" />
              </asp:GridView>
          </asp:TableCell>
        </asp:TableRow> 
     <asp:TableRow><asp:TableCell><asp:HiddenField ID="BLOGID" runat="server" /></asp:TableCell></asp:TableRow> 
  </asp:Table> 

On this website I use a Master page. In this example my web user control (.ascx) is contained within a webform (.aspx) which is containtws within a master page (.master).  I need to understand this when I am passing my BLOGID from the web user control to the webform. I accomplish this by placing a HiddenField within the web user control (see above) and make it accessible to my web form from within my web user control code-behind (see below).  I will set the BLOGID from the web forms code-behind for each blog which I cover below.

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Data.SqlClient;
using TBCSPITW;

public partial class include_LeaveFeedBack : System.Web.UI.UserControl
{
     public string _BLOGID
     {
          get { return BLOGID.Value.ToString(); }
          set { BLOGID.Value = value; }
     }

     protected void Page_Load(object sender, EventArgs e)
     {
          DisplayFeedback();
     }

     public void onclick_submitComment(object sender, EventArgs e)
     {
          string COMMENTID = Guid.NewGuid().ToString();

          string NAME = ((TextBox)FindControl("TextBoxName")).Text;
          string EMAIL = ((TextBox)FindControl("TextBoxEmail")).Text;
          string SUBJECT = ((TextBox)FindControl("TextBoxSubject")).Text;
          string COMMENT = ((TextBox)FindControl("TextBoxComment")).Text;

          FeedbackDAC.InsertFeedbackComment(_BLOGID, COMMENTID, SUBJECT, COMMENT, EMAIL, NAME, "", "");

          ((TextBox)FindControl("TextBoxName")).Text = "";
          ((TextBox)FindControl("TextBoxEmail")).Text = "";
          ((TextBox)FindControl("TextBoxSubject")).Text = "";
          ((TextBox)FindControl("TextBoxComment")).Text = "";

          DisplayFeedback();
     }

     public void DisplayFeedback()
     {
          using (SqlDataReader reader = FeedbackDAC.GetFeedback(_BLOGID))
          {
               GridView gw = new GridView();
               gw = (GridView)FindControl("blogGridView");

               gw.DataSource = reader;
               gw.DataBind();
          }
     }
} 

From within the web user control code-behind, I call the InsertFeedbackComment when the submit button is clicked.  As well, I call the GetFeedback method when the page is loaded and again after an insert ocurrs.  Pay special note to the FindControl method.  This is what I use to find my textboxes and gridview which, when rendered are within a webform.




Inside of my BLOG web form, I need to register the web user control and then place the tag where I want it to be displayed.

At the top of the BLOG web form I need to register the web control:

<%@ Register TagPrefix="FEEDBACK" TagName="fbFORM" Src="~/include/LeaveFeedBack.ascx" %> 

At then I make a reference to the web user control from within my web form where I want it to display:

<FEEDBACK:fbFORM ID="FbFORM1" runat="server" /> 

An lastly, from within my BLOG web form code-behind, I set the web user controls Hidden Field:

protected void Page_Load(object sender, EventArgs e)
{
     FEEDbackForm._BLOGID = "09687D0B-C61F-4BD2-AE43-C3FB77285122";
} 

Relatively easy to do.

In the example we did a few things:

  1. Access a hidden field on a web user control from the hosted web form.
  2. Create a web user control (.ascx) and the code-behind (ascx.cs)
  3. Create a feedback form

Some enhancements?

  1. Add an administrative component that allows someone to delete a message.
  2. Add the capability to flag an message as offensive

Let me know if you found this useful.




Leave a Comment

Your email address will not be published.