Web

Asp.NET MVC 3 Razor

This one should be obvious by now, but I’m completely in love with Asp.NET MVC 3 Razor. Web forms to me now is a huge turn off, and after using MVC for so long, Web forms seems counter-productive. That’s not to say I push MVC everywhere I go; there are some applications that are, in their current form, working great and in no need of replacement. Nonetheless, if you really want to feel like a web developer again, checkout MVC.

jQuery

This very cool framework brings to me the power to manipulate the DOM with ease as if it were functional CSS. With built-in helper functions for AJAX & JSON handling, it’s a no brainer when I want to do some real quick javascript work on a website.  Coupled with KnockoutJS, this can be a very powerful set of Web 2.0 tools

jQuery Tmpl & KnockoutJS

Templating client-side is a breeze with these two tools. If you want to learn how to render content client-side, definitely give these a try first. knockout even has a real-time tutorial website where you can learn to use it. Great stuff!

FireBug/Chrome

FireBug plugin for Firefox is ultimately my favorite web debug tool for both CSS and javascript. It’s clean, easy to read, and very nicely shows net traffic for ajax calls. I’m not saying the Chrome tools are bad, they’re very pretty and useful. I use Chrome almost full time now for browsing. But definitely while designing/debugging, firefox is my favorite.

Databases

At work

Sql Server (pick an edition) 2008 R2. In the enterprise, this system is awesome in combo with .NET applications. All .NET ORM tools across the board work with it, and it’s very easy to use.  Using the latest Sql Management Studio w/ any other version of sql server is also a breeze.

At home

I’m really digging MongoDB. It’s a complete departure of what I’m used to growing up in the Microsoft world. At the same time it’s redundant, very, very fast, and cuts a ton of work out of my data management in projects since you’re storing documents. Serialize your aggregate root, done!  Very cool.

.NET Data Access

Pick your flavor, but the two I have most experience recently are: SubSonic & Fluent Nhibernate.  I really dig the new EF 4.1 Code First. But my favorites tend to be the ones that are the simplest to setup and use. (I suppose EF 4.1 could fit that category; Nhib, not so much). Recently with my MongoDB work at home, these layers all went by the wayside. Using a repository, it’s very easy to layer in an abstract CRUD base and let your repository become more business oriented as it should. All these layers work pretty well with that.

BDD,Testing

Machine.Specifications

This is the coolest thing ever. I know there are a ton of testing frameworks out there, but this one really makes things simple. I even like the primitive report they generate, which is great for listing out specifications for a project. Together with MvcContrib & Rhino Mocks, it’s a very powerful testing framework.

MvcContrib

This contains a great set of testing helpers to assist in your test driven development. It has cool methods like AssertViewRendered().ForView(“nameyourview”).ViewData.Model.Shouldxxx  You can use it to assert end-to-end the behavior of your MVC Application. It also contains a nice HTTP Context builder for testing against fake HttpContext.

Rhino.Mocks

This is a great mocking framework. It’s very easy to use. This is one of those “pick your flavor” type things. There’s a TON of mocking frameworks out there or you could just roll your own.

TestDriven.Net

This is a very cool (free for FOSS individual projects) test runner tool for Visual Studio. You can debug, and run with any configured testing framework like Nunit, Xunit, Mspec, etc. This can save you a lot of time; and is a great alternative if you don’t have Resharper. (I’m not a Re# user yet, but we’ve been pushing it at work quite a bit lately; need to give it a spin).

Source Control

git

Man, I love git. This is a very, very powerful SCM, and it’s free. Written by Linus himself, this tool is fast, efficient and very flexible for small or large development teams. It’s very branch/merge friendly and you can setup multiple remote storage areas for your repositories. Coming from a SourceSafe/TFS/Subversion background, this a completely new way of thinking about code management. I highly recommend checking out TekPub’s Mastering Git series and the huge handful of git websites out there dedicated to teaching its use. I push this where I can; especially if a shop is still on SourceSafe.  Yeah it’s command line only; but lemme tell ya, when you really learn how to use and understand it, you’ll never look back. My only shameless preach is that you need to start building code using feature-based branching. Branch, branch, branch. Don’t be afraid of it.

MsysGit is a great Windows port

gitosis

Linux based, git repository management. This tool is very easy to use for managing git repositories on a server. It easily sets up SSH based repositories that are accessible from the home directory and provides a nice way of managing repositories and user access via public keys. Gitosis for Ubuntu has some pretty good docs.

viewgit

This very tiny php website does a pretty good job of simply enumerating and making available git version history, branches, tags, and blobs over a web interface. (I’m currently looking at CGit and others as an alternative; this just happened to be the first one I tried out).

github.com

The best SCM website ever. They have a great git log diagram (network). They provide a wiki, bug tracker, release tracking, etc for all projects. Mono has moved their source over to it along with a handful of other large projects. The paid accounts give you access to store your code securely in the cloud while the free accounts let you share and invite community members to contribute to your projects very easily.

Enjoy!

Starting out, client-side on the calling page, I setup my script. This function makes a request to the server and expects a jsonp response back. The default “success” handler is optional here and will be invoked along-side the one you specify for jsonp.

$.ajax({
    url: 'http://other-domain/api/GetInformation',
    data: { key: 'some data key, this parameter is optional' },
    type: "GET",
    dataType: "jsonp",
    jsonpCallback: "localJsonpCallback"
});

function localJsonpCallback(json) {
    //do stuff...
}

We need to setup the server side.  I’m using Asp.Net MVC, so I built this new ActionResult for handling Jsonp GET requests. I copied most of the code from the original JsonResult class in System.Web.MVC Ms-Pl code. Before I show you that, you should see it in action. Here I have a controller action that uses JsonpResult:

public JsonpResult GetInformation(string key)
{
    var resp = new Core.Model.CustomObject();
    if (validateKey(key))
    {
        resp.Data = "some custom message";
        resp.Success = true;
    }
    else
        resp.Message = "unauthorized";

    return this.Jsonp(resp); //using extension method
}

This automatically handles all the fancy Jsonp work that goes on behind the scenes.  It serializes the custom object into Json and wraps it with the callback function. So your response appears something like this:

localJsonpCallback({"Data":{"Success":true, Message: "some custom message"}});

I setup an extension method to use controller.Jsonp(object) just as you do the existing controller.Json(object) method already available. This should make it a lot easier to handle. It will inspect the call for the json callback itself so you also don’t have to manually pull it from the request.  It will also work with the two different types of callback requests parameters in use out there like: “jsoncallback” and “callback.”

/* ****************************************************************************
 *
 * Copyright (c) Microsoft Corporation. All rights reserved.
 *
 * Content of this class was mostly derived from the original
 * JsonResult class in the System.Web.Mvc 2.0 RTM Assembly. This
 * has beeen slightly extended for use with JSONP calls.
 *
 * This software is subject to the Microsoft Public License (Ms-PL).
 * A copy of the license can be found in the license.htm file included
 * in this distribution.
 *
 * You must not remove this notice, or any other, from this software.
 *
 * ***************************************************************************/

namespace System.Web.Mvc
{
    using System;
    using System.Text;
    using System.Web;
    using System.Web.Mvc.Resources;
    using System.Web.Script.Serialization;

    public class JsonpResult : ActionResult
    {

        public JsonpResult()
        {
        }

        public Encoding ContentEncoding
        {
            get;
            set;
        }

        public string ContentType
        {
            get;
            set;
        }

        public object Data
        {
            get;
            set;
        }

        public string JsonCallback { get; set; }

        public override void ExecuteResult(ControllerContext context)
        {
            if (context == null)
            {
                throw new ArgumentNullException("context");
            }

            this.JsonCallback = context.HttpContext.Request["jsoncallback"];

            if (string.IsNullOrEmpty(this.JsonCallback))
                this.JsonCallback = context.HttpContext.Request["callback"];

            if (string.IsNullOrEmpty(this.JsonCallback))
                throw new ArgumentNullException("JsonCallback required for JSONP response.");

            HttpResponseBase response = context.HttpContext.Response;

            if (!String.IsNullOrEmpty(ContentType))
            {
                response.ContentType = ContentType;
            }
            else
            {
                response.ContentType = "application/json";
            }
            if (ContentEncoding != null)
            {
                response.ContentEncoding = ContentEncoding;
            }
            if (Data != null)
            {
                JavaScriptSerializer serializer = new JavaScriptSerializer();
                response.Write(string.Format("{0}({1});", this.JsonCallback, serializer.Serialize(Data)));
            }
        }
    }

    //extension methods for the controller to allow jsonp.
    public static class ContollerExtensions
    {
        public static JsonpResult Jsonp(this Controller controller, object data)
        {
            JsonpResult result = new JsonpResult();
            result.Data = data;
            return result;
        }
    }
}

When the response is downloaded from the client, it’s invoked and you handle it just as you normally would with any other getJSON success handler. So hopefully this helps clear up any confusion with using JsonP.  There’s about a thousand suggestions I found on doing cross domain JSON and this was just one of the many. I also wrote a simple JsonWebClient class in .Net that will permit the server-side proxy POST to another domain if anyone is interested. I did that before I learned about CORS (preflight post) or this, JsonP. Comments are welcome!

Sample Code

Additionally, here is a simple, working demo showing how this works. Be sure to start both websites. Then browse the ClientWebsite and click Test JSONP. This will perform a JSONP GET to the second website.

Download the sample

This project is also in the IWS Snippets project.

Setup the Dialog and Postback Script

In my application, we may click the button multiple times. So you’ll need to initialize it on load and actually open it later. As you can see below, we’re making our dialog modal and setting its autoOpen to false to prevent it from opening during initialization.  The dialog contains two buttons, and in this initialization, we can define their handler code. The confirmation button “Yes, I Understand and Agree” runs a chunk of code emulates the server control Click event on Button1. Notice I used the inline server-side script to gain access to the Page.ClientScript object, which contains a nice handful of helper functions for javascript.

$().ready(function() {
    $("#ConfirmPanel").dialog(
    { autoOpen: false,
        modal: true,
        bgiframe: true,
        width: 400,
        height: 300,
        buttons: {
            'Youbetcha': function() {
                <%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button1))%>;
            },
            'No Thanks': function() {
                $(this).dialog('close');
            }
        }
    })
});

Open the Dialog with OnClientClick

Next we’ll open the dialog each time our original server control button is clicked. You use the OnClientClick property to do this.

$("#ConfirmPanel").dialog('open'); return false;

We always return false here. Since the dialog doesn’t suspend the process, it will always finish and immediately postback. So by returning false, we’re preventing the button from posting back and allowing the jquery dialog to appear.

Here’s the full Asp.Net markup:

<asp:Label ID="lblClicked" runat="server" />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Test" OnClientClick="javascript: $('#ConfirmPanel').dialog('open'); return false;"/>
<div id="ConfirmPanel" style="width: 400px; height: 200px;">
    <h2>Terms and Conditions</h2>
    <p>By accepting, you agree to the following:
        <ul>
            <li>Are you really, really sure???? </li>
        </ul>
    </p>
</div>

The Result

Clicking Youbetcha fires the Click event for our Button1.

Updated: 2/16/2010

To answer Matt’s question, I setup a simple web forms page with a data grid and a button within its rows. All the buttons are wired to one event handler and their command argument property is used to provide identifying data to the event handler.  Having said that, here’s the same solution using dynamic confirmation dialog. If you click OK, it will postback using the original button’s information which is displayed on postback.  Noticed I placed a ClientScript.GetPostBackEventReference(uxGrid, string.Empty) within the PageLoad event. Every time the page loads, postback or not, I want it to do this so it will render the __doPostBack client-side function. Without that, it will only work the first time. Subsequent clicks after the first postback will break.

So essentially the solution is to use __doPostBack(clientside_input_name_attribute, ”).  Using the javascript function below we rebuild the buttons for the dialog each time and rewire it to the appropriate location.  So for this, if you didn’t want to use a grid, you could still use it the same way via OnClientClick with “this.name” and pass that to __doPostBack.

Here’s the markup source.  You can also download the full source code here.

Thanks Matt.

<%@ Page Language="C#" AutoEventWireup="true"  %>
<%@ Import Namespace="System.Collections.Generic" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/C#" runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            ClientScript.GetPostBackEventReference(uxGrid, string.Empty);

            if (!Page.IsPostBack)
            {
                List<int> test = new List<int>();
                test.Add(2);
                test.Add(3);
                test.Add(32);
                test.Add(223);
                test.Add(5);
                test.Add(8);
                uxGrid.DataSource = test;
                uxGrid.DataBind();

            }
        }
        protected void uxRowAction_Click(object sender, EventArgs e)
        {
            Button b = sender as Button;
            if (b != null)
            {
                uxTest.Text = "clicked " + b.CommandArgument;
            }
        }

    </script>

    <link href="smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $().ready(function() {
            $('#dialogContent').dialog({
                autoOpen: false,
                modal: true,
                bgiframe: true,
                title: "MySql Membership Config Tool",
                width: 800,
                height: 600
            });
        });

        function rowAction(uniqueID) {

            $('#dialogContent').dialog('option', 'buttons',
                {
                    "OK": function() { __doPostBack(uniqueID, ''); $(this).dialog("close"); },
                    "Cancel": function() { $(this).dialog("close"); }
                });

                $('#dialogContent').dialog('open');

            return false;
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="dialogContent">
        <h3>confirm</h3>
        <p>Click ok to accept</p>
    </div>
    <asp:Literal ID="uxTest" runat="server" />
    <div>
        <asp:DataGrid ID="uxGrid" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateColumn>
                    <ItemTemplate>
                        <asp:Button ID="uxRowAction" runat="server" CommandArgument='<%#Container.DataItem.ToString() %>' Text="Row Action" OnClick="uxRowAction_Click" OnClientClick="javascript:return rowAction(this.name);" />
                    </ItemTemplate>
                </asp:TemplateColumn>
            </Columns>
        </asp:DataGrid>
    </div>
    </form>
</body>
</html>