My.Ramblings

My favorite tools and software

pranav rastogi — Sun, 03 Mar 2013 02:02:00 GMT

Every handy man has their own set of recommended tools which makes them extremely productive. Other these years I have developed a liking for a few of them which I would like to share with you. I hope you will like them as well and some of them do increase your productivity.

I do plan to regularly update this post and add more tools/software as I find more useful ones.

Modern ASP.NET WebForms 4.5–DevIntersection 2012

pranav rastogi — Mon, 10 Dec 2012 23:20:00 GMT

Thank you all who came for my talk on ASP.NET WebForms 4.5 at DevIntersection(http://devintersection.com/)

Please find the slides and the samples as follows

Slides

Web forms- DevIntersection from rustd

Samples

I have also included my talk walkthrough so you can relate to all the concepts I talked about

Talk Walkthrough

- Outline
     -- Not the usual flow of features but some interesting things you can do with the webforms framework
     -- Pattern based development
     -- Cleaner code
     -- Extensibility

- Templates rendering
-- Standards compliant

- OAuth/Open Id Login
-- Uncomment AuthConfig
-- Login using Google

- Web Optimization
     -- Debug=true(all files)
    -- Debug=false(bundled files)
     -- Framework scripts
         ---- Bundled as nuget packages
- Tips & tricks
     -- Script Manager
         --- Remappings
             ---- Originally come from aspnet ajaxcdn but you can change it
         -- CDN support(enable cdn=true)
             ---- Even the bundles
         -- LoadSuccessExpression
             ---- If the network goes out then you can load the scripts locally

- Patterns/Tips & Tricks
     -- Model Binding
         ---- Basics
        ---- Model Binding
        ---- Routing
        ---- PRG
         ---- Repository
         ---- Unit Testability
         ---- Dynamic data
         ---- Model Binding Extensibility
         ------ Aggregate Value Providers and an attribute
                 Similar to mvc
          ----- AdHoc Model Binding
                 No data controls
                 Anonymous types cannot be constructed

    - Control Builder Interceptor
         -- Customize the compilation system
         -- Change what kind of code gets generated
         -- Great of custom control developers
         -- Edit the codedom of the existing control - not possible before
             ---- Sub class the control
             ---- Reimplement the control builder
         -- To use this put it in the config
         -- Layer of indirection between UI/code something like MVP. Little code talking to UI
         -- Layer of indirection between code and markup
         -- Take this idea further along
             ---- Advanced control builder interceptor
             ---- Earlier written using custom controls but with the new feature in v4.5 you can do it more easily

     -- Command Bubbling
         ---- WPF/Silverlight
         ---- Rather than event handlers to do business logic - command interface
         ---- Remove as much code as I can
          ---- Code interacts with controls - separation of concerns
          ---- Declarative statements to wire up server controls to data
          ---- Imperative logic factored out into different classes
        ---- Webforms has bubbling event(

Controls like gridview work like this)
         ---- Separation of concern/Clean code behind
         ---- Event bubbling to update UI when an event happens(click/button)
         ---- Component driven/event driven

-- Tag Mapping
         -- Code to modify control…do not put it in the code behind
         -- Remapping controls
     -- Custom Templates
         -- User voice item
         -- Load them from database/file etc

-- Imperative vs declarative
             -- Declarative - more maintainable - you know everything statically
             -- Imperative - set stuff dynamically

- Async Support
     -- Async=false
     -- Async=true
    --Async/await usage

- FriendlyURLs
-- Cleaner Urls which are easy to use
-- Show the async demo on a mobile device

- Scaffolding
     -- Person class
     -- Scaffold using UI
     -- CRUD on desktop
     -- Default on mobile

Model Binding Fundamentals

pranav rastogi — Fri, 30 Nov 2012 09:49:00 GMT

In the previous post we looked at an overview of what is Model Binding and the benefits it brings in for WebForms developers. In this post we will look at the basic fundamentals and how the Model Binding system works with controls.

Data Binding with Model Binding

Uptil ASP.NET v4.0, data binding in controls happened with data bound controls such as GridView used to bound to data source controls such as ObjectDataSource. We will use this as a reference to understand the flow in the Model Binding System. A lot of the implementation derives inspiration from ObjectDataSource.

Following snippet shows how a GridView calls the Model Binding system to get a list of products.

 <asp:GridView ID="getProduct" runat="server" ItemType="Products"

            UpdateMethod="getProduct_UpdateItem"

             SelectMethod="getProduct_GetData" />

public IQueryable<Products> getProduct_GetData()

            return _context.Products.ToList();

        // The id parameter name should match the DataKeyNames value set on the control

        public void getProduct_UpdateItem(int id)

            Products item = null;

            TryUpdateModel(item);

            if (ModelState.IsValid)

                // Save changes here, e.g. MyDataLayer.SaveChanges();

At the heart of the Model Binding system is a datasource called ModelDataSource. and ModelDataSourceView As a developer when you never Bind the GridView to the ModelDataSource. The DataSource is an implementation detail which takes in value from the control and passes onto the ModelBinding system to perform the Binding & Validation to the model and gives the result back to the control/page.

Page Execution Flow

Now that we know that there is a datasource involved at the implementation level of the ModelBinding system, let’s look at the flow from the control – ModelBinding – control. At a very high level this is what happens

GridView calls the SelectMethod to get the values
This initializes the ModelDataSource and it calls the ExecuteSelect method on ModelDataSourceView
The ModelDataSourceView calls the DefaultModelBinder
DefaultModelBinder looks through all the ModelBinderProviders registered in the system and tried to get the ModelBinder that can provide the value for a given Type
The selected ModelBinder gets called to perform the Binding of values to the Model
The ModelBinder calls the ValueProvider to get the value.

This is useful if you want to specify that the value is coming from a control/querystring or other collections

I wanted to put this information out now so that you can get an idea about the plugability areas that exist in the ModelBinding system. In the later posts w We are going to look more into the details

Model Binders and Model Binder Providers

The initialization of the ModelBindig system registers the following ModelBinders. These partition the responsibilities of the original DefaultModelBinder, making it easy to consume them from your own custom binder or to replace their individual responsibilities. For example, changing how dictionaries are bound application-wide now involves replacing a single provider rather than rewriting the DefaultModelBinder. The binders included in-box are, in order:

· TypeMatchModelBinderProvider – If the incoming value is already typed correctly for the target model (e.g. incoming value is string, property to bind is string), short-circuits the entire process and just returns the string.

· BinaryDataModelBinderProvider – Handles binding base-64 encoded input to byte[] and System.Linq.Data.Binary models.

· KeyValuePairModelBinderProvider – Handles KeyValuePair<TKey, TValue>. Consumed by the dictionary binder.

· ComplexModelDtoModelBinderProvider – Handles complex models. Consumed by the mutable object binder. More info on this type in the tutorial at the end of this document.

· ArrayModelBinderProvider – Handles T[].

· DictionaryModelBinderProvider – Handles IDictionary<TKey, TValue>.

· CollectionModelBinderProvider – Handles IEnumerable<T>.

· TypeConverterModelBinderProvider – Handles simple type conversions, e.g. incoming value is a string and property to bind is an integer.

Value Providers

Following are the Value providers which you can use to specify where should the ModelBinding look for when trying to get the value

Value Providers	Description
Form	The value is retrieved from the Form collection
Control	The value is retrieved from the specified control
QueryString	The value is retrieved from the QueryString collection
Cookie	The value is retrieved from the Cookie collection
Profile	The value is retrieved from the Profile collection
RouteData	The value is retrieved from the Route collection
Session	The value is retrieved from the Session collection

In the next few posts we will look at how to do basic create/replace/delete/filtering cases and then look at extending the ModelBinding system using these concepts

Hope you will find this useful!!!

This has been cross posted to http://blogs.msdn.com/b/webdev/archive/2012/11/30/model-binding-fundamentals.aspx

Interacting with Databases for Web Developers in VS 2012

pranav rastogi — Mon, 12 Nov 2012 16:42:00 GMT

VS2012 is out and with it brings a host of developer improvements when dealing with data. This post aims at highlighting a few key improvements which will affect you the most and hopefully you will find this information useful in getting started with the improvements in Visual Studio tooling to interact with databases. While the Data Tooling itself has undergone a lot of changes, this post is geared towards Web Application Developers.

Changes in VS2012

VS2012 ships with SQL2012 engine.
VS2012 ships with an enchanced Sql tools(SSDT) which brings in functionality from SSMS(SqlServerManagementStudio) to VS
- As part of this integration, you will see a new window called “SQL Server Object Browser”. In this window you can do advanced Database management stuff, such as running sprocs, managing Initial Catalogs etc. which were not possible in “Database Explorer”
- Some videos to learn more about SSDT.
"Sql Server Express" is no longer installed with VS. Instead VS ships with "Sql Server Express LocalDB".
- LocalDB development is supported in VS2012 for .NET v4.0/v4.5 on Windows 8/ Windows 7 – Client and Server SKUs
- LocalDB development is supported in VS2012 for .NET v3.5 on Windows 8 only(Client and Server SKUs)
Enhanced User experience while upgrading projects from VS2010 to VS2012
- This user experience has some guidance which help you upgrade databases which were using SQLExpress to LocalDB
Auto loading of ConnectionStrings in ServerExplorer
- if we detect that your ConnectionString points to a database which exists, then we load the connectionstring in the ServerExplorer so its there when you want to use it. This is an improvement from Dev10 where you had to explicitly add the ConnectionString

Why LocalDB?

The quick pitch for LocalDB is the following: “It is very easy to install and it requires no management” LocalDB runs as your account and not as a system wide service(which is how SqlExpress runs). This post from the SQL team goes in detail about the benefits

With all the changes of moving away from SqlExpress to LocalDB, nothing should change in terms of your application development. You should be able to use almost the same connectionStrings as you had with SqlExpress, but instead change the DataSource from “.\SQLExpress” to “(LocalDb)\v11.0” and remove the UserInstance flag since LocalDb always runs as your account

Initial Catalog vs AttachDbFileName

If you look at the connectionstring, the templates for ASP.NET WebForms, MVC use in VS 2012, you will notice that the connectionstring looks like follows. This connection is somewhat different to what you might have seen with web projects in VS2010 where we were only using AttachDbFileName.This change has nothing to do with LocalDb, on the contrary this exposes some of the common patterns that have existed when working with SQL.

<add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;

Initial Catalog=aspnet-MvcApplication18-20121022222325;Integrated Security=SSPI;

AttachDBFilename=|DataDirectory|\aspnet-MvcApplication18-20121022222325.mdf"

providerName="System.Data.SqlClient" />

Following is how these two values are used

Initial Catalog: This entry is a key in the SQL master table which holds all of the databases which were created on an instance. In this case the instance is “(LocalDb)\v11.0”

AttachDbFileName: This entry tells SQL the location of the mdf file which holds the database information.

The SQL engine uses Initial Catalog to look up the database entry in its master list and load the database file from the path specified by AttachDbFileName

One small caveat

By surfacing this information to the developer, a developer can run into the following situation. Let’s say that you ran your application and created a database with the above connectionstring. In this case, if you delete the database file(mdf) from disk and do not change the connectionstring, then SQL will look up the database by the Initial Catalog entry which still exists and will try to load the database from disk based on the AttachDbFileName and since the database does not exist, you will get the following error.

“Cannot attach the file 'c:\users\foo\documents\visual studio 2012\Projects\MvcApplication18\MvcApplication18\App_Data\aspnet-MvcApplication18-20121022222325.mdf' as database 'aspnet-MvcApplication18-20121022222325'.”

To workaround this error do either of the following

Change the Initial Catalog and AttachDbFileName value to be something unique
Using SSDT, connect to “(LocalDb)\v11.0” instance and delete the Initial Catalog entry specified in the database

The reason the AttachDbFileName entry exists so that the database file gets dropped in App_Data folder of your application.

How to Videos for basic operations in VS tooling

Working with Entity Framework Code First

Cheat sheet of things to remember/do for Data in VS2012

These cheat sheet is useful when you are trying to figure out what instance to use for LocalDB

Default Instance of Localdb in VS2012 is "(LocalDb)\v11.0"
- This means whenever you are connecting to a localdb instance you need to type in the above to connect to using Windows Authentication to operate on your database
Tools-Options is "(LocalDb)\v11.0"
- This means that any local database that you create will be created using "(LocalDb)\v11.0" instance
- If you have SqlExpress installed and you want to use SqlExpress as the default local database server you should change this option in VS. This is a global setting for VS
LocalDB does not run with UserInstance=true setting
- You will get an error when you run your application

Helpful links/scripts

I hope this would help you understand the changes in the Data Tooling experience for VS2012. This was cross posted at http://blogs.msdn.com/b/webdev/archive/2012/11/12/interacting-with-databases-for-web-developers-in-vs-2012.aspx

Building Modern WebForms - DevConnections 2012

pranav rastogi — Tue, 30 Oct 2012 22:50:00 GMT

Thank you all for coming for my talk on Building Modern WebForms application.

You can download the samples from

The slide deck is as follows

Web forms from rustd

ASP.NET Web Forms Application (2012) Templates on Visual Studio 2010

pranav rastogi — Mon, 29 Oct 2012 08:42:00 GMT

The release of Visual Studio 2012 included updated templates for ASP.NET WebForms, MVC and WebPages. The templates showcased the use of modern standards in HTML5, CSS and JavaScript. Apart from these, they also showcased social login via Twitter, Facebook etc. Scott Hanselman has a short video demonstrating social login. While this amazing goodness was available for developers who had access to VS2012. If you were a Web Forms developer using VS2010SP1, then there was no way for you install these templates.

To solve this problem, I created a Visual Studio Extension which will install the templates that we shipped with VS2012.

Note: This Extension is by no means supported by Microsoft. It is something I created in my own spare time to make it easier for WebForms developers using VS2010SP1 to use the updated templates that we shipped with VS2012

Download and Use the Extension

If you are using VS2010SP1, then you can do the following else you can download the extension(ASPNETWebForms) from the VS Gallery
Open VS2010SP1
Click Tools – Extension Manager
Goto Online Gallery and search for “aspnet webforms”
Alternately, you can search for the name of the extensions “ASPNETWebForms”
Once you have searched for the extension, it will appear as follows in the search result

Download the extension/ The templates will show up in the File-New project dialog in the following category(Visual C#– Web)
To use the installed templates, create the project in “File – New Project – Visual C#-Web – ASPNETWebFormsApplication”

Once the project is created, follow the instructions in the readme.txt file to Build & Run the project

http://visualstudiogallery.msdn.microsoft.com/ec79e369-51bd-4212-83d0-71349d038461 has more details about the Extension and also what SKUs are supported.

Please do give feedback on the VS Gallery for the extension.

This post has been cross posted at http://blogs.msdn.com/b/webdev/archive/2012/10/29/asp-net-web-forms-application-2012-templates-on-visual-studio-2010.aspx

Common commands to manage a Sql Instance

pranav rastogi — Tue, 23 Oct 2012 07:32:01 GMT

This post is a repository of commands that I have been commonly using to manage a Sql Instance.

List the sys admins on a instance

select [name] from sys.syslogins where sysadmin=1

Add yourself/someone as a sysadmin on sql instance

EXEC master..sp_addsrvrolemember @loginame = N'redmond\pranavra', @rolename = N'sysadmin'

EXEC master..sp_addsrvrolemember @loginame = N'BUILTIN\Administrators', @rolename = N'sysadmin'

EXEC master..sp_addsrvrolemember @loginame = N'REDMOND\aapfte', @rolename = N'sysadmin'

Remove yourself/someone as a sysadmin on sql instance

EXEC sp_droprolemember 'sysadmin', 'redmond\pranavra'

Running these commands if you do not have VS Pro and cannot connect to TSqlEditor

Open an admin prompt
Goto SQLInstall\Microsoft SQL Server\MSSQL.X\MSSQL\Binn eg D:\Program Files\Microsoft SQL Server\MSSQL10.SQLEXPRESS\MSSQL\Binn
sqlcmd -SComputerName\InstanceName Eg Sqlcmd -S .\SQLEXPRESS
Execute the command as you need eg
- select [name] from sys.syslogins where sysadmin=1
- Go

Changing compatibility version of sqldatabase

EXEC sp_dbcmptlevel 'aspnet-WebApplication3-20120502172054', 90

ASP.NET WebForms Model Binding – Overview

pranav rastogi — Tue, 23 Oct 2012 06:14:00 GMT

This is the first post in the part of series around Model Binding. In this post I will introduce Model Binding integration in ASP.NET WebForms while focusing on history, benefits, principles and the integration of Model Binding. In the upcoming posts, I will be going into the details about the features that are supported by this system.

What is Model Binding

Model Binding is a system which binds a value submitted from the client to a model on the server so that the model is available for inspection for validation rules and processing on the server. In essence the system has two fundamental functions – Binding & Validation.

In a WebForms application, data binding(from client to server and vice versa) typically happens via Data Bound and Data Source controls. While this approach has the advantages of an experience where you can get your application up and running easily, it does have some drawbacks for some developers who want to tap in more modern ways of developing applications, such as : doing validation using Data Annotations, PRG pattern, Repository patters, cleaner page code behind etc.

History Behind Model Binding

Model Binding as a system has existed in many Frameworks. Rails implements the core functions of Binding & Validation in its own way. ASP.NET MVC had Model binding support since its early stages. When ASP.NET MVC2 was released, the team released a prototype of an “Extensible Model Binding system”. This prototype made it possible for a Framework developer to write their own Model Binding system, should they choose to do so.(of course anyone in their right minds would not attempt it, but the ASP.NET team decided anyways to do this for WebForms)

Infact this Extensible Model Binding was how the team derived lots of inspiration from while trying to implement a Model Binding System that integrates the flexibility of Model Binding system and power of controls. ASP.NET WebAPI also derives some inspiration from this extensible model when ASP.NET WebAPI added support for binding using different formatters.

Benefits of Model Binding

With the introduction of Model Binding, it is now much easier to build modern webforms applications. Following are the areas where this integration adds value

Rich controls support

All the existing data bound controls such as GridView, ListView etc have been updated to work with Model Binding so you should be able to reuse the rich functionality of these controls

Validation

Modern ways of validation using Data Annotation attributes
Easier to propagate validation errors from Business Layer back to the UI on the page
Easier to integrate model level validation errors(from ORM such as EF or anything of your choice) when saving the record in the database

Dynamic Data support

Easier to add validation via Data Annotations and client side validation
Easier to customize the UI for columns using Data Annotations and Field Templates

Add rich UI for integrating jquery based DateTime picker for DateTime fields

Easier to customize the entities using Data Annotations and Entity Templates

Easier to embrace the following patterns

Unit Testing the application layer
PRG pattern
Repository pattern
Cleaner page code behind methods. These server side code files do not have any application functional code and they only focus on UI interactions

Extensible Model Binding system

Support scenarios of binding in advanced scenarios such as complex types, ad-hoc Model Binding
Customize the existing implementation to enable more commonly used scenarios easier such as Master Details view
Add more Binders and Value providers

I hope so far this would help you understand the bigger picture with WebForms Model Binding and value it brings to an application developer. As Scott Hanselman noted, this integration also brings ASP.NET MVC/WebForms application development much closer.

In the next post we will be looking at some high level fundamentals and features on Model Binding in WebForms

Cross posted to http://blogs.msdn.com/b/webdev/archive/2012/11/15/asp-net-webforms-model-binding-overview.aspx

ASP.NET 4.5 ScriptManager Improvements in WebForms

pranav rastogi — Fri, 21 Sep 2012 09:07:45 GMT

The ScriptManger control has undergone some key targeted changes in ASP.NET 4.5 which makes it easier to register, manage and combine scripts using the ASP.NET weboptimization feature. This post will highlight the changes that have happened to this control

Easy Integration with JQuery and JQueryUI

The default templates for WebForms ship with the following packages “AspNet.ScriptManager.jQuery” and “AspNet.ScriptManager.jQuery.UI.Combined”. These packages make it easier to bring in jquery and jqueryUI libraries and also register them with the ScriptManager. Here is how it works.

These packages add the following ScriptMappings for jquery and jqueryUI in the PreApplicationStart method of the application

JQuery

     string str = "1.7.1";

        ScriptManager.ScriptResourceMapping.AddDefinition("jquery", new ScriptResourceDefinition

        {

            Path = "~/Scripts/jquery-" + str + ".min.js", 

            DebugPath = "~/Scripts/jquery-" + str + ".js", 

            CdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-" + str + ".min.js", 

            CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-" + str + ".js", 

            CdnSupportsSecureConnection = true, 

            LoadSuccessExpression = "window.jQuery"

        });

JQuery.UI

    string str = "1.8.20";

        ScriptManager.ScriptResourceMapping.AddDefinition("jquery.ui.combined", new ScriptResourceDefinition

        {

            Path = "~/Scripts/jquery-ui-" + str + ".min.js", 

            DebugPath = "~/Scripts/jquery-ui-" + str + ".js", 

            CdnPath = "http://ajax.aspnetcdn.com/ajax/jquery.ui/" + str + "/jquery-ui.min.js", 

            CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jquery.ui/" + str + "/jquery-ui.js", 

            CdnSupportsSecureConnection = true

        });

These SciptMappings are registered with ScriptManager as follows

    <asp:ScriptManager runat="server">

            <Scripts>

                <asp:ScriptReference Name="jquery" />

                <asp:ScriptReference Name="jquery.ui.combined" />            

            </Scripts>

        </asp:ScriptManager>

Now you can enjoy all the benefits of having ScriptManager such as

Debug/Release Support

If you are debugging your application(debug=true) in web.config then ScriptManager will serve the scripts from debug path(non minified scripts) such as “~/Scripts/jquery-1.7.1.js”

CDN Support

If your set EnableCDN=true on the ScriptManager control, then all the Scripts will be served from the CDN path such as “http://ajax.aspnetcdn.com/ajax/jquery-1.7.1.js”

Override Script Mappings

Let’s assume that you wanted to override the scriptmappings to change the CDN path where these scripts are served from. You can do so by changing the scriptmapping before the page is accessed. Typically doing this in Global.asax is better

    string str = "1.7.1";

        ScriptManager.ScriptResourceMapping.AddDefinition("jquery", new ScriptResourceDefinition

        {

            Path = "~/Scripts/jquery-" + str + ".min.js", 

            DebugPath = "~/Scripts/jquery-" + str + ".js", 

            CdnPath = "http://http://code.jquery.com/jquery-"+ str + ".min.js", 

            CdnDebugPath = "http://code.jquery.com/jquery-"+ str + ".js", 

            CdnSupportsSecureConnection = true

        });

Updating Jquery/JqueryUI libraries

Let’s say a new version of Jquery or JqueryUI comes along. Traditionally you would have to download the jquery packages for these libraries and then update the script references everywhere on your pages. With the above integration of AspNet.ScriptManager.Jquery packges this scenario really becomes easy since when you update Jquery/JqueryUI you will get corresponding versions of AspNet.ScriptManager.Jquery/AspNet.ScriptManager.Jquery.UI which will update the scriptmappings to the current version of jquery that was downloaded and you do not have to change anything in your application

LoadSuccessExpression

This is a new property which is added to the ScriptMapping and it takes care of the following use case. Imagine that you are serving your scripts from a CDN path and if there is an outage in the CDN, your site will be affected because you will not be able to serve any scripts. This property takes in an expression which evaluates whether the script was loaded correctly and if it fails then it renders the script from the local application path.

Following is how the script tag looks like for jquery(assuming that you are serving scripts from CDN)

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.js" type="text/javascript"></script>

    <script type="text/javascript">

    //<![CDATA[

    (window.jQuery)||document.write('<script type="text/javascript" src="Scripts/jquery-1.8.1.js"><\/script>');//]]>

    </script>

Remapping Framework scripts

One neat improvement that happened in ASP.NET 4.5 is the decoupling of the “Microsoft Ajax script files(MicrosoftAjaxCore etc)” and the WebForms scripts(GridView.js etc). We did the work in this release so you can serve these scripts from your application Scripts folder rather than load then up from System.Web This makes the scripts easily redistributable and updateable. The following section explains on how you can use these scripts and combine them with WebOptimization feature

Serving Framework Scripts from inside the application

We created the following 2 packages “Microsoft.AspNet.ScriptManager.MSAjax” “Microsoft.AspNet.ScriptManager.WebForms” which do the following

Install the Scripts into your application so it looks like follows

These packages also create the following scriptmappings so that they can be registered with ScriptManager as follows

MicrosoftAjax scripts

We are registering all the scripts and we are bundling them together as “MsAjaxBundle”

    ScriptManager.ScriptResourceMapping.AddDefinition("MsAjaxBundle", new ScriptResourceDefinition

        {

            Path = "~/bundles/MsAjaxJs", 

            CdnPath = "http://ajax.aspnetcdn.com/ajax/4.5/6/MsAjaxBundle.js", 

            LoadSuccessExpression = "window.Sys", 

            CdnSupportsSecureConnection = true

        });

        PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjax.js", "window.Sys && Sys._Application && Sys.Observer");

        PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxCore.js", "window.Type && Sys.Observer");

        PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxGlobalization.js", "window.Sys && Sys.CultureInfo");

        PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxSerialization.js", "window.Sys && Sys.Serialization");

        PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxComponentModel.js", "window.Sys && Sys.CommandEventArgs");

        PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxNetwork.js", "window.Sys && Sys.Net && Sys.Net.WebRequestExecutor");

        PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxHistory.js", "window.Sys && Sys.HistoryEventArgs");

        PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxWebServices.js", "window.Sys && Sys.Net && Sys.Net.WebServiceProxy");

        PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxTimer.js", "window.Sys && Sys.UI && Sys.UI._Timer");

        PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxWebForms.js", "window.Sys && Sys.WebForms");

        PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxApplicationServices.js", "window.Sys && Sys.Services");

Here is the Bundle definition for these scripts

    bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(

                    "~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",

                    "~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",

                    "~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",

                    "~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));

Here is the ScriptManger registration for these scripts

    <asp:ScriptManager runat="server" >

            <Scripts>

                <%--Framework Scripts--%>

                <asp:ScriptReference Name="MsAjaxBundle" />

                <%--Site Scripts--%>

            </Scripts>

        </asp:ScriptManager>

WebForms scripts

We are registering all the scripts and we are bundling them together as “WebFormsBundle”

    ScriptManager.ScriptResourceMapping.AddDefinition("WebFormsBundle", new ScriptResourceDefinition

        {

            Path = "~/bundles/WebFormsJs", 

            CdnPath = "http://ajax.aspnetcdn.com/ajax/4.5/6/WebFormsBundle.js", 

            LoadSuccessExpression = "window.WebForm_PostBackOptions", 

            CdnSupportsSecureConnection = true

        });

Bundle Definition

    bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(

                      "~/Scripts/WebForms/WebForms.js",

                      "~/Scripts/WebForms/WebUIValidation.js",

                      "~/Scripts/WebForms/MenuStandards.js",

                      "~/Scripts/WebForms/Focus.js",

                      "~/Scripts/WebForms/GridView.js",

                      "~/Scripts/WebForms/DetailsView.js",

                      "~/Scripts/WebForms/TreeView.js",

                      "~/Scripts/WebForms/WebParts.js"));

ScriptManager registration

The reason we have the Assembly and the Path attribute here is because ScriptManager special cases these scripts when it tries to load them, so we had to make some special arrangements with ScriptManager code to make this work This is a process which is called deduping. Basically when the ScriptManager tried to load up these scripts, it can load them up from System.Web or the path attribute and eventually in this case, the ScriptManager dedupes the script references and serves the scripts from the path attribute. This is part of the “special arrangement” that we did in ScriptManager. We were very cautious when doing this given this code path was on a very critical path for mainline ScriptManager scenarios which we did not want to regress.

    <asp:ScriptManager runat="server" >

            <Scripts>

                <%--Framework Scripts--%>

                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />

                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />

                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />

                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />

                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />

                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />

                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />

                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />

                <asp:ScriptReference Name="WebFormsBundle" />

                <%--Site Scripts--%>

            </Scripts>

        </asp:ScriptManager>

When you run this page you will get script references as follows

    <script src="/bundles/MsAjaxJs?v=J4joXQqg80Lks57qbGfUAfRLic3bXKGafmR6wE4CFtc1" type="text/javascript"></script>

    <script src="/bundles/WebFormsJs?v=q9E9g87bUDaS624mcBuZsBaM8xn2E5zd-f4FCdIk2cA1" type="text/javascript"></script>

        <script type="text/javascript">

So these were the improvements that happened in the ScriptManager control for registering scripts. In case you want to refresh your memory, ScriptManager was greatly enhanced in ASP.NET v4.0 and Dave Reed had a fantastic post about it, which I strongly recommend to go through.

Configuring your ASP.NET application for Microsoft OAuth account

pranav rastogi — Wed, 19 Sep 2012 07:29:27 GMT

This post is a part of the series about how to enable and use OpenID/OAuth support that was added to the ASP.NET templates in Visual Studio 2012. In this post I am going to detail the instructions on configuring your application to use Microsoft account for authentication. I am going to be focusing on configuring the application for a development environment(using VS & IISExpress)

Create a new ASP.NET MVC/WebForms or WebPages application

Build and run the website.

Use a test domain

You need to use a domain other than localhost since Microsoft account cannot redirect back to localhost
Some folks have graciously reserved localtest.me for local testing of domains so you do not have to mess with hosts files. Follow the link for more information
You can use Foo.localtest.me as a test domain. (Make sure Foo is unique. I would recommend prefixing it with something unique such as Foo<MyName>.localtest.me ). For the purpose of this article we will use Foo.localtest.me
Ping Foo.localtest.me should be reverted back to local machine

Edit firewall rules for port 80 to receive external requests.

Follow the guidelines as mentioned (These work for windows8 as well)http://maximumpcguides.com/windows-7/open-a-port-in-windows-7s-firewall/

Configuring the Microsoft live portal

Open link https://manage.dev.live.com/AddApplication.aspx. Login using live credentials

Enter Application name and click on I accept (Read the terms of use and privacy if it concerns you !)

In the Live Connect Developer Center where the APP was created in step 7, click on Application Settings page link -> API settings

In the redirectDomain enter the above created domain name. Eg: http://Foo.localtest.me

Hit Save and the changes should be saved

Configuring the keys in your application

For MVC/WebForms applications

Edit the AuthConfig file in the App_Start folder and uncomment the code for the Microsoft OAuth provider. Copy the client ID and client secret in the AuthConfig file in the uncommented section of Microsoft login

For WebPages applications

Edit the _AppStart.cshtml file and uncomment the code for the Microsoft OAuth provider. Copy the client ID and client secret to this file in the uncommented section of Microsoft login

Map the test domain to your application

Now we need to add mapping for the domain name to be redirected to our application created in step 1
For IIS Express

Open applicationHost.config in %Documents%\IISExpress\config
Locate the binding for the web application in the file. It will be defined in the <site> tag. For example

             <site name="WebApplication5" id="6">

            <application path="/" applicationPool="Clr4IntegratedAppPool">

            <virtualDirectory path="/" physicalPath="pathtoapplication\WebApplication5" />

            </application>

            <bindings>

            <binding protocol="http" bindingInformation="*:46178:localhost" />

            </bindings>

            </site>

Add a new binding for port 80 and the domain name to this web application under the <bindings>

<binding protocol="http" bindingInformation="*:80:Foo.localtest.me " />

Restart IIS Express and relaunch the website. Test the above setting made by opening in the browser Foo.localtest.me. It should open the web application created.

IIS (7.0) upwards

Host you application in IIS
Open up IIS Manager locate your web application under the Sites list and select "Bindings" from the action menu on the right. Add a binding for your chosen hostname (e.g. Foo.localtest.me ).

Run the site to see it in action

Make sure you are running VS as an admin for this to work
Now launch the application either hosted in IIS Express or IIS
Browse to the test domain Foo.localtest.me
Navigate to Login page and login using Microsoft Live credentials. Login should be successful

Hope you have fun while integrating Microsoft Account into your applications

Integrate OpenAuth/OpenID with your existing ASP.NET application using Universal Providers

pranav rastogi — Wed, 12 Sep 2012 08:48:00 GMT

Over the past couple of weeks I have come across lots of questions/discussions on while OAuth/OpenId is cool as a feature in the ASP.NET templates in Visual Studio 2012, but how do I easily integrate this into my application outside of the templates. More so how do I extend the Universal Providers to integrate OAuth/OpenId and use other functionality such as roles etc. I am going to cover these two areas in this post using WebForms but you could integrate the same with MVC applications as well

Update

While the post is titled to show how you can integrate this with UniversalProviders, you can totally integrate this with SqlMembership or with your custom membership providers since Microsoft.AspNet.Membership.OpenAuth uses Membership APIs for creating users and login

I posted the following webforms project template which uses sqlmembership

https://github.com/rustd/AspNetSocialLoginSqlMembership

Following are the steps of integrating OpenAuth/OpenId into your existing application

I started with an empty 4.5 webapplication(yes nothing in my project except a web.config)
Use Nuget to get the following packages

DotNetOpenAuth.AspNet

This package is the core package for OAuth/OpenID protocol communication

Microsoft.AspNet.Providers.Core

This package brings in Universal Providers

Microsoft.AspNet.Providers.LocalDb

This package sets the connectionstring for the Universal Providers

Microsoft.AspNet.Membership.OpenAuth

This package provides the extension to integrate OAuth/OpenID with Universal Providers

Change web.config to use formsauthentication

<authentication mode="Forms">

     <forms loginUrl="Default.aspx"></forms>

</authentication>

In App_Start Register the list of OAuth/OpenId providers you want to use. By convention any application_start registration is done in a folder called App_Start

// See http://go.microsoft.com/fwlink/?LinkId=252803 for details on setting up this ASP.NET

            // application to support logging in via external services.

            //OpenAuth.AuthenticationClients.AddTwitter(

            // consumerKey: "your Twitter consumer key",

            // consumerSecret: "your Twitter consumer secret");

            //OpenAuth.AuthenticationClients.AddFacebook(

            // appId: "your Facebook app id",

            // appSecret: "your Facebook app secret");

            //OpenAuth.AuthenticationClients.AddMicrosoft(

            // clientId: "your Microsoft account client id",

            // clientSecret: "your Microsoft account client secret");

            OpenAuth.AuthenticationClients.AddGoogle();

Create a page to display the list of providers to use for logging in(This page reads the list configured in App_Start) In my sample I created Default.aspx.

Markup

<asp:ListView runat="server" ID="providerDetails" ItemType="Microsoft.AspNet.Membership.OpenAuth.ProviderDetails"

             SelectMethod="GetProviderNames" ViewStateMode="Disabled">

             <ItemTemplate>

                 <button type="submit" name="provider" value="<%#: Item.ProviderName %>"

                     title="Log in using your <%#: Item.ProviderDisplayName %> account.">

                     <%#: Item.ProviderDisplayName %>

                 </button>

             </ItemTemplate>

             <EmptyDataTemplate>

                 <p>There are no external authentication services configured. </p>

             </EmptyDataTemplate>

         </asp:ListView>

Code

public IEnumerable<ProviderDetails> GetProviderNames()

     {

         return OpenAuth.AuthenticationClients.GetAll();

     }

At this stage the UI will look as follows

Request a call to the OpenID/OAuth provider for RequestAuthentication. This code will make an outbound call to the provider where a user can enter the login details and the provider will call back to the app’s return url

public string ReturnUrl { get; set; }

        protected void Page_Load(object sender, EventArgs e)

        {

            if (IsPostBack)

            {

                var provider = Request.Form["provider"];

                if (provider == null)

                {

                    return;

                }

                var redirectUrl = "~/ExternalLoginLandingPage.aspx";

                if (!String.IsNullOrEmpty(ReturnUrl))

                {

                    var resolvedReturnUrl = ResolveUrl(ReturnUrl);

                    redirectUrl += "?ReturnUrl=" + HttpUtility.UrlEncode(resolvedReturnUrl);

                }

                OpenAuth.RequestAuthentication(provider, redirectUrl);

            }

        }

At this stage the UI will look as follows

Now when the provider calls back to the app, we have to check whether the user was authenticated without any errors and if so then login the user. In my sample user I configured the returnurl to be ExternalLoginLandingPage.aspx so create a page called ExternalLoginLandingPage in the root of your app. This page serves the following functions(For brevity, I am pasting in relevant methods/markup here. This entire sample is posted on my github repository https://github.com/rustd/SocialLoginASPNET)

Display the authenticated username from the provider and verify if the authentication from provider succeeded or not(eg. did you enter correct username/password)

ProcessProviderResult() in page_load does this processing

You can set the local username of the user if you want to and create the membership user and associate the OAuth/OpenID and save this to the database

//Markup and refer to codebeind methods

<ol>

               <li class="email">

                   <asp:Label ID="Label1" runat="server" AssociatedControlID="userName">User name</asp:Label>

                   <asp:TextBox runat="server" ID="userName" />

                   <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="userName"

                       Display="Dynamic" ErrorMessage="User name is required" ValidationGroup="NewUser" />                    

                   <asp:ModelErrorMessage ID="ModelErrorMessage2" runat="server" ModelStateKey="UserName" CssClass="field-validation-error" />                    

               </li>

           </ol>

           <asp:Button ID="Button1" runat="server" Text="Log in" ValidationGroup="NewUser" OnClick="logIn_Click" />

           <asp:Button ID="Button2" runat="server" Text="Cancel" CausesValidation="false" OnClick="cancel_Click" />

At this stage the UI will look as follows

Database structure

Once the membership user is saved to the database, the database will have the following tables

All tables would seem familiar as they are used by Universal Providers for membership, roles, profile. The 2 new tables were created by Microsoft.AspNet.Membership.OpenAuth to integrate OAuth/OpenId information with membership system.

UsersOpenAuthAccounts: This holds the information on what providers can the user login by.eg if your app is configured to use Facebook, Google then the user can login via either of them and this information will be stored here

UsersOpenAuthData: This table integrates the OAuth/Openid login to the membership system.

Following image shows how OAuth/OpenId login information is wired to membership system.

The membershipusername is the username in the Users table.At this stage since you have the users table populated you can create roles and add/remove these users from roles and thus achieve OAuth/OpenId integration with Roles as well

This entire sample is posted on my github repository(https://github.com/rustd/SocialLoginASPNET)

Feel free to download it and give it a try

What the default templates demonstrate more than this

To view the default templates incase you do not have VS 2012, you can browse them at the following github repro https://github.com/rustd/ASPNETTemplates

How to protect against XSRF attacks
Associate a local username/password with OAuth/OpenID account
Register with more than one OpenID/OAuth provider

I hope this would help in integration OAuth/OpenId easily into your application when you are not starting with the templates

Customizing the login UI when using OAuth/OpenID

pranav rastogi — Fri, 24 Aug 2012 23:14:00 GMT

Update 1/11/2013: Fixing the code for webforms

In the last post I showed how you can plug in your own OAuth/OpenID provider. This post shows you how you can pass in extra data about the provider such as display name, image etc and use this information when building up the UI for login screen

If you see the experience of login screen in the ASP.NET templates, it looks like this.

Let’s see how can we customize this UI to look like the following

Web Forms

Pass in extra data in App_Start\AuthConfig.cs when registering the provider as follows

OpenAuth.AuthenticationClients.AddFacebook(

                appId: "your Facebook app id",

                appSecret: "your Facebook app secret",

extraData: new { Icon = "~/Images/facebook.png" }

);

Access this data in the View(in the WebForms Internet template case it is Account\OpenAuthProviders.ascx

<img src="<%# Item.ExtraData["Icon"] %>" alt="Alternate Text" />

MVC

Pass in extra data in App_Start\AuthConfig.cs when registering the provider as follows

Dictionary<string, object> FacebooksocialData = new Dictionary<string, object>();

            FacebooksocialData.Add("Icon", "~/Images/facebook.png");

            OAuthWebSecurity.RegisterFacebookClient(

                appId: "someid",

                appSecret: "somesecret",

                displayName: "Facebook",

                extraData: FacebooksocialData);

Access this data in the View(in the MVC Internet template case it is Views\Account\_ExternalLoginsListPartial

 @foreach (AuthenticationClientData p in Model)

            <img src="@p.ExtraData["Icon"]" alt="Icon for @p.DisplayName" />

WebPages

In _AppStart.cshtml

Dictionary<string, object> FacebooksocialData = new Dictionary<string, object>();

            FacebooksocialData.Add("Icon", "~/Images/facebook.png");

            OAuthWebSecurity.RegisterFacebookClient(

                appId: "empty",

                appSecret: "empty",

                displayName: "Facebook",

                extraData: FacebooksocialData);

Access this data in the View(in the webpages template case it is Account\_ExternalLoginsListPartial

 @foreach (AuthenticationClientData p in Model)

            <img src="@p.ExtraData["Icon"]" alt="Icon for @p.DisplayName" />

Plugging custom OAuth/OpenID providers

pranav rastogi — Thu, 23 Aug 2012 15:25:53 GMT

In the previous post, I wrote about how you can use the existing providers for Google, Facebook etc. and retrieve extra metadata about the authenticated users. Let’s assume you wanted to change the way the providers request for information. Some examples of this could be

You want to request more data about the user
You want to apply different scope levels when requesting the data

This post covers how you can write your own provider and plug it into your ASP.NET web application

Write your own provider

Each Provider implements from OpenIdClient. Following example shows a custom implementation of Google Provider which requests information about the user such as firstname/lastname etc

Please Note: This addresses a bug with the existing google provider which does not return the extra data about the user such as Country/FirstName/LastName. The version of google provider is DotNetOpenAuth.AspNet" version="4.0.3.12153". We have logged a bug for this and will fix it in next update of this package.

namespace MyApplication

    using System.Collections.Generic;

    using DotNetOpenAuth.OpenId.Extensions.AttributeExchange;

    using DotNetOpenAuth.OpenId.RelyingParty;

    /// <summary>

    /// Represents Google OpenID client.

    /// </summary>

    public class GoogleCustomClient : OpenIdClient

        #region Constructors and Destructors

        public GoogleCustomClient()

            : base("google", WellKnownProviders.Google) { }

        #endregion

        #region Methods

        /// <summary>

        /// Gets the extra data obtained from the response message when authentication is successful.

        /// </summary>

        /// <param name="response">

        /// The response message.

        /// </param>

        /// <returns>A dictionary of profile data; or null if no data is available.</returns>

        protected override Dictionary<string, string> GetExtraData(IAuthenticationResponse response)

            FetchResponse fetchResponse = response.GetExtension<FetchResponse>();

            if (fetchResponse != null)

                var extraData = new Dictionary<string, string>();

                extraData.Add("email", fetchResponse.GetAttributeValue(WellKnownAttributes.Contact.Email));

                extraData.Add("country", fetchResponse.GetAttributeValue(WellKnownAttributes.Contact.HomeAddress.Country));

                extraData.Add("firstName", fetchResponse.GetAttributeValue(WellKnownAttributes.Name.First));

                extraData.Add("lastName", fetchResponse.GetAttributeValue(WellKnownAttributes.Name.Last));

                return extraData;

            return null;

        /// <summary>

        /// Called just before the authentication request is sent to service provider.

        /// </summary>

        /// <param name="request">

        /// The request.

        /// </param>

        protected override void OnBeforeSendingAuthenticationRequest(IAuthenticationRequest request)

            // Attribute Exchange extensions

            var fetchRequest = new FetchRequest();

            fetchRequest.Attributes.AddRequired(WellKnownAttributes.Contact.Email);

            fetchRequest.Attributes.AddRequired(WellKnownAttributes.Contact.HomeAddress.Country);

            fetchRequest.Attributes.AddRequired(WellKnownAttributes.Name.First);

            fetchRequest.Attributes.AddRequired(WellKnownAttributes.Name.Last);

            request.AddExtension(fetchRequest);

        #endregion

Source Code for existing providers

The source code for existing providers is public and can be accessed at https://github.com/AArnott/dotnetopenid/tree/master/src/DotNetOpenAuth.AspNet/Clients

Register your provider with your application

WebForms

In App_Start/AuthConfig.cs register the custom provider as follows

OpenAuth.AuthenticationClients.Add("Custom Google", () => new MyApplication.GoogleCustomClient());

//OpenAuth.AuthenticationClients.AddGoogle();

MVC

In App_Start/AuthConfig.cs register the custom provider as follows

 OAuthWebSecurity.RegisterClient(new MyApplication.GoogleCustomClient(),"Google",null);

           // OAuthWebSecurity.RegisterGoogleClient();

WebPages

In _AppStart.cshtml register the custom provider as follows

 OAuthWebSecurity.RegisterClient(new MyApplication.GoogleCustomClient(),"Google",null);

           // OAuthWebSecurity.RegisterGoogleClient();

Extra Information from OAuth/OpenId Provider

pranav rastogi — Wed, 22 Aug 2012 19:11:00 GMT

When you authenticate a user using the OAuth/OpenId providers, you can request for some extra information about the user if you have granted access for these providers to send this information.

For eg if you login using Facebook, you can request information such as Gender, country etc.

Each provider has different set of data that you can retrieve. I am not going to into the details of these different sets of data. In this post I am going to cover what kind of information can you retrieve from the implementations of the providers that we shipped with templates in VS2012 and how can you retrieve this information.

What kind of information can you retrieve

Google

email
firstname
lastname
country

https://developers.google.com/accounts/docs/OpenID is a good place to look for more information

Facebook

id
Name
link
gender
accesstoken

http://developers.facebook.com/docs/ is a good place to look for more information

Twitter

name
location
description
url
accesstoken

https://dev.twitter.com/docs/auth/oauth/faq is a good place to look for more information

How to retrieve this information

This data is available when you login using anyone of the providers. In specifics to the code you can access this data after the authentication has happened. The data is returned as a dictionary. Following image shows a snapshot of the data returned from facebook provider

Web Forms

Create the ASP.NET WebForm template
Goto Account\RegisterExternalLogin.cs
In the AuthenticationResult type we have Extradata dictionary bag which has this data

var authResult = OpenAuth.VerifyAuthentication(redirectUrl);

MVC

Create the internet template in MVC4
Goto the account controller in ExternalLoginCallBack
In the AuthenticationResult type we have Extradata dictionary bag which has this data

 AuthenticationResult result =

                OAuthWebSecurity.VerifyAuthentication(Url.Action("ExternalLoginCallback", new { ReturnUrl = returnUrl }));

Web Pages

Create the webpages2 template
Goto ExternalLoginCallBack
In the AuthenticationResult type we have Extradata dictionary bag which has this data

 AuthenticationResult result =

                OAuthWebSecurity.VerifyAuthentication(Url.Action("ExternalLoginCallback", new { ReturnUrl = returnUrl }));

In the following posts I will be spending more time showing you how you can customize our OAuth/OpenId stack and how you can customize and plugin your own providers

Releasing Microsoft ASP.NET Universal Providers Core 1.2

pranav rastogi — Tue, 21 Aug 2012 00:15:12 GMT

I hope everyone has been busy downloading Visual Studio 2012 and have started building awesome web applications. We have been busy too during this time.

We have just released an update to the version of Universal Providers that shipped with VS2012. Following are the key changes with this release

Address key performance issues with the providers
Depends on EntityFramework Code First

What should you do

This version of Universal Providers Core that shipped with VS2012 was 1.1. Take a moment and update to 1.2

You can follow this documentation on how to update a nuget package.

While updating you will get the EntityFramework 5.0.0 package as well from the nuget.org

Some common FAQ

Works on .NET v4.0/4.5
Works on VS2010/VS2012
1.2 is compatible with 1.1

Please do reach out to us on the following forum channels for any questions on universal providers

ASP.NET forums http://forums.asp.net/25.aspx/1?Security
Stack Overflow: Use the tag “membership” Following are some questions for universal providers on SO http://stackoverflow.com/search?q=universal+providers

All the best building awesome applications.

ASP.NET v4.5 WebForms /VS11 @TechEd 2012 India

pranav rastogi — Sat, 24 Mar 2012 08:41:00 GMT

I gave talk around the new features comin\g up in ASP.NET v4.5/VS11 at Teched. The demo site/slides can be downloaded here . The slide deck is embedded below

Webforms_TechEd

View more presentations from rustd.

Update

Videos are now available on the tech ed site http://india.msteched.com/#agenda/agenda

Goto Day 3 to download the videos

ASP.NET Standards & Performance talk @TechEd India 2012

pranav rastogi — Sat, 24 Mar 2012 08:40:00 GMT

I gave talk around some of the work the ASP.NET team is doing around standards support and improving performance in IIS8. The demo site/slides can be downloaded here . The slide deck is embedded below

Webstandards_TechEdIndia

View more PowerPoint from rustd

Update

Videos are now available on the tech ed site http://india.msteched.com/#agenda/agenda

Goto Day 3 to download the videos

How to determine version of Local Sql Instance and your database

pranav rastogi — Mon, 20 Feb 2012 23:53:00 GMT

If you have seen this error you must have broken your head on figuring out what happened. Which sql product version does 655 maps to.? How do I know what sql version am I running

The database 'C:\USERS\Foo\APP_DATA\ASPNETDB.MDF' cannot be opened because it is version 655. This server supports version 612 and earlier. A downgrade path is not supported.

Could not open new database 'C:\USERS\Foo\APP_DATA\ASPNETDB.MDF'. CREATE DATABASE is aborted.

An attempt to attach an auto-named database for file C:\Users\Foo\App_Data\aspnetdb.mdf failed. A database with the same name exists, or specified file cannot be opened, or it is located on UNC share.

How do I figure out what was the sql vesion I created my mdf file in. How do I figure out what will be the mdf file version which will be created by the current sql product version.

Following table lists the sql product version and the file version of the mdf file they correspond to.

Sql	MDF File version	Product version
Sql7	515
Sql2000	539
Sql2005sp1	611
Sql2005sp2	612
Sql2008sp1(dev10sp1)	655
sql2008sp2
Sql2008sp3
Sql2008r2	661
Sql2012(RC0)	705	Microsoft SQL Server 2012 RC0 - 11.0.1750.32
Sql2012(RC1/RTM)	706	Microsoft SQL Server 2012 RC0 - 11.0.1913.38

How to get the file version of an mdf file without connecting via sql

Note: These methods do not upgrade your database

TSQL

In VS Connect to a sql instance(".\SQLEXPRESS" or "(localdb)\v11.0") as follows

T-SQL(Check the file version which will be generated by your sql instance)

Note that this is a T-SQL command, so it needs to be run on a SQL connection to an instance with at least read access to the MDF. The database does not need to be attached to the instance.

The following command will return the version of master. If this version of your mdf file is higher than the version of the primary MDF being checked (as here), the database will be upgraded when attached:

select DATABASEPROPERTYEX('master', 'version')

698

(1 row(s) affected)

T-SQL(Check the file version of your mdf)

This method does not require you to attach the MDF to the instance (so your mdf file is not upgraded).

dbcc checkprimaryfile ('c:\MyApp\AppData\foo.mdf', 2)

property value

-------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Database name foo

Database version 695

Collation 872468488

(3 row(s) affected)

DBCC execution completed. If DBCC printed error messages, contact your system administrator.

Without using TSQL

Disclaimer: I found this of this person blog. While this works for the most part, this method depends upon internals of mdf file format which are not guaranteed to work the same way and can change in the future

http://rusanu.com/2011/04/04/how-to-determine-the-database-version-of-an-mdf-file/

PS > get-content -Encoding Byte "foo.mdf" | select-object -skip 0x12064 -first 2
149
2
PS > 2*256+149
661

Thus by doing any one of the above you can figure out what is the version of the mdf file that you have and what is the sql product version it corresponds to. :)

My Talk @VS Live 2011 - ASP.NET and VS11

pranav rastogi — Wed, 19 Oct 2011 07:34:00 GMT

I gave a talk today about the new features coming in ASP.NET and Visual Studio11. Please find the sample project that I used in my application. This application will only work on .NET Fx v4.5

Improve Performance of your website

pranav rastogi — Sat, 30 Jul 2011 17:28:00 GMT

I recently went to a talk about how to improve performance of your website. In this post I am going to share out the lessons I learnt while applying some of the best practices to my personal photo view application. The high level points I will be mentioning are not tied to web programing languages such as php, asp.net etc but more around javacript/css optimizations for the browser. In the end I will highlight some tools that I used for this exercise

Functions of the Browser

When you make a request to the webpage in the browser following is what happens

Requests are made to download the webpage/ JS files/ CSS files/ images
DOM for the page is constructed as follows

CSS parser parses the css
Javscript parser parses the javascript code
html parser parses the html

javascript execution happens and changes to the DOM are made
Formatting of the DOM by applying styles
Layout of the page is created with different blocks
page is rendered in the browser and the user sees the result

Quite a lot of activities happening right? Lets build on this overall flow and see how can we optimize our site’s performance for each step

Network Requests

No redirection calls. Try to change the code so that it goes to the correct location. redirection means you are making 2 requests as compared to 1 so it will take more time for the user to get the response
Avoid meta refresh to refresh content on the page or redirect to a different page after 5 sec(say you are showing an add). This approach is also not SEO optimized
Use CDN Use the servers closet to you to serve the content so it takes less time to download the content
ReuseConnection Do not send response with Connection:close header -not efficient for the same request as the connection needs to be recreated useConnection: Keep-Alive

Minimize Bytes Downloaded

Use Compression
Use Caching of the content where applicable
Cache data requests in browser cache(eg jquery json result)
Standard File Capitalization :Icon.png, icon.png are treated as separate downloaded file. make sure you are checking for this while coding

Efficiently Structure markup

This is critical to make sure the browser does the parsing of html, javasccript and css efficiently

Use html5 doctype. Use the latest ie standards mode
Use httpheader to specify mode. Not metatag since at that time ie will use the ie9 by default. Need to do a bunch of resetting . IE uses httpheader to see which parser to use for the page

Bad <meta http-equiv="X-UA-Compatible" content="IE-9" >
Good: x-UA-Compatible:IE-9

Link css at the top of page so they downloaded in order

Do Not use @import in css files

Legacy browser do a sync block to download this and then build the css

Avoid embedded inline styles/js

This causes context switching b/w html and css/js parser reducing performance

No js in head since the browser does a sync block to execute js since js can manipulate the page. If you have to

Defer loading: <script src="script.js" type="text/javascript" defer="defer"></script>
Async tag in html5 : <script async src="slow.js"></script>

Include js in the end

Optimize Media Usage

Use Image Sprites

# network connections used to download are less
Size of the content being downloaded is less

Image Formats

Png- for the most common cases/jpeg for photo/jpeg-xr(photo high res)
Decoding algo is factor to consider which algo to use

Use native image resolutions

Get an image 500x500 and do not resize in the image tag as shown <img h=50 w=50 />

Replace single pixel img/border radius with css3 gradient since decoding of the image take time
Use datauril for small image

no network request needed to download the image
eg. following code displays the windows folder icon on the webpage
<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH
5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0Ccg
uWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" width="16" height="14"
alt="embedded folder icon">

Write Fast JS

Do Minification of JS/CSS3
Minimize dom interactions

Do not query the dom directly in javascript. cache the DOM and use the cached DOM

Tools that I used

Firebug http://getfirebug.com/
Yslow http://developer.yahoo.com/yslow/
Httpwatch http://www.httpwatch.com/
Chrome timeline view http://code.google.com/chrome/devtools/docs/timeline.html

Good for layout rendering issues

Dynatrace ajax edition http://ajax.dynatrace.com/ajax/en/

Evaluate user interaction - record actions - get more information on bottlenecks

Browser Developer Tools. eg. in IE you can do F12 and inspect the DOM, debu your scripts

Hopefully you find this useful…

Cheers!!!!!

IDN and punycode support in IIS

pranav rastogi — Thu, 18 Nov 2010 09:45:29 GMT

Over the past few days I have working with investigating IDN and punycode and have come across some common questions around the scenario that we are trying to enable. So in this post I am trying to explain these terms and what do application developers care about.

What is IDN?

IDN stands for Internationalized Doman Name. These domain contain non ASCII chars. egs of such domain names are “café”,”bücher” etc.
For more details on the history of IDN and its formation please refer to the following wikipedia article.http://en.wikipedia.org/wiki/Internationalized_domain_name

What is punycode?

Punycode is an encoding syntax to convert the IDN to an ASCII representation. The way the conversion works is if the domain name has non ascii characters then the coverter starts the encoded string with “xn—“, copies all the ascii characters and adds a “-“ followed by the encoded value of all the non ASCII characters. For more details on the algorithm please refer to http://tools.ietf.org/html/rfc3492

Why do we care about these?

Imagine a scenario where you built your website in Brazil and called it “www.café.br”. For your website to be discovered on the internet it has to be registered with a DNS system. DNS systems have a limitation where non ASCII characters are not allowed as host name. So the DNS system will store the punycode representation of the host. eg. the punycode representation for the above name is “www.xn--caf-dma.br”

How does it all work?

When you build a site with a host name that has non ASCII characters eg. “www.café.br”, you will register the site with a DNS. The DNS entry will be something like “<IP address > www.xn--caf-dma.br”

A user would make the request to the site by typing in “www.café.br”. The browser would convert this url to its punycode representation and make a request with “www.xn--caf-dma.br” to the server.

Enabling IDN and punycode support on your IIS server

These steps are based off on Win Server 2008 R2 with IIS enabled

Open inetmgr
Remove the default binding
Add a binding to café.br on port 80
Open %windir%\system32\drivers\etc\hosts and enter the punycode representation of the servername. Add the following to the file
- 127.0.0.1 xn--caf-dma.br
Turn off any proxy settings so the request goes against the local DNS only.
Make a request to http://café.br and http://xn--caf-dma.br and you should see the default page

Hopefully this would help understand the end to end scenarios around IDN and punycode and what it means for an application developer.

Resources:

http://charset.org/punycode.php

http://demo.icu-project.org/icu-bin/idnbrowser

Configuring Windows Server Core for ASP.NET

pranav rastogi — Wed, 17 Nov 2010 06:01:00 GMT

I was recently working on Windows ServerCore and had to dig around for setting up the server for running ASP.NET and also do mundane tasks around adding applications to IIS and configuring the app pools.

Following is a list of commands for anyone working on ServerCore. These commands cover the basic tasks anyone has to deal with while configuring the server for AspNet scenarios.

Machine Settings

Network configuration

netdom renamecomputer %computername% /newname:{newComputerName}

netdom join %computername% /d:{domainName} /ud:{domain\Username} /pd:*

Net localgroup Administrators :{domain\Username} /add

Allow Remote Management in the Firewall and enable Remote Administration . . . . . .

netsh advfirewall set allprofiles settings remotemanagement enable

Restart

Shutdown /r

shutdown /r /t 0

Eventvwr.

There is non on Windows server core so you use the following tool wevtutil.exe

wevtutil.exe qe System /rd:true /c:3 /f:text

wevtutil.exe qe Application /rd:true /c:3 /f:text

Install IIS and set remote management

http://learn.iis.net/page.aspx/334/install-and-configure-iis-7-on-server-core/

Dism /online /enable-feature /featurename: IIS-ManagementService

reg add HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WebManagement\Server /v EnableRemoteManagement /t REG_DWORD /d 1

Configuring ASP.NET applications and application pools

Applications

"appcmd list app" will list the applications

"appcmd add app /site.name:"Default Web Site" /physicalpath:"C:\test\Foo" /path:/Foo"

"appcmd set app "Default Web Site" /?" To list all the properties supported by the website

"appcmd set app "Default Web Site/Foo" /?" To list all the properties supported by the app

"appcmd set app "Default Web Site/Foo" /applicationPool:[AppPoolName]" to set the app pool that you want this app to run on. By default it is defaultapppool

AppPools

"appcmd list apppools" will list the app pools along with Fx version and pipeline modes

"appcmd set apppool "DefaultAppPool" /?" To list all the properties supported

"appcmd set apppool "DefaultAppPool" /enable32BitAppOnWin64:[true|false]"

"appcmd set apppool "DefaultAppPool" /managedPipelineMode:[Integrated|Classic]"

"appcmd set apppool "DefaultAppPool" /managedRuntimeVersion:[v2.0|v4.0]"

Accessing ASP.NET features like Session State Service and PerfCounters

AspNet State Service

Query

Sc query type= service state= all

Sc qc aspnet_state

Start

Sc start aspnet_state

Pause

Sc pause aspnet_state

Resume

Sc continue aspnet_state

Stop

Sc stop aspnet_state

PerfCounters

Use typeperf.exe(http://technet.microsoft.com/en-us/library/cc753182(WS.10).aspx)

Listallcounters

typeperf.exe -q "ASP.NET v4.0.30319"

Sample output

\ASP.NET v4.0.30319\Application Restarts

\ASP.NET v4.0.30319\Applications Running

\ASP.NET v4.0.30319\Requests Disconnected

Verify the perfcounter count

typeperf.exe "\ASP.NET Applications v4.0.30319(*)\Requests Total" -sc 2

Resources:

http://technet.microsoft.com/en-us/magazine/2009.02.geekofalltrades.aspx?pr=blog

Primer on server core commands http://technet.microsoft.com/en-us/library/ee441258(WS.10).aspx

http://technet.microsoft.com/en-us/magazine/dd630943.aspx

http://code.msdn.microsoft.com/R2CoreASPNET

http://learn.iis.net/page.aspx/114/getting-started-with-appcmdexe/

Enable automatic updates and force an update . . . . . .

Scregedit.wsf /au 4

start /w net stop Wuauserv

net start Wuauserv

wuauclt /detectnow

Kill a process

taskkill /PID <process ID>

From Razor Helpers to MVC via NuGet

pranav rastogi — Wed, 03 Nov 2010 10:10:10 GMT

Over the last few days, I have been working on a sample which shows how you can build your custom library of helpers using the Razor syntax and use NuGet to distribute this library as a package so that MVC or WebMatrix application developers can use this package of helpers. This is a great way of writing resuable helpers for most of the common tasks that developers would be doing and using NuGet distribution channel to reach out to all the developers.

To start off, you can write the Razor helpers in the Editor of your choice(VS / WebMatrix). You can then write a console application that parses all these helper files and generates a binary out of it. The following code snippet shows you how you can compile a number of helper files into a binary. This program takes in

a folder path where all helper files are located and generates a dll(RazorToMVCViaNuGet) in the same location.

        1: static void Main(string[] args)

       2: {

       3:     //Input: path to the folder where the helper files are

       4:     if (args.Count<string>() <= 0)

       5:     {

       6:         Console.WriteLine("please input the helper folder location");

       7:         return;

       8:     }

       9:     //folder where all helpers are stored

    string helperLocation = args[0].ToString();

    string helperdllName = "RazorToMVCViaNuGet.dll";

    string RazorInstallLocation = System.Environment.Is64BitOperatingSystem ? System.Environment.GetEnvironmentVariable("ProgramFiles(x86)") : System.Environment.GetEnvironmentVariable("ProgramFiles");

    string RazorBinaryLocation =RazorInstallLocation + @"\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\Assemblies";

    string[] compiledcode = new string[100];

    int counter = 0;

    //get the directory information for the helper filers

    DirectoryInfo dir = new DirectoryInfo(helperLocation);

    foreach (FileInfo file in dir.GetFiles())

    {

        if (file.Extension.Equals(".cshtml"))

        {

            //instantiate razor engine

            StreamReader input = new StreamReader(file.FullName);

            WebCodeRazorHost host = new WebCodeRazorHost(file.FullName);

            RazorTemplateEngine engine = new RazorTemplateEngine(host);

  

            //parse the helper file and generate the CCU

            GeneratorResults results = engine.GenerateCode(input);

            CodeCompileUnit ccu = results.GeneratedCode;

            CodeDomProvider codeProvider = (CodeDomProvider)Activator.CreateInstance(host.CodeLanguage.CodeDomProviderType);

            StringBuilder output = new StringBuilder();

            using (StringWriter writer = new StringWriter(output))

            {

                codeProvider.GenerateCodeFromCompileUnit(ccu, writer, new CodeGeneratorOptions());

            }

            compiledcode[counter] = output.ToString();

            counter++;

        }

        else

            continue;

    }

  

    //Generate a helper dll

    CSharpCodeProvider provider = new CSharpCodeProvider();

    // Build the parameters for source compilation.

    CompilerParameters cp = new CompilerParameters();

    // Add assembly reference to comile the dll

    cp.ReferencedAssemblies.Add("System.dll");

    cp.ReferencedAssemblies.Add("System.Web.dll");

    cp.ReferencedAssemblies.Add("System.Security.dll");

    cp.ReferencedAssemblies.Add("System.Core.dll");

    cp.ReferencedAssemblies.Add(RazorBinaryLocation + "\\System.Web.WebPages.dll");

    cp.ReferencedAssemblies.Add(RazorBinaryLocation + "\\WebMatrix.Data.dll");

    //Generate Class Library

    cp.OutputAssembly = helperLocation + "\\" + helperdllName;

    cp.GenerateExecutable = false;

    // Save the assembly as a physical file.

    cp.GenerateInMemory = false;

    // Invoke compilation.             

    CompilerResults cr = provider.CompileAssemblyFromSource(cp, compiledcode);

    if (cr.Errors.Count > 0)

    {

        // Display compilation errors.

        Console.WriteLine("Errors building");

        foreach (CompilerError ce in cr.Errors)

        {

            Console.WriteLine("  {0}", ce.ToString());

            Console.WriteLine();

        }

    }

    else

    {

        Console.WriteLine("Source success");

    }

}

For eg. the following picture shows the folder with the helper files, their content and the generated library. As you see in the picture the RazorToMVCViaNuGet.dll contains the compiled code the Razor Helpers.

At this point we have a binary which has all the helpers. In the next steps I will show you how to create a Nuget package for this RazorToMVCViaNuGet.dll and add it to the package feeds. Before I go any further you can get more information about installing Nuget and creating packages from Nuget Codeplex site. Make sure you download Nupack.exe along with downloading NuGet. This exe does not come with the Nuget download and has to be downloaded separately from the same place as Nuget

Now that you have NuGet and Nupack.exe, let’s create our package now.

1. Create a folder called Demohelperpackage

2. Create a .nuspec file based on the Nuspec format for a package. I created the following file DemoHelper.nuspec

       1: <?xml version="1.0"?>

       2: <package xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">

       3:  <metadata xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">

       4:    <id>RazorToMVCViaNuGet</id>

       5:    <version>1.1</version>

       6:    <authors>pranavra</authors>

       7:    <requireLicenseAcceptance>false</requireLicenseAcceptance>

       8:    <description>Demo of how you can distribute razor helper using nuget</description>

       9:    <summary>Razor helper to MVC via NuGet</summary>

      10:  </metadata>

      11: </package>

3. Create a folder called lib under Demohelperpackage and copy RazorToMVCViaNuGet.dll to this location

4. copy nupack.exe to Demohelperpackage and run “NuPack.exe pack DemoHelper.nuspec” to generate the package

5. You would see the a RazorToMVCViaNuGet.1.1.nupkgnupkg file created in the same folder

Now that we have our package, we can test it out by having NuGet talk to a local feed rather than having NuGet talk to the official feed. You can refer how to do this from this page "Hosting Your Own Local and Remote NuPack Feeds"

Once you have this setup you can use the Package Manager Console to list and install the package that you had just created.

Create an ASP.NET MVC3 WebApplication to use this package in your project. Open the package manager console window.

To see the list of packages you can do list-package which would list out your package.

You can install the package using “Install-Package RazorToMVCViaNuGet” which would add the RazorToMVCViaNuGet.dll to your project

Once the package is installed a reference to RazorToMVCViaNuGet is added in your project

You can now use the helpers in RazorToMVCViaNuGet .dll in your views.Notice there is no namespace needed for the helpers.

When you run the application then Wola!!!! you would see that you were able to distribute and use your helpers :)

This shows how easy it is to compile your own library of Razor helpers which you can distribute using NuGet to MVC/WebMatrix developers

Future Improvements

1. The sample only works for .cshtml file and can be extended for .vbhtml files as well

2. Nuspec for this helper can be extended to have a dependency on Microsoft.AspNet.WebPages to be installed.

ASP.net assembly loading from GAC or Bin

pranav rastogi — Mon, 18 Oct 2010 06:37:09 GMT

For quite a while I have been going back and forth reading msdn documentations to figure out how does an assembly gets loaded at runtime. When an assembly is in the bin of your application and also in the GAC, what gets loaded at runtime, GAC or bin? This post is a quick reference guide so that I come back to it and get the short answer rather than parse through the msdn documentation each time.

What is the answer?

The Runtime first looks in the GAC and then in the probing path of the application which includes the bin to load an assembly.

What does this imply?

If you have 2 assemblies with the same version, one in GAC and other in bin, the assembly in GAC is loaded
If you have 2 assemblies with different versions, one in GAC and other in bin, and the version to load is not specified in the config, then GAC is loaded
If you have 2 assemblies with different versions, one in GAC and other in bin, and the version to load is specified in the config, then the specified version of the assembly is loaded either from GAC or bin, wherever the runtime finds it first.

Reference:

How the Runtime Locates Assemblies

Tools:

Fuslogvw.exe (Assembly Binding Log Viewer)

A close look at the Razor Parse Tree

pranav rastogi — Mon, 11 Oct 2010 09:13:49 GMT

This is a part of the series where we take a deep dive into the inner workings and extensibility of the Razor parser. In this post we are going to take a detailed look at the parse tree that is generated

To learn more about the workings of parser please see the post by Andrew

In Razor parser the document starts in markup mode(MarkupBlock). Depending on what comes next the parser switches between markup and code mode. This post takes you through the different kinds of markup/code switches that can happen. There is a tool that you can download which generates a parse tree based on Razor syntax input. The tool works for both C# and VB

So lets dive into the building blocks.

At a high level the parsed tree comprises of Blocks which signify what type of Block is the parser parsing. Blocks are the non leaf nodes of the parsed tree. Blocks can contain blocks which eventually terminate in Spans

Following is a diagram which shows the high level structure for the Razor Parse Tree

BLOCKS

Blocks can be of the following types

Block Type	Explanation	Example
Markup	This is the type in which the Parser starts parsing the document. It comprises of Html markup text	Hello world
Section	This is the type where the parser parses the @section construct	@section Foo{}
Template	This is the type where the parser parses the inline templates being defined for the WebGrid helpers	`@grid.GetHtml(columns: grid.Columns(` `grid.Column("Description", format:@<i>@item.Description</< CODE>i>)` `)`
Statement	The parser is parsing a Statement block	@{ int x=1; }
Directive	Parser is parsing the top level directives of the page	@using Microsoft.Web.Helpers
Functions	Parser is parsing the functions block in the file	@functions{}
Expression	Parser is parsing any expressions block	@System.DateTime.Now
Helper	Parser is parsing the definition of @helper construct	@helper HelperName(){}
Comment	Parsing is paring the block commenting support for commenting markup and code	@* comments which have markup and code Markup: Hi Code: @{} *@

Blocks contain the following information

BlockType: One of the above kinds

SourceLocation: Location of the char in the file where the block started which is of the following representation (AbsoulteIndex: LineIndex: CharIndex :: Length of Block)

SPANS

Blocks are divided into the following Spans. Think of Spans as the leaf node in the ParseTree.

The Spans contain information around the position of the span(line, col) and the content being parsed. This is useful in the cases of error reporting, syntax highlighting in the editor

SpanKind	Explanation	Example
Transition	This span signifies that the parser parsed the @ character.	@ in @{}
MetaCode	This signifies the char which start and end a block	{} in @{} for Statement block () in @() for Expression
Comment	All content in the Comment Block	foo in @* foo *@ is CommentSpan
Code	This type has all the code under the Statement/Expression block	System.DateTime.Now in @System.DateTime.Now
Markup	This type has the all the markup content in a markup block	<p></p> in “@{} <p></p>”

I hope by now you would have a high level idea about the structure of the parse tree. At this point I have a sample input for razor file and I will walk you through the generated parse tree.

Spans contain the following information

SpanType: One of the above kinds

SourceLocation: Location of the char in the file where the block started which is of the following representation (AbsoulteIndex: LineIndex: CharIndex :: Length of Span)

Content: Content which is parsed as a Span

Sample Input for a Razor C# file

1 + 1 = @(1+1)

GeneratedParseTree

Markup Block at (0:0,0)::16

Markup Span [V;Any] at (0:0,0)::8 - [1 + 1 = ] (Document)
Expression Block at (8:0,8)::6
- Transition Span [V;None] at (8:0,8)::1 - [@]
- MetaCode Span [V;None] at (9:0,9)::1 - [(]
- Code Span [V;Any] at (10:0,10)::3 - [1+1] - [Terminator: <>]
- MetaCode Span [V;None] at (13:0,13)::1 - [)]
Markup Span [V;Any] at (14:0,14)::2 - [\r\n] (Document)

As you know Razor parser starts parsing with MarkupBlock, so in this case the first block is the MarkupBlock. After creating the markup block the parser sees that the next char in markup so it creates a MarkupSpan and puts all the markup content in this span

When the parser sees @, it knows that the next characters have to do with code so it creates an ExpressionBlock. After creating the ExpressionBlock the parser parses the @ as a TransitionSpan which means that we have transitioned from Markup-Code. ExpressionBlock have the following signature @() so the parser parses the ( as MetaCode span. At this point the parser parsers the remaining characters as CodeSpan until it sees the terminator char ) which is parsed as MetaCodeSpan

After the CodeSpan, the ExpressionBlock does not anything else to be parsed and this the parser consumes the newline character as part of the MarkupBlock

ParseTreeViewer

If you found the above description about the ParseTree that gets generated for the Razor syntax, interesting then you should download this tool which lets generates the Parsed Tree for a given Razor syntax.

This tool can be used for debugging your application, though I would say it is an advanced use. If you think that the parser is not parsing the input as expected, then you can use this tool to see the parse tree that gets generated and figure out what is wrong.

Screenshot of the tool

Download

FAQ

1. You need to have Asp.Net WebPages installed on the machine

2. If you select the “View In Browser” option then the tool generates a temp file “test.htm”

Hopefully this would help you understand the structure of the generated parse tree for razor syntax.