Follow Blog via Email

Tag: ASP.Net MVC

In a traditional ASP.NET MVC application, Razor views are compiled by the server the first time they’re requested.

Further calls will result in the same compilation results being served again. These compiled view results are then available until IIS is restarted, the application pool is recycled or the application is shut down.

When that happens and the application is restarted, the next client to request a specific view will bear the compilation cost once more. In a high volume application, the application should be kept online as more requests arrive and compilation will thus happen infrequently.

In certain scenarios, for example when the application is accessed infrequently or when view compilation simply takes to much time, precompilation is a viable solution.

It allows us to precompile the views ahead of time which precludes IIS from needing to compile them at runtime.

You can precompile the views when you are building the application in Visual Studio, on the build server when doing a build or after the application is built but before it is deployed. This last one was possible with Web Forms but I have not investigated this avenue with MVC.

Let’s look at the pros and cons of the first two methods.

Precompiling on the developer’s machine

Pros:

Find potential view errors at compile time rather than runtime (see example below).

Speed up the application for developers by preventing view compilation when debugging.

Allows us to share views between ASP.NET MVC projects in the same solution.

Cons:

Cannot modify views when debugging or when the application is running. It needs to be stopped, compiled and started again for changes to take effect.

Compiled files will appear in merge conflicts. Note that you can simply ignore the conflicts and rebuild to solution to generate the files again.

Generated files will be checked in to source control, polluting the repository. On the plus side this allows other developers to reuse the precompilation results.

Need to install a Visual Studio extension and a NuGet package.

Precompiling on the build server

Pros:

No change in workflow for developers. They can continue modifying views at runtime, they do not need to install any tools.

No precompilation files in source control.

Cons:

Will not find view errors at compile time.

Will not speed up the application on the developer’s machines.

Requires a build server and build process (for those who aren’t using one).

In my last ASP.NET MVC project, I chose the first option for many reasons but primarily because I needed to share views between projects. To do this you need to have the views compiled and then copy the compiled views in a folder in the destination project. This process would require it’s own blog post so I will leave it for a possible future post.

Error example

In our model we have two properties, First and Second. In the previous example an error has been introduced where the property is misspelled Seond. While this error will show up visually with a red squiggly line when you inspect the file, the application will compile just fine but throw an exception when you try to access this view.

When working on a large project with dozens of views, it’s easy to miss these errors.

Activating precompilation in Visual Studio

To activate precompilation you need to install the following NuGet package in each project which will contain precompiled views: RazorGenerator.Mvc.

You also need to install the following extension in Visual Studio: Razor Generator.

Finally you need to change the build tool for the views that need to be precompiled, often case this means all views, by setting the custom tool to RazorGenerator.

Dropzone allows you to easily handle file upload via drag and drop.

Here is a simple tutorial on how to integrate DropzoneJS into an existing ASP.NET MVC application. The instructions on the dropzone page are easy to follow but I include here a version tailored for ASP.NET MVC.

First off, there is a NuGet package but I prefer not to use it so that I can include only the necessary files and choose where those files are located.

The first step is to obtain the JavaScript file and include it into your /Scripts folder.

Optionally you can also download and use the CSS file. Put this one in your /Content folder.

Once these files are in place, it’s time to create some bundles. In App_Start/BundleConfig.cs add the following bundles:

On the page you want to use dropzone on, add calls to the Styles and Scripts render methods and also a form element with the dropzone class. The class name is how dropzone locates the control so it can make the appropriate modifications.

Remember that you can’t nest form elements so if your page already contains another form your will need to make sure they aren’t nested.

The form contains an optional fallback element for clients who don’t support JavaScript. Also note in the scripts section, custom configuration options are declared.

You may notice I have set a maxFilesize. This value is in MB. It is necessary to change the maxRequestLength attribute in your web.config file to a value at least as big as maxFilesize, otherwise IIS will reject files under the maxFilesize limit.

Let’s say you have a pre-existing Model/View/Controller. For my purposes I will call it FirstController, FirstModel and the view, Details.

In this post I will explain how to reuse this form and model in another View/Controller which will become it’s parent. I will also show how to dynamically add this child view to the parent via Ajax. This way we can conditionally add the view based on the user’s input.

Let’s start by including First into Parent. We will do the dynamic Ajax part afterwards.

Since we don’t want to include the form in our parent page, because our parent already has a form and submit button, we will take out the fields we want to reuse and put them in their own partial view.

In our Parent/Index.cshtml view we can include the partial view. Notice the use of the ViewDataDictionary in RenderPartial. If we simply asked for the view, the model binder wouldn’t be able to get the data back on a Post. The HtmlFieldPrefix in our ViewDataDictionary is set to the name of our child model property.

This will have for effect of changing the Ids and names of the fields on the partial view allowing the model binder to correctly bind the fields.

Here we should log or handle the error in the manner appropriate to our application. Finally we redirect to an error page supplying an optional message parameter. We could also redirect to this error controller from somewhere else than Global.asax.

To make everything work nicely we need to add a new route in our RouteConfig.cs: