Archive

Archive for the ‘VS 2010’ Category

JQuery Template

March 3, 2011 2 comments

One of the reasons I started blogging was to document my project and learning experiences while working on complex problems. Right from the beginning of my career I was good in writing quick prototypes and small end-to-end proof of concepts, but what I was really not good at was the ability to remember it after sometime. So that way my blog is becoming my software repository and I am glad that it helping other guys who are about to use a particular technology or design principle.

In today’s post I am going to talk about JQuery Template although I did mention briefly about it in my previous post a 8 months ago. But this time I am going to show a full end to end solution and some tips.

The powerful thing about JQuery template is that the template runs in the browser (i.e. on client side) and hence you are taking the client CPU in order to process the template, it’s also better than using string concatenation server side and building HTML string.

So I am going to show a simple list of contact i.e Full name,Age,Phone and some sort of description and our contact class looks like this.

Contact.cs

public class Contact
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Phone { get; set; }
    public string Description { get; set; }

    public Contact(string name,int age,string phone,string description)
    {
        Name = name;
        Age = age;
        Phone = phone;
        Description = description;
    }
}

and the controller

ContactController.cs

public class ContactController : Controller
{
    public JsonResult GetContacts()
    {
        List<Contact> contacts = new List<Contact>()
        {
            new Contact("Joe Blogg",29,"02-6290-0011","A good fellow"),
            new Contact("James Weathers",39,"02-6290-0012","An intelligent fellow"),
            new Contact("John Smith",49,"02-6290-0013","A very wise fellow")
        }; // Just for the demo

        return Json(contacts, JsonRequestBehavior.AllowGet);
    }
}

The reason for returning a JSONResultSet is to show you guys how we can use JQuery to invoke the controller action. Lets see how the view looks like.

Index.aspx

<%@ Page Title="" Language="C#" 
         MasterPageFile="~/Views/Shared/Site.Master" 
         Inherits="System.Web.Mvc.ViewPage<JQueryTemplate.Models.Contact>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Contact
</asp:Content
>
<
asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Contact</h2>
    <script type="text/javascript">

        var templateName = "contactTemplate";
        var resultList = "#contactList";

        $(document).ready(function () {
            $("#jq-getData").click(function () {
                showContacts();
            });
        });

        function showContacts() {
            $.getJSON("/Contact/GetContacts", function (data) {
                var markup = getMarkup();
                clearResultList();
                loadTemplate(templateName, markup);
                applyTemplate(data);
            });
        };

        function getMarkup() {
            var markup = "<tr><td colspan=’2′ title=’${Description}’>${Name}</td><td>Age: ${Age}</td><td>Phone: ${Phone}</td></tr>";
            return markup;
        };

        function clearResultList() {
            $(resultList).empty();
        };

        function loadTemplate(templateName, markup) {
            $.template(templateName, markup);
        };

        function applyTemplate(data) {
            $.tmpl(templateName, data).appendTo(resultList);
        };

    </script>

    <input type="button" id="jq-getData" value="Click" />
    <table><tbody id="contactList"></tbody></table
>
</
asp:Content
>

Okay that looks bit lengthy code and I will try to break it down, I will start with the main function showContacts as it is main method which orchestrate other methods.

1. Get Json data for contacts by invoking the GetContacts action on the controller.

2. Get the markup (html template).

3. Clear the Dom element which will hold the output before any processing.

4. Load the template with the template name and assign the markup to it.

5. Apply the template.

As far as writing the template is concern it’s pure html tags and mark each place holders with the “${attribute}” pattern. The important thing is that the attributes in the template placeholder has to match the property of attribute of your JSON object.Lets run the application and see how it renders on the browser.

Result output

Nothing special as you can see the JSON object has the same attribute as it was in the template markup and the template engine was able to map it and process the html. Lets take a look into the caching headers send by the web server when we requested this JSON object.

Result output

As you can see “Last modified” and “Last fetched” are showing the current time but the “Expiry” header is showing a back date of “1970”, this means that every time the page is refreshed or loaded it will request the JSON over and over again and it can impact on your website performance and scalability. Lets fix it by providing some caching into this request by adding and Output Cache directive to the GetContacts action.

[OutputCache(Duration=60,VaryByParam="")]
public JsonResult GetContacts()
{
    List<Contact> contacts = new List<Contact>()
    {
        new Contact("Joe Blogg",29,"02-6290-0011","A good fellow"),
        new Contact("James Weathers",39,"02-6290-0012","An intelligent fellow"),
        new Contact("John Smith",49,"02-6290-0013","A very wise fellow")
    };

    return Json(contacts, JsonRequestBehavior.AllowGet);
}

After this build the solution and request the page again and you will see the expiry headers are added to the response and now the page will be cached on the browser for a minute.

Result output

That’s it for today and I hope you guys will find this end-to-end JQuery Template solution useful for your projects.BTW the Jquery template is available from Microsoft CDN site at http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js.

Advertisements

JQuery Snippets

August 12, 2010 1 comment

If you are web developer or thinking into moving to the lighter side (with a pun 😉 ) then you simply can’t ignore JQuery and in my personal opinion invest some time and energy into it and it will pay you off in the long run.

A couple of weeks ago I blogged about the free JQuery ebook and I also blogged about how to roll out your own code snippet using the code snippet designer.

This post is about the jQuery snippets which I think is a great way of learning jQuery syntax. You can download it from here. Once it’s downloaded unzip the file, run the msi and complete the installation.

Before we start using the snippets lets browse to the “Documents\Visual Studio 2010\Code Snippets\Visual Web Developer” folder and as you can see there are two folders “My HTML Snippet” and “My JScript Snippets”.

Under “HTML Snippets” folder

Under the HTML Snippets folder

Under JScript Snippets” folder

Under JScript Snippets folder

If you open one of these snippet files you can see it is quite similar to what we did using the snippet designer and shows the full potential of using snippets in your own development environment.

Lets start using the snippets and get some jquery code in our page. Below is a simple html page and when we type the keyword “jq”

Just type in jq

and when we hit tab twice the snippet generates the base jquery code, it’s that simple.

Code generated by the snippet

Now it’s not too scary to get use to of jQuery syntax .

The Art of Mocking – Part 3

August 10, 2010 Leave a comment

Before completing the trilogy let’s have a quick recap on what we have done so far.

The Art of Mocking – Part 1
The Art of Mocking – Part 2

One of the biggest gotchas for mocking framework is that you can’t mock a sealed class and can only mock either an interface or an abstract class. If you every try doing it to a sealed class you get this exception.

Type to mock must be an interface or an abstract or non-sealed class.

We learned in the previous posts how we can design our classes using SOLID and TDD principle so that you can use mocking framework to test it in isolation, but how about a piece of code which has a dependency on an existing .NET framework class which is sealed or doesn’t provide an interface or an abstract. How would you approach mocking with that.

For example we had a lot of problems when we were using LinqToSql as it’s DataContext class does not provides and interface and the System.Data.Linq.Table class is a sealed class and the work arounds were not that great.

Lind Table class

It’s an interesting problem and this is where an interesting framework comes into picture and it’s called Moles Framework. Moles is part of the Microsoft pex and moles research project, it can be downloaded from visual studio gallery but for PEX you need a MSDN subscription.

I haven’t played with it yet but through the documentation I could see what its potential is, and if I come across something which I can’t mockup I will use it rather extracting interfaces and working on workarounds.

Snippet Designer

July 14, 2010 1 comment

The snippet designer is a very cool plugin and productivity tool for VS2010. This is very useful for creating custom code snippet/template and the best part is you can export an existing code into custom snippet .I will walk you through step by step on how to maximize it’s use.

Step 1: Download it from codeplex and install.

Step 2: Take your existing code and convert into a snippet.

Step 3: Transform the key code into replacements variables(like macros) by decorating it with “$” on the both ends. In this case I have decorated both the interface IDrive and the method DriveMethod(). ( I know it just should be Drive but I am thinking more from templating point of view)

Step 4: On the properties of the snippet code file set the shorcut word which when typed will generate the code stub.

Step 5: Save the file under Code snippet directory structure.

Step 6:Type in the shortcut,tab it and viola the code is generated.

This could be very useful for your day in day out interface, business layer, service layer kind of code snippet.

Categories: VS 2010 Tags: ,

Group Items Plugin

A friend of mine showed me this plug-in for Visual Studio 2010 which is great for grouping items.

Grouping items plug-in

and you can read all about it at Mokosh Blog post.I really like to group various interfaces and its implementing classes together as shown above.

Power Commands for Visual Studio

June 9, 2010 1 comment

Check out the PowerCommands for Visual Studio 2010 which Scott Hanselman has blogged.

The power commands tools are really good productivity tool and I have been using it since VS2008 . One of the main features i like about this tool is “Copy Reference” which comes very handy at times working through big project restructure. Have a quick browse through the “Gallery” & you never know you might find something interesting