Worthy of a dailywtf post?

Just followed a link on Twitter to vote for best celebrity tweeter. So went through the list finding someone to vote for and got the following error:

Sweet! :-)

Feedback module like MSDN in Asp.net MVC

Aim

Create a feedback module similar to the new one MSDN is using done in the asp.net MVC framework. This will including using some JQuery. Also I want to make it as steam lined and unobtrusive as possible. The functionality has to be user friendly but not interrupt current workflow.

This is the challenge … lets see how it goes!

Code

So the first issue which needed to be addressed was “how to get the view displayed?”. For this I initially turned to the Html.RenderAction() helper method and to render a partial view. I decided against this quite early on due to the restriction of posting actions back to the view which was nested into the main view. This seemed to cause issues with post backs and just felt wrong.

So decided to go the System.Web.Mvc.PartialViewResult route instead. To use this, the feedback controller required to return the PartialView for the actions which are required for this module of functionality.

Next was the flow of the interaction with the user; from clicking the initial link in the corner of the browser to submitting the comment, thanking the user and finally returning back to the original state.

To keep it simple, I kept the feedback model class very simple. This wasn’t the primary aim of this task so being able to submit a comment was good enough for this exercise.

namespace MvcApplication3.Models
{
    public class Feedback
    {
        public string Comment { get; set; }
        public DateTime Logged { get; set; }
        public string UserAgent { get; set; }
        public string Ip { get; set; }
    }
}

Like I said, very simple :-)

So, time for the controller. Due to the flow I needed to display the feedback partial view, display the thanks partial view and the actual submit action code with the model binding.

using System.Web.Mvc;
using MvcApplication3.Models;

namespace MvcApplication3.Controllers
{
    public class FeedbackController : Controller
    {
        //
        // GET: /Feedback/

        [HttpGet]
        public ActionResult Get()
        {
            return PartialView("Feedback");
        }

        [HttpGet]
        public ActionResult Thanks()
        {
            return PartialView("FeedbackThanks");
        }

        [HttpPost]
        public void Submit(Feedback feedback)
        {
            // update to the date required for logging
            feedback.Logged = DateTime.Now;
            feedback.UserAgent = Request.UserAgent;
            feedback.Ip = Request.UserHostAddress;
            
            // and save
            
        }
    }
}

I limited the http verbs on the actions so that they are restricted properly. So, all the c# code has been written. Looking at this it seems straight forward and relatively simple :-)

All the views would need to be accessed from a central location, so I put them in the shared view folder (see solution explorer view below).

Site.Master

The site master is where the feedback button is situated as it appears on each of the pages which uses this master page. From a markup perspective we needed to add the button div itself and the div which the partial views will be loaded into.

    <div class="feedback-button" title="Click here to tell us what you think!"><a id="feedbackLaunch">feedback</a></div>
    
    <div id="feedbackformDiv"> </div>

Where the magic happens is in the jQuery client side script. Instead of trying to explain it, I’ll just post it as we go and go through the highlights as the rest will be self explanatory.

        // global flag to display the feedback routine
        var displayFeedback = true;

        $(document).ready(function() {

            // display the feedback form
            $('#feedbackLaunch').click(function() {

                // depending on the feedback for, hide or show it
                if (displayFeedback) {
                    $('#feedbackformDiv').load('/Feedback/Get').fadeIn("slow");
                }
                else {
                    $('#feedbackformDiv').hide();
                }

                // flip the bit
                displayFeedback = !displayFeedback;
            });
        });

The main driving force of visibility is the displayFeedback variable. This has been declared at this level so that its scope is accessible from the partial views as well. The reason why I did this was that once the interaction flow had occured a double click on the feedback button was required to display the comment form again. This wasn’t required behaviour. I tried using the jQuery toggle functionality but this didn’t perform as required either.

Feedback.aspx

The partial view is where the main action happens. This is the main display form which prompts the user for the comment and to submit it.

This is made up of the header which has a close button on it, and the main form with a simple submit button. The markup and script of the file is below:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcApplication3.Models.Feedback>" %>

<script type="text/javascript">

    $(document).ready(function() {

        $('#feedbackForm').submit(function() {

            var action = $('#feedbackForm').attr('action');

            $.post(action,
                            $('#feedbackForm').serialize(),
                            callBack);

            return false;

        }); // end of form submit function

    }); //end of document ready function

    // call back function to load in the thanks view
    function callBack(e) {
        $('#feedbackformDiv').load('/Feedback/Thanks');
    }

    // close the feedback and reverse the displayfeedback bool value
    function closeFeedback() {
        $('#feedbackformDiv').hide();

        if (displayFeedback != undefined) {
            displayFeedback = !displayFeedback;
        }
    }

</script>

<div class="feedback-ui">
    <div class="feedback-ui-header">
        Please leave some feedback
        <div class="feedback-ui-header-close">
            <a href="javascript:closeFeedback();">x</a>
        </div>
    </div>
    <div class="feedback-ui-panel">
        <form action="<%= Url.Action("Submit", "Feedback") %>" id="feedbackForm" method="post">
        <p>
            <%= Html.LabelFor(model => model.Comment) %>
            <%= Html.TextAreaFor(model => model.Comment, 5, 50, new { Width = "350px;", Height = "150px;" }) %>
            <%= Html.ValidationMessageFor(model => model.Comment) %>
        </p>
        <p>
            <input type="submit" value="Submit" />
        </p>
        </form>
    </div>
</div>

This is all relatively straight forward, the main bit to notice is the  serialize method on the form jQuery object. This serializes the contents of the form to the action. I originally thought this may get in the way of the model binding with the mvc framework into the action, but it magically sorts itself out. Genius!

The other part of functionality is the call back function from the form submit action. Very simply, this just loads in the next partial view to thank the user for submitting their comment to the team.

FeedbackThanks.aspx

The thanks form is very simple. Just a way of displaying a thank you note to your users and then disappear again leaving the user where they were, as if it never happened.

All the client side javascript does is after a defined time hit the thanks form you see above and invert the boolean variable to make the show/hide work correctly.

<script type="text/javascript">

    $(document).ready(function() {

        setTimeout(function() {
            $('#feedbackformDiv').hide();
            if (displayFeedback != undefined) {
                displayFeedback = !displayFeedback;
            }
        }, 2000);

    });
    
</script>

<div class="feedback-ui-thanks">
    <div class="feedback-ui-header">
        Thanks</div>
    <div class="feedback-ui-panel">
        Thanks for helping improve our application.
    </div>
</div>

And that’s it.

Summary

So what have we learnt from this little exercise:

• Creation of views through the Visual Studio tooling for Asp.net MVC



• jQuery basics – selectors, built in functions and basic dom manipulation



• Partial view actions through controllers



• Strongly typed model formatting

Additional extension points which would be good to plug in would be:

• Additional fields / different types of feedback options



• Response validation

What’s next?!

Well over the next couple of months I will be working on some interesting things and techniques and I hope to find time to share some of them with you all. If you have any suggestions of things to do, or any improvements then please leave a comment or get in contact through twitter.

WCF and serializing custom objects

I’ve been setting up an wcf service for a new n-tier system which I am currently architecting and developing at work. I’m trying to get to the point where all tiers store the data in the same objects (Entities) and they are worked on at different levels. These are simple POCO Entity objects which only store the data values and defined the data annotations to be used with validation. This will require the WCF service to be able to serialize the custom objects and transmit them between the tiers and in future, who knows maybe to a Silverlight client application as well?!

So, with the objects in place and with the correct DataContract and DataMember attributes in place I get the following error message when trying to pass them through the service between tiers:

“The underlying connection was closed: The connection was closed unexpectedly.”

After doing some Googling I came across the following blog post which had some handy pointers … thanks Bishoy Labib. But the biggest help was from a post by Damir Dobric. His post explaining how the "KnownTypeAttribute” is used when sending through data over a wcf service was very handy.

So after decorating the interface with each type of Entity I had which (3 so far) I built the project, got the service reference to update to get the latest definition and ran it with fingers crossed … it worked!

Damir had adding each of the types which might be used through the WCF service interface defined individually, then refactored it by adding them through the KnownTypeContainer (similar to below) and added them manually. This wouldn’t quite work for me as there are going to be, probably, lots of entities and I don’t want to have to add one individually each time. As all the entities are defined in a single project, I thought with a little reflection on the Assembly I could dynamically load them in so came up with this …

[ServiceKnownType("GetAllMyKnownTypes", typeof(KnownTypeContainer))] 
[ServiceContract(Namespace = "http://mynamespace/2009/IApplication")] 
public interface IApplication 
{ 
    [OperationContract] 
    string Echo(string value); 

    [OperationContract] 
    Entities.EntityBase Execute(string action,
                    Dictionary<string, object> parameters); 
} 

static class KnownTypeContainer 
{ 
    public static IEnumerable<Type>
            GetAllMyKnownTypes(ICustomAttributeProvider p) 
    { 
        return new List<Type>(
                Assembly.Load("Entities").GetTypes()
                ); 
    } 
}

Nothing special, or clever, just need to make sure that all the Entities derive from the common EntityBase abstract class to work.

Thanks go to Damir for the original post and getting me through my issue I was having :-)