The Blog of Ian Mercer.

Putting a feedback button on every page with ASP.NET MVC and JQuery

Feedback
button

You've probably seen many web sites with the floating 'feedback' button down the side. Here's how to add one to your site using jQuery, jQuery UI and ASP.NET MVC.

First make sure you have jQuery and jQuery UI referenced in your master page view together with the CSS file for whichever jQuery UI theme you have chosen.

We'll make a few changes to the master page view to add the pop-up feedback form, we'll add an action on a controller to accept the feedback that is posted, and we'll need a small amount of CSS.

So, after referencing those javascript files and the theme CSS, the first thing to do is to add the following HTML to the bottom of your master page view:

<div id="feedbackdialog" style="width:300px; height:300px;text-align:left;">
	<p>Your name and/or email: 
	<br >
	<input type="text" id="feedbackEmail" name="feedbackEmail" size="34" value="<%: this.Model.AccountEmailOrEmpty %>" /> 
	</p>
	<p>Comment:<br> <textarea id="feedbackComment" name="comment" cols="35" rows="5"></textarea>
	</p> <br />
	<div id="feedbackResult">
	</div>
</div>

Now add this code to your global javascript file that also referenced from your master page view ... don't embed it in the page, go ahead and do the right thing and put it in a .js file so it's not a burden on every page.

//function for the feedback form 
$(document).ready(function () { /* Create the feedback dialog */

$("#feedbackdialog").dialog( { 
	closeOnEscape: true, modal: true,
	autoOpen: false, resizable: false, title: 'Feedback', width: 400,
	buttons: { "Send": function () { var dlg = $(this);
	$.post("/corporate/suggest", { email:
	dlg.find("input[name='feedbackEmail']").val(), comment:
	dlg.find("\#feedbackComment").val(), url: document.location.href },
	function (data) { 
		dlg.dialog('close'); } ); 
		$(this).html("<p id='feedBackSending'>Sending</p>").dialog({ buttons: {} });
		} } });

	$('.contact\_us').click(function () 
	{
		$("\#feedbackdialog").dialog("open"); 
		return false; 
	});
});

Next we'll add the action referenced here, in the example we used the url '/corporate/suggest' so, assuming you have a controller called CorporateController, add the following action to it ...

	public ActionResult Suggest (string email, string comment, string url) 
	{
		if (!string.IsNullOrWhiteSpace(comment)) 
		{
			// here we will log the feedback to the database and/or send it in email
		} 
		return View(); 
	}

Create a view for 'Suggest', it doesn't matter what's in it as we don't use the result currently.

And, finally we need a bit of CSS for the feedback icon itself:

	/* Feedback tab */ 
	#feedbackTab 
	{
		right:0; position:fixed; width:32px; height:150px; top: 150px; z-index:1; 
	}

The feedback button now floats on every page, 150px from the top and it's glued to the right hand side.

Of course you'll need your own feedback image, or feel free to borrow the one here:- http://www.signswift.com/images/feedback.png

So with that all in place, click the feedback button and a form like this should appear. Fill the information in and send it to the server. Note how we silently grab the url of the page too so we can see which page they were on when the submitted the feedback.

Feedback Form

Related Stories

Xamarin Forms Application For Home Automation

Building a Xamarin Forms application to control my home automation system

Ian Mercer
Ian Mercer

JSON Patch - a C# implementation

Ian Mercer
Ian Mercer

Dynamically building 'Or' Expressions in LINQ

How to create a LINQ expression that logically ORs together a set of predicates

Ian Mercer
Ian Mercer

VariableWithHistory - making persistence invisible, making history visible

A novel approach to adding history to variables in a programming language

Ian Mercer
Ian Mercer

Updated Release of the Abodit State Machine

A hierarchical state machine for .NET

Ian Mercer
Ian Mercer

Building a better .NET State Machine

A state machine for .NET that I've released on Nuget

Ian Mercer
Ian Mercer

The Internet of Dogs

Connecting our dog into the home automation

Ian Mercer
Ian Mercer

A simple state machine in C#

State machines are useful in many contexts but especially for home automation

Ian Mercer
Ian Mercer

Convert a property getter to a setter

Ian Mercer
Ian Mercer

MongoDB Map-Reduce - Hints and Tips

Ian Mercer
Ian Mercer

Weather Forecasting for Home Automation

Ian Mercer
Ian Mercer

Lengthening short Urls in C#

Ian Mercer
Ian Mercer

ASP.NET MVC SEO - Solution Part 1

Ian Mercer
Ian Mercer

Building sitemap.xml for SEO ASP.NET MVC

Ian Mercer
Ian Mercer

Tip: getting the index in a foreeach statement

A tip on using LINQ's Select expression with an index

Ian Mercer
Ian Mercer

WCF and the SYSTEM account

Namespace reservations and http.sys, my, oh my!

Ian Mercer
Ian Mercer

404 errors on IIS6 with ASP.NET 4 Beta 2

Ian Mercer
Ian Mercer

Mixed mode assembly errors after upgrade to .NET 4 Beta 2

Fixing this error was fairly simple

Ian Mercer
Ian Mercer

The EntityContainer name could not be determined

How to fix the exception "the entitycontainer" name could not be determined

Ian Mercer
Ian Mercer

Shortened URLs should be treated like a Codec ...

Expanding URLs would help users decide whether or not to click a link

Ian Mercer
Ian Mercer

A great site for developing and testing regular expressions

Just a link to a site I found useful

Ian Mercer
Ian Mercer

Entity Framework in .NET 4

Ian Mercer
Ian Mercer

System.Data.EntitySqlException

Hints for dealing with this exception

Ian Mercer
Ian Mercer

Exception Handling using Exception.Data

My latest article on CodeProject covers the lesser known Exception.Data property

Ian Mercer
Ian Mercer

Javascript error reporting

Sending client-side errors back to a server for analysis

Ian Mercer
Ian Mercer

ASP.NET Custom Validation

How to solve a problem encountered with custom validation in ASP.NET

Ian Mercer
Ian Mercer

Optimization Advice

Some advice on software optimization

Ian Mercer
Ian Mercer

Linq's missing link

LinqKit came in handy back in 2009

Ian Mercer
Ian Mercer

Cache optimized scanning of pairwise combinations of values

Using space-filling curves to optimize caching

Ian Mercer
Ian Mercer

Threading and User Interfaces

A rant about how few software programs get threading right

Ian Mercer
Ian Mercer