Month: August 2015

Unexpected “string” keyword after “@” character. Once inside code, you do not need to prefix constructs like “string” with “@”.

DaveLeave a comment

One feature of the Razor Engine which is intended to assist developers is the built in ability to implicitly interpret the server code from the client markup. For the most part it works well but there may be some instances where the engine is unable to do this and a little help from the developer is needed. If you receive the following error this may be one of those times

Unexpected “string” keyword after “@” character. Once inside code, you do not need to prefix constructs like “string” with “@”.

There are a couple of detailed articles by Scott Guthrie explaining how Razor separates the code blocks from the page markup.

ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

ASP.NET MVC 3: Razor’s @: and syntax

Here is an example of code that would product the above error

@if (Model.Products[counter].Depots.ContainsKey(d))
{
    @string.Join(", ", Model.Products[counter].Depots[d].ToArray())
}

In short Razor looks for tags in the code block, in the above code the @if statement starts a code block. This block does not have any tags, only a code nugget (single line of code) where an @ sign indicates the start of a another code block. Razor sees the @ starting the second code block as unnecessary. If you were to remove the @ altogether on the @string.Join line Razor would see this line as C# server code and expect the line to be followed by a semicolon (;). 

@if (Model.Products[counter].Depots.ContainsKey(d))
{
    string.Join(", ", Model.Products[counter].Depots[d].ToArray());
}

Now your application will run without exception but this modified line will not render any output to the view as it will be seen as code where the string returned by the Join method is not assigned to a variable or anything.
There are two key solutions.
Solution 1
Wrap the content line around tags

<span>
@string.Join(", ", Model.Products[counter].Depots[d].ToArray())
</span>

Solution 2
Wrap the line in an element to explicitly identify the content. 

<Text>@string.Join(", ", Model.Products[counter].Depots[d].ToArray())</Text>

A element can contain a mix of text and code nuggets. so this will also work for both solutions,

<Text>This is a depot @string.Join(", ", Model.Products[counter].Depots[d].ToArray())</Text>

Make sure to read the articles mentioned for additional information.

Using CDN in your MVC Bundling Configurations

DaveLeave a comment

There are advantages to referencing resources via a CDN. Bundling can be set up in such a way to use local references when debugging and CDN when in release mode. Here we will see how to set up bundling for jQuery and jQueryUI. If you do not have a local version of the libraries you can install them via NuGet using these commands in the Package Manager Console window.

Install-Package jQuery -Version 1.11.3
Install-Package jQuery.UI.Combined -Version 1.11.4

Here a specific version has been referenced to match the CDN version of the files on googleapis

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<!-- And the related css file -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

From these references the BundleConfig will look something like this

using System.Web;
using System.Web.Optimization;

namespace ApplicationNamespace
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.UseCdn = true;

            bundles.Add(new ScriptBundle("~/bundles/jQuery",
                "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js").Include(
                "~/scripts/jquery-{version}.js")); 

            bundles.Add(new ScriptBundle("~/bundles/jQuery",
                "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js").Include(
                "~/scripts/jquery-ui-{version}.js")); 
        }	
    }
}

Notice in the BundleConfig class that the UseCdn property has been set to true, specifying that we want to use the CDN version when it is available otherwise local files will be used. The {version} placeholder is a way of specifying none specific versions of the libraries and will load whatever version is installed in the scripts folder. The last thing to configure is the debug setting in the web config file.

<system.web>
    <compilation debug="true" targetFramework="4.5.1" />
</system.web>

When the compilation debug setting is set to true the local files will be loaded. In the production environment where the compilation debug is set to false or removed altogether the CDN versions will be referenced.