Build and Deploy Installer Project using TFS 2010

Every time I search on how to build and deploy visual studio installer projects using TFS 2010 build process I couldn't find nice step by step to it.  But I found a youtube video uploaded by Sangamon Valley .NET User Group which is on Build Automation and Continuous Integration using TFS 2010.   It is very good and I highly recommend if you are new to TFS 2010 build especially. Check it out I have embedded the video below.  If you are looking for Installer project then it is after half way through the video.

Understanding SignalR and some Knockout.js to do real time communication

In this post, I demonstrate how to create a simple SignalR application using SignalR open source library.  SignalR makes it easy to do real time asynchronous two way communication with server and client.

Open Visual Studio and hit Ctrl+Shift+N to create a new project and click on “ASP.NET Empty Web Application”.  I am using Visual Studio 2012 and .Net Framework 4.5.

Then we are going to install SignalR dlls using Nuget Package Manager.  Right click the project in solution explorer and click on Manage Nuget Packages as shown below.

Or hit Ctrl+Q and type “Nuget” in the quick launch box and click on the first one as shown below.

Hit Ctrl+E and Search for “SignalR” then Click on Install on the first one which is what we need.  Then again install lastest version of jQuery by doing the same thing because SignalR will bring down one or two minor version older.

Hit Ctrl+Shift+A on your keyboard to Add a new class named “myUtilHub.cs” to our solution and add the following code to it.

Add two using statements to add reference to SignalR and SignalR.Hubs and create a public method called sendMessage(). The add code that will talk to our clients will be through Clients class and a dynamic expression which should be a javascript function defined on the individual clients. If you mouseover talk you will see that it is a dynamic expression. The Clients class is available to you when you import SignalR namespace.

Ctrl+Shift+A and add javascript file named myUtil.js to solution and add this function in the extend method of myUtil.js.  The $.extend method of jquery will add properties to our util hub on the client side. You can add as many functions as you want. The server will be able to communicate with these methods via a dynamic expression.
Hit Ctrl+Shift+A and add html page named demo.html and add the following code to it. Now in this function you can get the data that was passed to us and render it inside the div tag of our demo.html.
Right click on demo.html in solution explorer and then click on setup as start page and hit F5 to run the application. You will start seeing the messages as shown below and if you open another browser and type type the same url you will see same output appear in real time.  In IE9 check the document mode, it should be to IE9 for this demo to work.

We can pass data to our sendMessage function like sendMessage("Hello world"); and on the server side we can change our function to accept values from clients like sendMessage(string myvalue).

You can pass .Net object to all clients  and we can access those objects properties in our client side JavaScript.  For example, if you want to pass a DateTime object and access its properties in client side JavaScript then you can do that too.  Change the code of sendMessage() function in our myUtilHub.cs as follows:

In our talk function of hub inside myUtil.js file we will access performance counter's RawValue property to get % Processor Time.

All looks good but there is a problem here.  We don't want to keep scrolling for every new value so we would like to update the UI as the data comes in and I wanted to see if I could do this with the help of Knockout.js or not.  So here it goes.  First of all follow the step to add a Nuget package and then install "Knockout.js" package and add script reference to our demo.html add bindings to it.  Final demo.html
Now change myUtil.js to add ViewModel and add observable properties which will bind to the totalTime in html whenever any change is detected. I commented our all code to append something inside our div tag. Instead we are now using knockout.js to update the UI by passing in ViewModel. Now run the project and see the performance counter update in the browser in real time and this will work in all the browsers at the same time.

Visual Studio 2012 goes search first

Visual Studio 2012 is awesome and my favorite tool that I use daily.  The one thing that I like about VS2012 is how search is implemented more than before and its quick launch textbox on the top right corner.  In this post I want to highlight different places where search box is implemented and where you can  use a shortcut to highlight the box without using a mouse.  

Quick Launch with shortcut Ctrl+Q

In New Project dialog, search using shortcut Ctrl+E 

 Inside Solution Explorer, search for a particular file using shortcut Ctrl+;

      You can not only search for files but you can also search functions within files.  Absolutely magic, see the screenshot below where I searched details and it showed me where Details appeared.  Pretty Cool.

    Inside Team Explorer – Search work items using shortcut Ctrl+’

    Inside Reference Manager – Search using Ctrl+E.  Works for Package Manager dialog too.

        Inside Toolbox, search using well just click it.  Although I would love to have a shortcut to highlight that search box.

     Search Error List,

     Search a Class View

     Search in Code Analysis

If you find any place else a search box inside Visual Studio 2012 then let me know, I would be glad to include it in this post.

Navigate List of items with Up Down arrow using jQuery in Asp.Net MVC 4 app

This is a continuation from my previous post which demonstrated how to create a simple ASP.NET MVC 4 application with Entity Framework using Adventure Works 2008 Database and Visual Studio 2012.   In this post, I will show you how to navigate our list of products using up and down arrow.  I love how on Google search results page you can navigate search results by using up and down arrow. If you haven’t tried it then give it a try on Google.com.  (There are plenty of examples on this on StackOverflow. However, I have tweaked to make it work for my example.)

We are going to modify our products page so that we can select an individual product using keyboard up/down arrow. After you select a product and hit enter (or return key) it should open up a details page for this particular product. To make this happen we have to do few things.

1. We want to make products name as hyperlinks to details page so when you click on it, it should show us details page of that particular product. 
2. Add a details view to show product details 
3. Wire up the above two with a function in productscontroller.vb page 
4. Use jQuery to make this thing happen. 
5. Add Css to indicate which row is highlighted. 

In the Index.vbhtml change the first name as following: Add the following function in our ProductsController.vb

Right click the Details or anywhere in the function above and add another view with following details.

 Run the project and navigate to the following URL.

 Click on the first link and you will see details of it.

Now we have to add this simple javascript to this page.

@section scripts

     <script type="text/javascript">

    $(document).ready(function () {

        var $window = $(window);

        var current_index = -1;

        var $links = $("#plist").find(".detlink");

        var $rows = $("#plist").find(".prow");

        items_total = $links.length;

        //alert($links.length.toString());

        $window.bind('keyup', function (e) {

            if (e.keyCode == 40) {

                dehighlight_row();

                if (current_index + 1 < items_total) {

                    current_index++;

                    highlight_row();

                }

            } else if (e.keyCode == 38) {

                dehighlight_row();

                if (current_index > 0) {

                    current_index--;

                    highlight_row();

                }

            }

           

        });

       

        function highlight_row()

        {

            $rows.removeClass('prow');

            $rows.eq(current_index).addClass('prow-sel');

            //$input.val(current_index);

            $links.eq(current_index).focus();

        }

        function dehighlight_row() {

            $rows.removeClass('prow-sel');

            $rows.eq(current_index).addClass('prow');

            //$input.val(current_index);

            $links.eq(current_index).focus();

        }

    });

</script>

End Section

 From now onward if you want to add scripts to your individual view you should add them in a section as highlighted in yellow in the above code. This will render this tag at the bottom of you rendered page which is a recommended practice and improves performance. And this will load after the jquery scripts have loaded. If you don’t put your javascript script tag inside @section block then a Jscript runtime error will come up if you are debugging using Internet Explorer. If you are debugging using Chrome or Firefox it won't show you a dialog box with this error.

Microsoft JScript runtime error: '$' is undefined 

The above javascript code finds an element with “plist” which is our table and finds all the rows with “prow” class and puts in a $rows variable. Same thing we do will all the links with class “detlink” and put them in $links variable. And from there we just detect up and down arrow by checking the e.keyCode number and highlight and unhighlight that particular row. Once we find a particular row then we will focus that link by using .focus() function of jquery. $links.eq(current_index).focus();

Before finishing do this
1. Add id=”plist” to our table tag.
2. Add class="prow" to tag after for each loop
3. Add following classes to your site.css

.prow{}

.prow-sel {

    border:1px solid green;

}

Add a link to our navigation bar into our _layout.vbhtml page.

<nav>

                        <ul id="menu">

                            <li>@Html.ActionLink("Home", "Index", "Home")</li>

                            <li>@Html.ActionLink("About", "About", "Home")</li>

                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

                            <li>@Html.ActionLink("Products", "Index", "Products")</li>

                        </ul>

</nav>

Run the project and click on the products page and navigate using up down arrow and then enter to show the details page for the selected product. 

Give your feedback or if you find any bugs or have a better way of doing it, I would be more than happy to know about it.  Thanks.