Imran Baloch's Blog

Creating a simple Live Cricket Score using ASP.NET SignalR

imran_ku07 — Sat, 11 May 2013 14:00:00 GMT

Introduction:

I am from Pakistan. Like most of Pakistanis, I am also a huge fan of Cricket. Yesterday, I got some time from my busy job. I thought to create a simple Cricket Live Score feature using ASP.NET SignalR. It is also Interesting to note that the guys(David Fowler from West Indies and Damian Edwards from Australia) that are heavily involved in SignalR development are also cricket fans(correct me if I am wrong). In this article, I will show you how to create a simple 'Live Cricket Score' feature using SignalR. For a quick demo, just open this link in different browsers and in one browser just append ?admin= query-string(which will become the admin who update the score), then just click Update Score button many times until 2 overs finish(the match will be limited to 2 overs). For each click, the live score will be updated in each browser.

Description:

If you are new to SignalR then Getting Started will be great for you. Assuming that you have configured your application with ASP.NET SignalR. Let create a simple html page with following lines,

        
        <!DOCTYPE html>
        <html>
        <head>
            <title>Pakistan v/s India</title>
            <style>
                .team
                {
                    font-size: 15px;
                    padding-right: 10px;
                    font-weight: bold;
                    text-transform: capitalize;
                }
                .wickets,overs
                {
                    padding-right: 5px;
                }
            </style>
        </head>
        <body>
            <h1>Pakistan v/s India</h1>
            <div id="updateScore" style="display: none;">
                <input type="button" id="updateScoreLink" value="Update Score"/>
            </div>
            <br />
            <div data-bind="foreach: teams">
                <div>
                    <span class="team" data-bind="{ html: team }"></span>
                    <span class="runs" data-bind="{ html: runs }"></span>/<span class="wickets" data-bind="{ html: wickets }"></span>
                    <b>Overs</b> <span class="overs" data-bind="{ html: oversText }"></span>
                </div>
            </div>
            <script src="Scripts/jquery-1.8.2.min.js" ></script>
            <script src="Scripts/jquery.signalR-1.0.1.min.js"></script>
            <script src="signalr/hubs"></script>
            <script src="Scripts/knockout-2.2.0.js" ></script>
            <script type="text/javascript">
                // Here we start
            </script>
        </body>
        </html>

In the above page, we have referenced jquery, signalr and knockout scripts. We have also define a simple template which will show the runs, wickets and overs of both teams. For demo purpose, we have added a Update Score button in the page. This button when clicked will record a single ball of an over as well as runs scored in this ball . After each ball, I will tell SignalR to broadcast teams score-card across all the connected client. When the match finished(after 24 balls), I will again tell the SignalR to show the final result to all users. Here are the scripts which are required for our work,

  
        $(function () {
            var chat = $.connection.cricketHub,
                viewModel = {
                    teams: ko.observableArray([
                    { team: 'india', runs: 0, wickets: 0, balls: 0, oversText: '0.0' },
                    { team: 'pakistan', runs: 0, wickets: 0, balls: 0, oversText: '0.0'}])
                },
                index = 0;// index represant the position of the current batting team
            chat.client.updateScore = function (t) {
                viewModel.teams(JSON.parse(t));
            };
            chat.client.matchFinished = function (result) {
                alert(result);
            };
            $.connection.hub.start().done(function () {
                $('#updateScoreLink').click(function () {
                    var teams = viewModel.teams(),
                        team1 = teams[index],
                        team2 = teams[(index + 1) % 2],
                        wicketFalled = getRandomInt(0, 5) == 3 ? true : false;
                    // Assuming that the wicket will only fall when  a 0-5 random number is 3
                    team1.runs += getRandomInt(0, 6); // Get a random score between 0 to 6
                    team1.wickets += wicketFalled ? 1 : 0;
                    team1.balls += 1;
                    team1.oversText = truncate(team1.balls / 6).toString() + '.' + (team1.balls % 6).toString();
                    chat.server.updateScore(JSON.stringify(teams));
                    if (team1.balls === 12 && team2.balls === 12) {
                        $('#updateScoreLink').hide();
                        var message = (team1.runs > team2.runs ? team1.team : team2.team) + ' won';
                        message = team1.runs === team2.runs ? 'match tied' : message;
                        message += '\n' + team1.team + ': ' + team1.runs + '/' + team1.wickets + ' overs: ' + team1.oversText;
                        message += '\n' + team2.team + ': ' + team2.runs + '/' + team2.wickets + ' overs: ' + team2.oversText;
                        chat.server.matchFinished(message);
                    }
                    else if (team1.balls === 12) {
                        index = 1;// second team batting
                    }
                    viewModel.teams([team1,team2]);
                });
            });
            ko.applyBindings(viewModel);
            if (isAdmin()) {
                $('#updateScore').show();
            }
            
            function getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
            function truncate(n) {
                return Math[n > 0 ? "floor" : "ceil"](n);
            }
            function isAdmin(){
                // For demo, assuming that only admin can update the score 
                // and the admin will be user which have admin querystring.
                return location.href.indexOf('admin=') > -1
            }
        });

In the above scripts, we are initializing SignalR hub cricketHub object(we will see this hub class shortly), viewModel object which include team information(runs, wickets, etc) and index which represent the current batting team. Next, we have two client functions(updateScore and matchFinished) which will be invoked when the server broadcast a message to all clients.

When the hub start, we are registering event handler Update Score click event where we are getting a random run between 0-6, a wicket or not depending upon a random number, updating our view-model and then telling SignalR to broadcast the view-model across all the connected clients so that all clients automatically update their scorecard. Finally, when both teams completed their 12 balls, we will send the results to all the connected clients using SignalR. Note that for demo purpose we are only showing the Update Score button to the user which have admin= query-string.

Finally, here is our CricketHub class,

        
    public class CricketHub : Hub
    {
        public void UpdateScore(string teams)
        {
            Clients.All.UpdateScore(teams);
        }
        public void MatchFinished(string result)
        {
            Clients.All.MatchFinished(result);
        }
    }

Summary:

In this article, I showed you one of the usage of ASP.NET SignalR. You have seen that how easily we can create a real-time Live Cricket Score using the power of ASP.NET SignalR which works in every browser . Hopefully you will enjoy my this article too.

A small but crucial point about App_Start folder

imran_ku07 — Wed, 01 May 2013 03:29:00 GMT

As we know that IIS reject requests which contain folder started with App_ (specifically App_code, App_GlobalResources, App_LocalResources, App_WebReferences, App_Data, App_Browsers folders). Lot of developers put some important files here so that only the application code can access these files and nobody can access these files directly. With the introduction of ASP.NET MVC 4, a new folder App_Start has been included in the application template. But there is a chance that developers put important files in App_Start folder without realizing that this folder is not protected by IIS request filtering module. So, I just want to warn the developers that don't confuse App_* folders with App_Start folder. App_*(see the list above) folders are protected by IIS and App_Start folder is not.

Localizing Default Error Messages in ASP.NET MVC and WebForm

imran_ku07 — Sun, 31 Mar 2013 10:50:00 GMT

Introduction:

System.ComponentModel.DataAnnotations validation attributes (like RequiredAttribute) allows us to localize error messages using ErrorMessageResourceName and ErrorMessageResourceType. But some error messages cannot be localized using these properties. For example, 'The value X is not valid for Y'. In this article, I will quickly show you how to localize these error messages in ASP.NET MVC and ASP.NET WebForm.

Description:

For localizing default error messages in ASP.NET MVC we will set these below properties in Global.asax Application_Start method,

        
        ClientDataTypeModelValidatorProvider.ResourceClassKey = "MyResources";
        DefaultModelBinder.ResourceClassKey = "MyResources";

Next, create a MyResources.resx resource file and/or your culture specific resource file MyResources.xx.resx inside App_GlobalResources folder where we can override FieldMustBeDate, FieldMustBeNumeric, PropertyValueInvalid and PropertyValueRequired messages. Here are the default values,

  
        FieldMustBeDate The field {0} must be a date.
        FieldMustBeNumeric The field {0} must be a number.
        PropertyValueInvalid The value '{0}' is not valid for {1}.
        PropertyValueRequired A value is required.

For WebForm, we need to localize PropertyValueInvalid and PropertyValueRequired. But here we need to do some more work. Just add a class MyErrorMessageProvider.cs which do all the work for us(Note: most code are copied from System.Web.dll),

        
        public class MyErrorMessageProvider
    {
        private static string _resourceClassKey;

        public static void SetResourceClassKey(string resourceClassKey){
            if(resourceClassKey == null){
                throw new ArgumentNullException("resourceClassKey");
            }
            _resourceClassKey = resourceClassKey;
            ModelBinderErrorMessageProviders.ValueRequiredErrorMessageProvider = MyErrorMessageProvider.DefaultValueRequiredErrorMessageProvider;
            ModelBinderErrorMessageProviders.TypeConversionErrorMessageProvider = MyErrorMessageProvider.DefaultTypeConversionErrorMessageProvider;
        }

        private static string DefaultTypeConversionErrorMessageProvider(ModelBindingExecutionContext modelBindingExecutionContext, ModelMetadata modelMetadata, object incomingValue)
        {
            return GetResourceCommon(modelBindingExecutionContext, modelMetadata, incomingValue, new Func<ModelBindingExecutionContext, string>(GetValueInvalidResource));
        }

        private static string DefaultValueRequiredErrorMessageProvider(ModelBindingExecutionContext modelBindingExecutionContext, ModelMetadata modelMetadata, object incomingValue)
        {
            return GetResourceCommon(modelBindingExecutionContext, modelMetadata, incomingValue, new Func<ModelBindingExecutionContext, string>(GetValueRequiredResource));
        }

        private static string GetResourceCommon(ModelBindingExecutionContext modelBindingExecutionContext, ModelMetadata modelMetadata, object incomingValue, Func<ModelBindingExecutionContext, string> resourceAccessor)
        {
            string displayName = modelMetadata.GetDisplayName();
            string str = resourceAccessor(modelBindingExecutionContext);
            object[] objArray = new object[2];
            objArray[0] = incomingValue;
            objArray[1] = displayName;
            string str1 = string.Format(CultureInfo.CurrentCulture, str, objArray);
            return str1;
        }

        private static string GetUserResourceString(ModelBindingExecutionContext modelBindingExecutionContext, string resourceName, string resourceClassKey)
        {
            if (string.IsNullOrEmpty(resourceClassKey) || modelBindingExecutionContext == null || modelBindingExecutionContext.HttpContext == null)
            {
                return null;
            }
            else
            {
                return modelBindingExecutionContext.HttpContext.GetGlobalResourceObject(resourceClassKey, resourceName, CultureInfo.CurrentUICulture) as string;
            }
        }

        private static string GetUserResourceString(ModelBindingExecutionContext modelBindingExecutionContext, string resourceName)
        {
            return GetUserResourceString(modelBindingExecutionContext, resourceName, _resourceClassKey);
        }

        private static string GetValueInvalidResource(ModelBindingExecutionContext modelBindingExecutionContext)
        {
            string userResourceString = GetUserResourceString(modelBindingExecutionContext, "PropertyValueInvalid");
            return userResourceString;
        }

        private static string GetValueRequiredResource(ModelBindingExecutionContext modelBindingExecutionContext)
        {
            string userResourceString = GetUserResourceString(modelBindingExecutionContext, "PropertyValueRequired");
            return userResourceString;
        }
    }

and then we can set our resource class file at Global.asax Application_Start method,

    MyErrorMessageProvider.SetResourceClassKey("MyResources");

Summary:

In this article, I showed you how easily we can localize error messages in ASP.NET MVC and ASP.NET WebForm . Hopefully you will enjoy my this article too.

A Simple jQuery HttpClient

imran_ku07 — Mon, 25 Feb 2013 19:00:00 GMT

Introduction:

One of the reason why HttpClient getting popular day by day is that it is very simple to use and intuitive programming model. Due its simplicity, I have created a very simple HttpClient for jQuery(which abstract the jQuery.ajax calls) for myself and my friends, so that the programming model remain unified. But I think/feel that this may be useful and interesting for others. That's why I have created a package to share this library. In this article I will tell you how to use this simple jQuery HttpClient.

Description:

First of all just install jquery.httpclient package from nuget and then include this in your view(or page). Now you can send ajax request in HttpClient library fashion. Here are examples that you can do using this library,

        
        var client = new HttpClient();


        // Send a GET request
        client.getAsync('/Home/B');


        // Send a GET request with done callback
        client.getAsync('/Home/B', function (response) {
            console.log('Get', response);
        });


        // Send a GET request with done and fail callback
        client.getAsync('/Home/B', function (response) {

        },
        function (err) {

        });


        // Send a DELETE request
        client.deleteAsync('/Home/B');


        // Send a DELETE request with done callback
        client.deleteAsync('/Home/B', function (response) {
            console.log('Get', response);
        });


        // Send a DELETE request with done and fail callback
        client.deleteAsync('/Home/B', function (response) {

        },
        function (err) {

        });


        // Send a POST request with data
        client.postAsync('/Home/A', 'year=2008');


        // Send a POST request with data and done callback
        client.postAsync('/Home/A', 'year=2008', function (response) {
        });


        // Send a POST request with data, done and fail callback
        client.postAsync('/Home/A', 'year=2008', function (response) {
        },
        function (err) {

        });


        // Send a POST request with data and content-type
        client.postAsync('/Home/A', 'year=2008', 'application/json');


        // Send a POST request with data, content-type and done callback
        client.postAsync('/Home/A', 'year=2008', 'application/json', function (response) {
        });


        // Send a POST request with data, content-type, done and fail callback
        client.postAsync('/Home/A', 'year=2008', 'application/json', function (response) {
        },
        function (err) {

        });


        // Send a POST request with data, content-type and accept
        client.postAsync('/Home/A', 'year=2008', 'application/json', 'application/json');


        // Send a POST request with data, content-type, accept and done callback
        client.postAsync('/Home/A', 'year=2008', 'application/json', 'application/json', function (response) {
        });


        // Send a POST request with data, content-type, accept, done and fail callback
        client.postAsync('/Home/A', 'year=2008', 'application/json', 'application/json', function (response) {
        },
        function (err) {

        });


        // Send a POST request with data and application/json content-type
        client.postAsJsonAsync('/Home/A', 'year=2008');


        // Send a POST request with data, application/json content-type and done callback
        client.postAsJsonAsync('/Home/A', 'year=2008', function (response) {
        });


        // Send a POST request with data, application/json content-type, done and fail callback
        client.postAsJsonAsync('/Home/A', 'year=2008', function (response) {
        },
        function (err) {

        });


        // Send a POST request with data, application/json content-type and accept
        client.postAsJsonAsync('/Home/A', 'year=2008', 'application/json');


        // Send a POST request with data, application/json content-type, accept and done callback
        client.postAsJsonAsync('/Home/A', 'year=2008', 'application/json', function (response) {
        });


        // Send a POST request with data, application/json content-type, accept, done and fail callback
        client.postAsJsonAsync('/Home/A', 'year=2008', 'application/json', function (response) {
        },
        function (err) {

        });


        // Send a POST request with data and application/xml content-type
        client.postAsXmlAsync('/Home/A', 'year=2008');


        // Send a POST request with data, application/xml content-type and done callback
        client.postAsXmlAsync('/Home/A', 'year=2008', function (response) {
        });


        // Send a POST request with data, application/xml content-type, done and fail callback
        client.postAsXmlAsync('/Home/A', 'year=2008', function (response) {
        },
        function (err) {

        });


        // Send a POST request with data, application/xml content-type and accept
        client.postAsXmlAsync('/Home/A', 'year=2008', 'application/json');


        // Send a POST request with data, application/xml content-type, accept and done callback
        client.postAsXmlAsync('/Home/A', 'year=2008', 'application/json', function (response) {
        });


        // Send a POST request with data, application/xml content-type, accept, done and fail callback
        client.postAsXmlAsync('/Home/A', 'year=2008', 'application/json', function (response) {
        },
        function (err) {

        });


        // Send a PUT request with data
        client.putAsync('/Home/A', 'year=2008');


        // Send a PUT request with data and done callback
        client.putAsync('/Home/A', 'year=2008', function (response) {
        });


        // Send a PUT request with data, done and fail callback
        client.putAsync('/Home/A', 'year=2008', function (response) {
        },
        function (err) {

        });


        // Send a PUT request with data and content-type
        client.putAsync('/Home/A', 'year=2008', 'application/json');


        // Send a PUT request with data, content-type and done callback
        client.putAsync('/Home/A', 'year=2008', 'application/json', function (response) {
        });


        // Send a PUT request with data, content-type, done and fail callback
        client.putAsync('/Home/A', 'year=2008', 'application/json', function (response) {
        },
        function (err) {

        });


        // Send a PUT request with data, content-type and accept
        client.putAsync('/Home/A', 'year=2008', 'application/json', 'application/json');


        // Send a PUT request with data, content-type, accept and done callback
        client.putAsync('/Home/A', 'year=2008', 'application/json', 'application/json', function (response) {
        });


        // Send a PUT request with data, content-type, accept, done and fail callback
        client.putAsync('/Home/A', 'year=2008', 'application/json', 'application/json', function (response) {
        },
        function (err) {

        });


        // Send a PUT request with data and application/json content-type
        client.putAsJsonAsync('/Home/A', 'year=2008');


        // Send a PUT request with data, application/json content-type and done callback
        client.putAsJsonAsync('/Home/A', 'year=2008', function (response) {
        });


        // Send a PUT request with data, application/json content-type, done and fail callback
        client.putAsJsonAsync('/Home/A', 'year=2008', function (response) {
        },
        function (err) {

        });


        // Send a PUT request with data, application/json content-type and accept
        client.putAsJsonAsync('/Home/A', 'year=2008', 'application/json');


        // Send a PUT request with data, application/json content-type, accept and done callback
        client.putAsJsonAsync('/Home/A', 'year=2008', 'application/json', function (response) {
        });


        // Send a PUT request with data, application/json content-type, accept, done and fail callback
        client.putAsJsonAsync('/Home/A', 'year=2008', 'application/json', function (response) {
        },
        function (err) {

        });


        // Send a PUT request with data and application/xml content-type
        client.putAsXmlAsync('/Home/A', 'year=2008');


        // Send a PUT request with data, application/xml content-type and done callback
        client.putAsXmlAsync('/Home/A', 'year=2008', function (response) {
        });


        // Send a PUT request with data, application/xml content-type, done and fail callback
        client.putAsXmlAsync('/Home/A', 'year=2008', function (response) {
        },
        function (err) {

        });


        // Send a PUT request with data, application/xml content-type and accept
        client.putAsXmlAsync('/Home/A', 'year=2008', 'application/json');


        // Send a put request with data, application/xml content-type, accept and done callback
        client.putAsXmlAsync('/Home/A', 'year=2008', 'application/json', function (response) {
        });


        // Send a PUT request with data, application/xml content-type, accept, done and fail callback

        client.putAsXmlAsync('/Home/A', 'year=2008', 'application/json', function (response) {
        },
        function (err) {

        });

In the above example we are sending GET, POST, PUT and DELETE request in similar way that we do with HttpClient library. The source code of simple jQuery HttpClient is available at github.

Summary:

In this article, I showed you a simple jQuery HttpClient which help you to send ajax request in HttpClient library fashion. I have done this for myself for making the programming model unified in javascript with HttpClient library. Hopefully you will enjoy my this article too.

Microsoft MVP for year 2013

imran_ku07 — Tue, 01 Jan 2013 16:24:00 GMT

Just got an email from Microsoft that I'm being nominated for Microsoft Most Valuable Professional (Microsoft MVP) for the thrid consecutive year. Thanks to Microsoft and all my friends.

ASP.NET Bundling/Minification and Embedded Resources

imran_ku07 — Sat, 29 Dec 2012 13:30:00 GMT

Introduction:

If you want to share your application resources(like css, javascript, images, etc) between different projects then embedded resource is a great choice. Embedded resource is also good for component/control writers because it allows component/control writers to distribute all the application resources with just a single assembly. A lot of vendors are already using this approach. It will great for component/control writers if they can leverage the ASP.NET bundling and minification for improving the performance. So, in this article I will show you how to write a very basic component(helper) which will use the ASP.NET bundling and minification feature on embedded javascript/css files.

Description:

First of all create a new Class Library project and install the Microsoft.AspNet.Mvc, WebActivator and Microsoft ASP.NET Web Optimization Framework 1.1.0-alpha1(make sure to include the -Pre parameter in Package Manager Console) nuget packages. Next, add a reference of System.Web assembly. Then, create your control/component/helper. For demonstration purpose, I will use this sample helper,

        public static class HtmlHelpers
        {
            public static MvcHtmlString NewTextBox(this HtmlHelper html, string name)
            {
                var js = Scripts.Render("~/ImranB/Embedded/Js").ToString();
                var css = Styles.Render("~/ImranB/Embedded/Css").ToString();
                var textbox = html.TextBox(name).ToString();
                return MvcHtmlString.Create(textbox + js + css);
            }
	}

In this helper, I am just using a textbox with a style and script bundle. Style bundle include 2 css files and script bundle include 2 js files. So, just create 2 css files(NewTextBox1.css and NewTextBox2.css) and 2 javascript files(NewTextBox1.js and NewTextBox2.js) and then mark these files as embedded resource. Next, add a AppStart.cs file and add the following lines inside this file,

        [assembly: WebActivator.PostApplicationStartMethod(typeof(AppStart), "Start")]
        namespace ImranB
        {
            public static class AppStart
            {
                public static void Start()
                {
                    ConfigureRoutes();
                    ConfigureBundles();
                }
                private static void ConfigureBundles()
                {
                    BundleTable.VirtualPathProvider = new EmbeddedVirtualPathProvider(HostingEnvironment.VirtualPathProvider);
                    BundleTable.Bundles.Add(new ScriptBundle("~/ImranB/Embedded/Js")
                        .Include("~/ImranB/Embedded/NewTextBox1.js")
                        .Include("~/ImranB/Embedded/NewTextBox2.js")
                        );

                    BundleTable.Bundles.Add(new StyleBundle("~/ImranB/Embedded/Css")
                        .Include("~/ImranB/Embedded/NewTextBox1.css")
                        .Include("~/ImranB/Embedded/NewTextBox2.css")
                        );
                }
                private static void ConfigureRoutes()
                {
                    RouteTable.Routes.Insert(0,
                        new Route("ImranB/Embedded/{file}.{extension}",
                            new RouteValueDictionary(new { }),
                            new RouteValueDictionary(new { extension = "css|js" }),
                            new EmbeddedResourceRouteHandler()
                        ));
                }
            }
        }

The above class using WebActivator's PostApplicationStartMethod, which allows your assembly to run some code after the Application_Start method of global.asax. The Start method simply register a custom virtual path provider and two bundles which are used in our NewText helper class. But ASP.NET optimization framework will only emit a bundle url when debug="false" or when BundleTable.EnableOptimizations = true. Therefore, we also need to handle the normal javascript and css requests. For this case, the above method has also register a specific route for handling embedded resource requests using EmbeddedResourceRouteHandler route handler. Here is the definition of this handler,

	
        public class EmbeddedResourceRouteHandler : IRouteHandler
        {
            IHttpHandler IRouteHandler.GetHttpHandler(RequestContext requestContext)
            {
                return new EmbeddedResourceHttpHandler(requestContext.RouteData);
            }
        }
        public class EmbeddedResourceHttpHandler : IHttpHandler
        {
            private RouteData _routeData;
            public EmbeddedResourceHttpHandler(RouteData routeData)
            {
                _routeData = routeData;
            }
            public bool IsReusable
            {
                get { return false; }
            }
            public void ProcessRequest(HttpContext context)
            {
                var routeDataValues = _routeData.Values;
                var fileName = routeDataValues["file"].ToString();
                var fileExtension = routeDataValues["extension"].ToString();
                string nameSpace = typeof(EmbeddedResourceHttpHandler)
                                    .Assembly
                                    .GetName()
                                    .Name;// Mostly the default namespace and assembly name are same
                string manifestResourceName = string.Format("{0}.{1}.{2}", nameSpace, fileName, fileExtension);
                var stream = typeof(EmbeddedResourceHttpHandler).Assembly.GetManifestResourceStream(manifestResourceName);
                context.Response.Clear();
                context.Response.ContentType = "text/css";// default
                if (fileExtension == "js")
                    context.Response.ContentType = "text/javascript";
                stream.CopyTo(context.Response.OutputStream);
            }
        }

EmbeddedResourceRouteHandler returns EmbeddedResourceHttpHandler http handler which will be used to extract embedded resource file from the assembly and then write the file to the response body. Now, the only missing thing is EmbeddedVirtualPathProvider,

        public class EmbeddedVirtualPathProvider : VirtualPathProvider
        {
            private VirtualPathProvider _previous;
            public EmbeddedVirtualPathProvider(VirtualPathProvider previous)
            {
                _previous = previous;
            }
            public override bool FileExists(string virtualPath)
            {
                if (IsEmbeddedPath(virtualPath))
                    return true;
                else
                    return _previous.FileExists(virtualPath);
            }
            public override CacheDependency GetCacheDependency(string virtualPath, IEnumerable virtualPathDependencies, DateTime utcStart)
            {
                if (IsEmbeddedPath(virtualPath))
                {
                    return null;
                }
                else
                {
                    return _previous.GetCacheDependency(virtualPath, virtualPathDependencies, utcStart);
                }
            }
            public override VirtualDirectory GetDirectory(string virtualDir)
            {
                return _previous.GetDirectory(virtualDir);
            }
            public override bool DirectoryExists(string virtualDir)
            {
                return _previous.DirectoryExists(virtualDir);
            }
            public override VirtualFile GetFile(string virtualPath)
            {
                if (IsEmbeddedPath(virtualPath))
                {
                    string fileNameWithExtension = virtualPath.Substring(virtualPath.LastIndexOf("/") + 1);
                    string nameSpace = typeof(EmbeddedResourceHttpHandler)
                                    .Assembly
                                    .GetName()
                                    .Name;// Mostly the default namespace and assembly name are same
                    string manifestResourceName = string.Format("{0}.{1}", nameSpace, fileNameWithExtension);
                    var stream = typeof(EmbeddedVirtualPathProvider).Assembly.GetManifestResourceStream(manifestResourceName);
                    return new EmbeddedVirtualFile(virtualPath, stream);
                }
                else
                    return _previous.GetFile(virtualPath);
            }
            private bool IsEmbeddedPath(string path)
            {
                return path.Contains("~/ImranB/Embedded");
            }
        }
    public class EmbeddedVirtualFile : VirtualFile
    {
        private Stream _stream;
        public EmbeddedVirtualFile(string virtualPath, Stream stream)
            : base(virtualPath)
        {
            _stream = stream;
        }
        public override Stream Open()
        {
            return _stream;
        }
    }

EmbeddedVirtualPathProvider class is self explanatory. It simply maps a bundling url(used above) and return the embedded request as stream. Note, this class will be invoked by ASP.NET optimization framework during bundling and minifying process. Now, just build your component/control/helper assembly. Then, create a sample ASP.NET(MVC) application and then use this component/control/helper in your page. For example, like,

        @using ImranB.Helpers
        
        @Html.NewTextBox("New")

Summary:

In this article, I showed you how to create a component/control/helper that leverage the ASP.NET Optimization framework. A sample application is available at github for download. Hopefully you will enjoy my this article too.

Fixing the Model Binding issue of ASP.NET MVC 4 and ASP.NET Web API

imran_ku07 — Sat, 08 Dec 2012 13:27:00 GMT

Introduction:

Yesterday when I was checking ASP.NET forums, I found an important issue/bug in ASP.NET MVC 4 and ASP.NET Web API. The issue is present in System.Web.PrefixContainer class which is used by both ASP.NET MVC and ASP.NET Web API assembly. The details of this issue is available in this thread. This bug can be a breaking change for you if you upgraded your application to ASP.NET MVC 4 and your application model properties using the convention available in the above thread. So, I have created a package which will fix this issue both in ASP.NET MVC and ASP.NET Web API. In this article, I will show you how to use this package.

Description:

Create or open an ASP.NET MVC 4 project and install ImranB.ModelBindingFix NuGet package. Then, add this using statement on your global.asax.cs file,

         using ImranB.ModelBindingFix;

Then, just add this line in Application_Start method,

	Fixer.FixModelBindingIssue();
	// For fixing only in MVC call this
	//Fixer.FixMvcModelBindingIssue();
	// For fixing only in Web API call this
	//Fixer.FixWebApiModelBindingIssue();

This line will fix the model binding issue. If you are using Html.Action or Html.RenderAction then you should use Html.FixedAction or Html.FixedRenderAction instead to avoid this bug(make sure to reference ImranB.ModelBindingFix.SystemWebMvc namespace). If you are using FormDataCollection.ReadAs extension method then you should use FormDataCollection.FixedReadAs instead to avoid this bug(make sure to reference ImranB.ModelBindingFix.SystemWebHttp namespace). The source code of this package is available at github.

Summary:

There is a small but important issue/bug in ASP.NET MVC 4. In this article, I showed you how to fix this issue/bug by using a package. Hopefully you will enjoy this article too.

Browser Specific Extensions of HttpClient

imran_ku07 — Tue, 13 Nov 2012 14:20:00 GMT

Introduction:

REpresentational State Transfer (REST) causing/leaving a great impact on service/API development because it offers a way to access a service without requiring any specific library by embracing HTTP and its features. ASP.NET Web API makes it very easy to quickly build RESTful HTTP services. These HTTP services can be consumed by a variety of clients including browsers, devices, machines, etc. With .NET Framework 4.5, we can use HttpClient class to consume/send/receive RESTful HTTP services(for .NET Framework 4.0, HttpClient class is shipped as part of ASP.NET Web API). The HttpClient class provides a bunch of helper methods(for example, DeleteAsync, PostAsync, GetStringAsync, etc.) to consume a HTTP service very easily. ASP.NET Web API added some more extension methods(for example, PutAsJsonAsync, PutAsXmlAsync, etc) into HttpClient class to further simplify the usage. In addition, HttpClient is also an ideal choice for writing integration test for a RESTful HTTP service. Since a browser is a main client of any RESTful API, it is also important to test the HTTP service on a variety of browsers. RESTful service embraces HTTP headers and different browsers send different HTTP headers. So, I have created a package that will add overloads(with an additional Browser parameter) for almost all the helper methods of HttpClient class. In this article, I will show you how to use this package.

Description:

Create/open your test project and install ImranB.SystemNetHttp.HttpClientExtensions NuGet package. Then, add this using statement on your class,

         using ImranB.SystemNetHttp;

Then, you can start using any HttpClient helper method which include the additional Browser parameter. For example,

	var client = new HttpClient(myserver);
	var task = client.GetAsync("http://domain/myapi", Browser.Chrome);
	task.Wait();
	var response = task.Result;

Here is the definition of Browser,

	
	public enum Browser
	{
	    Firefox = 0,
	    Chrome = 1,
	    IE10 = 2,
	    IE9 = 3,
	    IE8 = 4,
	    IE7 = 5,
	    IE6 = 6,
	    Safari = 7,
	    Opera = 8,
	    Maxthon = 9,
	}

These extension methods will make it very easy to write browser specific integration test. It will also help HTTP service consumer to mimic the request sending behavior of a browser. This package source is available on github. So, you can grab the source and add some additional behavior on the top of these extensions.

Summary:

Testing a REST API is an important aspect of service development and today, testing with a browser is crucial. In this article, I showed how to write integration test that will mimic the browser request sending behavior. I also showed an example. Hopefully you will enjoy this article too.

Advanced Options of ASP.NET Bundling and Minification

imran_ku07 — Mon, 01 Oct 2012 03:54:00 GMT

Introduction:

Rick Anderson has written a great introduction to ASP.NET Bundling and Minification at here. In addition to the options presented by Rick, there are some other features in System.Web.Optimization framework which is also important for developers to understand in order to make thier application performance and architecture good. In this article, I will show you some of the advance stuff of ASP.NET Bundling and Minification.

Description:

Server.MapPath is one of the most used method in ASP.NET. Lot of libraries/assemblies has used this method. The problem of using this method inside a library is that it will tie the users of this library with ASP.NET intrinsic Server object which makes unit testing a little difficult. Fortunately, System.Web.Optimization have a special property called BundleTable.MapPathMethod which allows users to provide a fake method for unit testing.

There are some script files that you will never expect to add on a web page, for example, *.intellisense.js and *-vsdoc.js script files which are used by Visual Studio for intellisense. There are some other script files that you need to ignore during production, like, *.debug.js file. There are some other script files that you will not add during debugging/testing, for e.g, *.min.js and *.min.css files. Luckily, our optimization library will automatically takes care of these situation through BundleCollection.IgnoreList property. Here is the what this property contains by default,

	public static void AddDefaultIgnorePatterns(IgnoreList ignoreList)
	{
		if (ignoreList != null)
		{
			ignoreList.Ignore("*.intellisense.js");
			ignoreList.Ignore("*-vsdoc.js");
			ignoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
			ignoreList.Ignore("*.min.js", OptimizationMode.WhenDisabled);
			ignoreList.Ignore("*.min.css", OptimizationMode.WhenDisabled);
			return;
		}
		else
		{
			throw new ArgumentNullException("ignoreList");
		}
	}

You can easily override this by using BundleCollection.IgnoreList property in BundleConfig.cs file. Note: it is also important that you should be aware about a bug in the implementation of this.

The ordering of scripts and css files is also very important. For example, if you have jquery.js and jquery.ui.js then jquery.js file should be appear before jquery.ui.js. Similarly for css, reset.css should appear first(if exist) and then normalize.css(if exist) and then the remaining ones. Fortunately again, our optimization assembly will also handle this scenario by using BundleCollection.FileSetOrderList property. You can also override this inside BundleConfig.cs file. Here is the what this property contains by default,

	public static void AddDefaultFileOrderings(IList<bundlefilesetordering> list)
	{
		if (list != null)
		{
			BundleFileSetOrdering bundleFileSetOrdering = new BundleFileSetOrdering("css");
			bundleFileSetOrdering.Files.Add("reset.css");
			bundleFileSetOrdering.Files.Add("normalize.css");
			list.Add(bundleFileSetOrdering);
			BundleFileSetOrdering bundleFileSetOrdering1 = new BundleFileSetOrdering("jquery");
			bundleFileSetOrdering1.Files.Add("jquery.js");
			bundleFileSetOrdering1.Files.Add("jquery-min.js");
			bundleFileSetOrdering1.Files.Add("jquery-*");
			bundleFileSetOrdering1.Files.Add("jquery-ui*");
			bundleFileSetOrdering1.Files.Add("jquery.ui*");
			bundleFileSetOrdering1.Files.Add("jquery.unobtrusive*");
			bundleFileSetOrdering1.Files.Add("jquery.validate*");
			list.Add(bundleFileSetOrdering1);
			BundleFileSetOrdering bundleFileSetOrdering2 = new BundleFileSetOrdering("modernizr");
			bundleFileSetOrdering2.Files.Add("modernizr-*");
			list.Add(bundleFileSetOrdering2);
			BundleFileSetOrdering bundleFileSetOrdering3 = new BundleFileSetOrdering("dojo");
			bundleFileSetOrdering3.Files.Add("dojo.*");
			list.Add(bundleFileSetOrdering3);
			BundleFileSetOrdering bundleFileSetOrdering4 = new BundleFileSetOrdering("moo");
			bundleFileSetOrdering4.Files.Add("mootools-core*");
			bundleFileSetOrdering4.Files.Add("mootools-*");
			list.Add(bundleFileSetOrdering4);
			BundleFileSetOrdering bundleFileSetOrdering5 = new BundleFileSetOrdering("prototype");
			bundleFileSetOrdering5.Files.Add("prototype.js");
			bundleFileSetOrdering5.Files.Add("prototype-*");
			bundleFileSetOrdering5.Files.Add("scriptaculous-*");
			list.Add(bundleFileSetOrdering5);
			BundleFileSetOrdering bundleFileSetOrdering6 = new BundleFileSetOrdering("ext");
			bundleFileSetOrdering6.Files.Add("ext.js");
			bundleFileSetOrdering6.Files.Add("ext-*");
			list.Add(bundleFileSetOrdering6);
			return;
		}
		else
		{
			throw new ArgumentNullException("list");
		}
	}

Now let's say that you have only registered the jquery-1.6.2.js(not jquery-1.6.2.min.js). The optimization framework will still pick the jquery-1.6.2.min.js instead of jquery-1.6.2.js during production. This is possible via BundleCollection.FileExtensionReplacementList property. Like others, you can also override this inside BundleConfig.cs file. Here is the what this property contains by default,

	public static void AddDefaultFileExtensionReplacements(FileExtensionReplacementList list)
	{
		if (list != null)
		{
			list.Add("min", OptimizationMode.WhenEnabled);
			list.Add("debug", OptimizationMode.WhenDisabled);
			return;
		}
		else
		{
			throw new ArgumentNullException("list");
		}
	}

For clearing all these settings, you just need to call BundleCollection.ResetAll method. This method will clear all the above lists and empty the registered bundles.

The System.Web.Optimization framework also allows you to define a custom orderer for a bundle. You just need to implement the IBundleOrderer.OrderFiles method in a new class and set the Bundle.Orderer property. Here is an example.

Summary:

In this article, I showed you some of the advanced options of System.Web.Optimization framework. Hopefully you will enjoy my this article too.

Display Mode Bug in ASP.NET MVC 4 and Workaround

imran_ku07 — Fri, 31 Aug 2012 04:26:00 GMT

Introduction:

I have found an important bug in ASP.NET forums regarding the new display mode feature in ASP.NET MVC 4. If you are using ASP.NET MVC 4 Display Mode feature in your application or plan to use this feature in your application then it will be very important for you to be familiar with this bug, otherwise your application will not work as you expect. I and Rick Anderson have created some workaround for this bug. So, in this article, I will explain you the bug and also let you know that how to workaround this bug in ASP.NET MVC 4.

Description:

For understanding this bug, create a new ASP.NET MVC 4 application. Then add a desktop and a mobile view(if you are new, then see this link). Now, just run your application and switch between the mobile and the desktop view. Then only use the desktop view for couple of minutes. Then switch to the mobile view, you will see the desktop view instead of the mobile view. This will clearly signal a bug in ASP.NET MVC 4. The reason of this bug is that both of your desktop and mobile view's location are cached(assuming that you have only 2 display modes) when your application access a view(desktop or mobile) first time. Unfortunately, the cache of view locations is sliding. So, if your appliction uses destop view most of time, then your mobile view location will expire sooner than the desktop view location. So, when your application required the mobile view, it will check the mobile view location from cache. Since the mobile view location cache is expired, the application will not able to find this and will use the desktop view location. See, this thread for more detail about this bug. You can easily work around this bug by using this code provided by Rick.

    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        // Code removed for clarity.
        // Cache never expires. You must restart application pool
        // when you add/delete a view. A non-expiring cache can lead to
        // heavy server memory load.
        ViewEngines.Engines.OfType<RazorViewEngine>().First().ViewLocationCache =
            new DefaultViewLocationCache(Cache.NoSlidingExpiration);
    
        // Add or Replace RazorViewEngine with WebFormViewEngine
        // if you are using the Web Forms View Engine.
    }

This will workaround this bug. But the problem with this workaround is that the view location in cache will never expire, so it will increase the load of your server. Another issue with this workaround is that you need to restart the application pool when you add or delete a view. I have created another workaround of this issue. The workaround simply make all the view location's time period sync in cache. In our example, if the mobile view location in the cache is removed due to cache time expiration then it will remove the desktop view location from the cache as well. So, all the view location time period remain sync in cache. Here is the work around,

    public class MyDefaultViewLocationCache : DefaultViewLocationCache, IViewLocationCache
    {
        public MyDefaultViewLocationCache(TimeSpan timeSpan): base(timeSpan)
        {
        }
        public MyDefaultViewLocationCache()
            : base()
        {
        }
        public new string GetViewLocation(HttpContextBase httpContext, string key)
        {
            var location = base.GetViewLocation(httpContext, key);
            if (location == null)
            {
                var cache = httpContext.Cache;
                RemoveAllCacheStartWith(key, cache);
            }
            return location;
        }
        private static void RemoveAllCacheStartWith(string key, System.Web.Caching.Cache cache)
        {
            var keyWithoutDisplayMode = key.Substring(0, key.Substring(0, key.Length - 1).LastIndexOf(':') + 1);
            var items = new List<string>();
            var enumerator = cache.GetEnumerator();
            while (enumerator.MoveNext())
            {
                var _key = enumerator.Key.ToString();
                if (_key.StartsWith(keyWithoutDisplayMode))
                {
                    items.Add(_key);
                }
            }
            foreach (string item in items)
            {
                cache.Remove(item);
            }
        }
        public new void InsertViewLocation(HttpContextBase httpContext, string key, string virtualPath)
        {
            base.InsertViewLocation(httpContext, key, virtualPath);
        }
    }

Just register this workaround inside Application_Start event in global.asax file,

    ViewEngines.Engines.OfType<RazorViewEngine>().First().ViewLocationCache =
                new MyDefaultViewLocationCache();

Update(15 Sep 2012): Microsoft have published a workaround package for this bug.

Summary:

In this article, I explained you a very important bug in ASP.NET MVC 4. I have also showed you some work around. Hopefully you will enjoy this article too.

Bundling and Minifying Inline Css and Js

imran_ku07 — Wed, 25 Jul 2012 17:40:00 GMT

Introduction:

Application performance is the very important factor for an application success. Yahoo's Best Practices for Speeding Up Your Web Site is a great resource for increasing your application performance. Out of these practices, 'Putting Stylesheets at the Top', 'Putting Scripts at the Bottom' and 'Minifying(external and inline) JavaScript and CSS' are very important practices. Minifying inline css and js is also very important. From Yahoo Best Practices page 'In addition to minifying external scripts and styles, inlined <script> and <style> blocks can and should also be minified. Even if you gzip your scripts and styles, minifying them will still reduce the size by 5% or more. As the use and size of JavaScript and CSS increases, so will the savings gained by minifying your code '. So, in this article, I will show you how to minify and bundle(combine all css/js) your inline css/js.

Description:

Open your ASP.NET application(WebForm or MVC) and install BundleMinifyInlineJsCss nuget package.

Then register the response filter. If you are using WebForm, you can register response filter in a master page and if you are MVC, you can use register response filter in an action filter.

    public partial class SiteMaster : System.Web.UI.MasterPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Filter = new BundleAndMinifyResponseFilter(Response.Filter);
        }
    }
    public class BundleMinifyInlineCssJsAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            filterContext.HttpContext.Response.Filter = new BundleAndMinifyResponseFilter(filterContext.HttpContext.Response.Filter);
        }
    }
    [BundleMinifyInlineCssJs]
    public class HomeController : Controller

Now just run your application. If a page view-source is,

After using the above response filter, it will become,

Note in the above screen the inline css moved to top, inline javascript moved to bottom and inline javascript/css is minified and bundled.

Summary:

In this article, I showed you how to you quickly and easily put all your inline css at the top, put all your js at bottom and minifying/bundle all your inline javascript/css using a response filter. Hopefully you will enjoy this article too.

Handling HTTP 404 Error in ASP.NET Web API

imran_ku07 — Tue, 19 Jun 2012 19:12:00 GMT

Introduction:

Building modern HTTP/RESTful/RPC services has become very easy with the new ASP.NET Web API framework. Using ASP.NET Web API framework, you can create HTTP services which can be accessed from browsers, machines, mobile devices and other clients. Developing HTTP services is now become more easy for ASP.NET MVC developer becasue ASP.NET Web API is now included in ASP.NET MVC. In addition to developing HTTP services, it is also important to return meaningful response to client if a resource(uri) not found(HTTP 404) for a reason(for example, mistyped resource uri). It is also important to make this response centralized so you can configure all of 'HTTP 404 Not Found' resource at one place. In this article, I will show you how to handle 'HTTP 404 Not Found' at one place.

Description:

Let's say that you are developing a HTTP RESTful application using ASP.NET Web API framework. In this application you need to handle HTTP 404 errors in a centralized location. From ASP.NET Web API point of you, you need to handle these situations,

No route matched.
Route is matched but no {controller} has been found on route.
No type with {controller} name has been found.
No matching action method found in the selected controller due to no action method start with the request HTTP method verb or no action method with IActionHttpMethodProviderRoute implemented attribute found or no method with {action} name found or no method with the matching {action} name found.

Now, let create a ErrorController with Handle404 action method. This action method will be used in all of the above cases for sending HTTP 404 response message to the client.

    public class ErrorController : ApiController
    {
        [HttpGet, HttpPost, HttpPut, HttpDelete, HttpHead, HttpOptions, AcceptVerbs("PATCH")]
        public HttpResponseMessage Handle404()
        {
            var responseMessage = new HttpResponseMessage(HttpStatusCode.NotFound);
            responseMessage.ReasonPhrase = "The requested resource is not found";
            return responseMessage;
        }
    }

You can easily change the above action method to send some other specific HTTP 404 error response. If a client of your HTTP service send a request to a resource(uri) and no route matched with this uri on server then you can route the request to the above Handle404 method using a custom route. Put this route at the very bottom of route configuration,

    routes.MapHttpRoute(
        name: "Error404",
        routeTemplate: "{*url}",
        defaults: new { controller = "Error", action = "Handle404" }
    );

Now you need handle the case when there is no {controller} in the matching route or when there is no type with {controller} name found. You can easily handle this case and route the request to the above Handle404 method using a custom IHttpControllerSelector. Here is the definition of a custom IHttpControllerSelector,

    public class HttpNotFoundAwareDefaultHttpControllerSelector : DefaultHttpControllerSelector
    {
        public HttpNotFoundAwareDefaultHttpControllerSelector(HttpConfiguration configuration)
            : base(configuration)
        {
        }
        public override HttpControllerDescriptor SelectController(HttpRequestMessage request)
        {
            HttpControllerDescriptor decriptor = null;
            try
            {
                decriptor = base.SelectController(request);
            }
            catch (HttpResponseException ex)
            {
                var code = ex.Response.StatusCode;
                if (code != HttpStatusCode.NotFound)
                    throw;
                var routeValues = request.GetRouteData().Values;
                routeValues["controller"] = "Error";
                routeValues["action"] = "Handle404";
                decriptor = base.SelectController(request);
            }
            return decriptor;
        }
    }

Next, it is also required to pass the request to the above Handle404 method if no matching action method found in the selected controller due to the reason discussed above. This situation can also be easily handled through a custom IHttpActionSelector. Here is the source of custom IHttpActionSelector,

    public class HttpNotFoundAwareControllerActionSelector : ApiControllerActionSelector
    {
        public HttpNotFoundAwareControllerActionSelector()
        {
        }

        public override HttpActionDescriptor SelectAction(HttpControllerContext controllerContext)
        {
            HttpActionDescriptor decriptor = null;
            try
            {
                decriptor = base.SelectAction(controllerContext);
            }
            catch (HttpResponseException ex)
            {
                var code = ex.Response.StatusCode;
                if (code != HttpStatusCode.NotFound && code != HttpStatusCode.MethodNotAllowed)
                    throw;
                var routeData = controllerContext.RouteData;
                routeData.Values["action"] = "Handle404";
                IHttpController httpController = new ErrorController();
                controllerContext.Controller = httpController;
                controllerContext.ControllerDescriptor = new HttpControllerDescriptor(controllerContext.Configuration, "Error", httpController.GetType());
                decriptor = base.SelectAction(controllerContext);
            }
            return decriptor;
        }
    }

Finally, we need to register the custom IHttpControllerSelector and IHttpActionSelector. Open global.asax.cs file and add these lines,

    configuration.Services.Replace(typeof(IHttpControllerSelector), new HttpNotFoundAwareDefaultHttpControllerSelector(configuration));
    configuration.Services.Replace(typeof(IHttpActionSelector), new HttpNotFoundAwareControllerActionSelector());

Summary:

In addition to building an application for HTTP services, it is also important to send meaningful centralized information in response when something goes wrong, for example 'HTTP 404 Not Found' error. In this article, I showed you how to handle 'HTTP 404 Not Found' error in a centralized location. Hopefully you will enjoy this article too.

A jQuery Plugin for Google Map Thumb(Magnifier)

imran_ku07 — Sun, 13 May 2012 17:50:00 GMT

Introduction:

Recently in one of my project I came across with a requirement to show a thumbnail(or magnifier) in Google map because there was a lot of custom objects(line, polygon, etc) on my Google map due to which the map become obscure. I was able to successfully implement this option. But I have also created a jQuery plugin, so that if anyone else came across the same issue, can reuse the functionality. In this article, I will show you how to use this plugin. Here is a quick demo.

Description:

I am not going to bore you further, just download the jquery.gmapthumb sample from github or install it via nuget. Also, a sample has been attached with this blog. You just need to include the jquery.gmapthumb.js(or jquery.gmapthumb.min.js) file in your page and add this script. $('#map').gmapthumb([map]). Note that the map object is inside square bracket(array) because you can bind multiple maps with just one line(see example in above link for further reference). Finally, you need to place the img folder inside your page directory.

Summary:

In this article, I showed you how you can show a thumbnail(magnifier) in your Google map very quickly. I have also attached a sample with this blog. Hopefully you will enjoy this article too.

Using Razor V2 in ASP.NET MVC 3

imran_ku07 — Sat, 28 Apr 2012 07:48:00 GMT

Introduction:

Razor view engine's popularity and usage is continuously increasing because it is very easy to learn and write. Also, it is very clean and easy to maintain. The beauty of Razor is that you can host it in any application not just in ASP.NET MVC or ASP.NET Web Pages. The latest version of Razor is 2 which is released with ASP.NET MVC 4 and ASP.NET Web Pages 2. Razor V2 includes a bunch of new features. With the cool new features of Razor, you may want to use these features in your ASP.NET MVC 3 application. In this article, I will show you how you can use Razor V2 in ASP.NET MVC 3 application.

Description:

For testing purpose, you can create a new ASP.NET MVC 3(Razor) application. From Solution Explorer, remove the reference of System.Web.WebPages 1.0 and System.Web.Helpers 1.0. Then, add the reference of System.Web.WebPages 2.0 and System.Web.Helpers 2.0.

Inside root web.config file, add/update these settings,

      <appSettings>
            <add key="webpages:Version" value="2.0.0.0"/>
            <add key="webpages:Enabled" value="true" />
            <add key="PreserveLoginUrl" value="true" />
.............................................................................................................................
.............................................................................................................................
.............................................................................................................................
      <add assembly="System.Web.WebPages, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
      <add assembly="System.Web.Helpers, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
.............................................................................................................................
.............................................................................................................................
.............................................................................................................................
      <dependentAssembly>
            <assemblyIdentity name="System.Web.WebPages" publicKeyToken="31bf3856ad364e35" />
            <bindingRedirect oldVersion="1.0.0.0-2.0.0.0" newVersion="2.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
             <assemblyIdentity name="System.Web.Helpers" publicKeyToken="31bf3856ad364e35" />
	    <bindingRedirect oldVersion="1.0.0.0-2.0.0.0" newVersion="2.0.0.0" />
      </dependentAssembly>
.............................................................................................................................
.............................................................................................................................
.............................................................................................................................

Inside Views web.config file, add/update these settings,

      <configSections>
		<sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
			<section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
			<section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
		</sectionGroup>
      </configSections>
      <system.web.webPages.razor>
		<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

Now you can easily use Razor V2 features in inside ASP.NET MVC 3 view.

      @{
            int? nullValue = null;
      }

      <a href="~/WebForm1.aspx" class="@nullValue">MyLink</a>

Note: Before doing this, make sure you have installed ASP.NET MVC 4. Otherwise the trick will fail.

Summary:

There is a bunch of improvement and new features in Razor V2. In this article, I showed you how you can add Razor V2 inside ASP.NET MVC 3 application. I have also attached a sample ASP.NET MVC 3 application with above changes. Hopefully you will enjoy this article too.

Adding AjaxOnly Filter in ASP.NET Web API

imran_ku07 — Sun, 01 Apr 2012 11:45:00 GMT

Introduction:

Currently, ASP.NET MVC 4, ASP.NET Web API and ASP.NET Single Page Application are the hottest topics in ASP.NET community. Specifically, lot of developers loving the inclusion of ASP.NET Web API in ASP.NET MVC. ASP.NET Web API makes it very simple to build HTTP RESTful services, which can be easily consumed from desktop/mobile browsers, silverlight/flash applications and many different types of clients. Client side Ajax may be a very important consumer for various service providers. Sometimes, some HTTP service providers may need some(or all) of thier services can only be accessed from Ajax. In this article, I will show you how to implement AjaxOnly filter in ASP.NET Web API application.

Description:

First of all you need to create a new ASP.NET MVC 4(Web API) application. Then, create a new AjaxOnly.cs file and add the following lines in this file,

    public class AjaxOnlyAttribute : System.Web.Http.Filters.ActionFilterAttribute
    {
        public override void OnActionExecuting(System.Web.Http.Controllers.HttpActionContext actionContext)
        {
            var request = actionContext.Request;
            var headers = request.Headers;
            if (!headers.Contains("X-Requested-With") || headers.GetValues("X-Requested-With").FirstOrDefault() != "XMLHttpRequest")
                actionContext.Response = request.CreateResponse(HttpStatusCode.NotFound);
        }
    }

This is an action filter which simply checks X-Requested-With header in request with value XMLHttpRequest. If X-Requested-With header is not presant in request or this header value is not XMLHttpRequest then the filter will return 404(NotFound) response to the client.

Now just register this filter,

        [AjaxOnly]
        public string GET(string input)

You can also register this filter globally, if your Web API application is only targeted for Ajax consumer.

Summary:

ASP.NET WEB API provide a framework for building RESTful services. Sometimes, you may need your certain API services can only be accessed from Ajax. In this article, I showed you how to add AjaxOnly action filter in ASP.NET Web API. Hopefully you will enjoy this article too.