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

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

[sourcecode language=”csharp” gutter=”false” toolbar=”false” autolinks=”false”]
<%@ 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>
[/sourcecode]

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.

[sourcecode language=”csharp” autolinks=”false” gutter=”false” toolbar=”false”]
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();
}
}
}
[/sourcecode]

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:

[sourcecode language=”html” autolinks=”false” gutter=”false” toolbar=”false”]
<%@ Register TagPrefix="FEEDBACK" TagName="fbFORM" Src="~/include/LeaveFeedBack.ascx" %>
[/sourcecode]

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

[sourcecode language=”html” autolinks=”false” gutter=”false” toolbar=”false”]
<FEEDBACK:fbFORM ID="FbFORM1" runat="server" />
[/sourcecode]

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

[sourcecode language=”csharp” autolinks=”false” gutter=”false” toolbar=”false”]
protected void Page_Load(object sender, EventArgs e)
{
FEEDbackForm._BLOGID = "09687D0B-C61F-4BD2-AE43-C3FB77285122";
}
[/sourcecode]

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.