How to convert C# bool to Javascript boolean in Razor .cshtml views

I was wanting a clean way to convert a C# Boolean property on a view model into a javascript true / false bit of text for passing into our Typescript context settings constructors, and stumbled upon this way …

@Json.Encode(Model.BoolPropertyName)

Works a treat too!

Catastrophic failure when attaching Visual Studio Debugger to IISExpress

Symptom: Unable to attach to the process. Catastrophic failure.
Resolution: Change project settings to enable edit and continue, then press F5 to start the web project in debug mode.

I also deleted my solution.suo file from the solutions directory as it was over 3MB! - more about that here -http://merrickchaffer.blogspot.co.uk/2012/02/visual-studio-hanging-running-slowly.html

MVC / Jquery unobtrusive validation

http://www.devtrends.co.uk/blog/the-complete-guide-to-validation-in-asp.net-mvc-3-part-1

Also for how do attach a new client side method to unobtrusive validation e.g.

jQuery.validator.unobtrusive.adapters.add(adapterName, [params], fn);

see this article...

http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html

 

Note: For any element a in your <form>, you can do this to figure out what validation is attached to the containing <form> for that element...

$.data(a.form, "validator").settings.rules

e.g.

$.data(a.form, "validator").settings.rules.MiddleInitial
Object {maxlength: "1", __dummy__: true}

$.data(a.form, "validator").settings.messages.MiddleInitial
Object {maxlength: "The middle initial must be a single charater"}

How to do data dash data- attributes in Razor

Answer: Use an underscore

In the cshtml view file definition when declaring the attributes in the new {} object class for the attributes, use data_mycustomdataattribute to render out data-mycustomdataattribute

@Html.Hidden("controlName", "valueHere", new { @data_mycustomdataattribute = "testing dash"})

This will render the following...

<input data-mycustomdataattribute="testing dash" id="controlName" name="controlName" type="hidden" value="valueHere">

Data dash attributes in ASP.NET MVC

http://stackoverflow.com/questions/4844001/html5-data-with-asp-net-mvc-textboxfor-html-attributes

You could use underscore (_) and the helper is intelligent enough to do the rest:

Html.TextBoxFor(
    model => model.Country.CountryName, 
    new { data_url = Url.Action("CountryContains", "Geo") }
)

And for those who want to achieve the same in pre ASP.NET MVC 3 versions they could:

<%= Html.TextBoxFor(
    model => model.Country.CountryName, 
    new Dictionary<string, object> { 
        { "data-url", Url.Action("CountryContains", "Geo") } 
    }
) %>

Watermarks in ASP.NET MVC 4

...using the jquery.overlabel plugin

1. Stick a DisplayName attribute for the watermark on your model property

[RequiredIf("Mode", UnderOfferModelMode.SetUnderOffer, ErrorMessage = "Please enter a comment")]

[DisplayName("Please enter your comment text here")]

public string UnderOfferComment { get; set; }

2. Add an Html.LabelFor and an Html.TextAreaFor your model property

3. Import the jquery.overlabel.js by including "overlabel" in your require imports

4. Add a line in the document.ready to call the .overlabel() method on the label selector (or use a class selector as I have)

5. In your css then you just need

label.overlabel {

position: absolute;

margin-left: 70px;

margin-top: 10px;

z-index: 1;

color: #999;

}

And you end up with a lovely little unobtrusive watermark that doesn't interfere with your model validation in anyway.

Fingerprint css in MVC web sites

http://madskristensen.net/post/cache-busting-in-aspnet

Optimizing for website performance includes setting long expiration dates on our static resources, such s images, stylesheets and JavaScript files. Doing that tells the browser to cache our files so it doesn’t have to request them every time the user loads a page. This is one of the most important things to do when optimizing websites.

In ASP.NET on IIS7+ it’s really easy. Just add this chunk of XML to the web.config’s <system.webServer> element:

<staticcontent>
  <clientcache cachecontrolmode="UseMaxAge" cachecontrolmaxage="365.00:00:00" />
</staticcontent>

The above code tells the browsers to automatically cache all static resources for 365 days. That’s good and you should do this right now.

The issue becomes clear the first time you make a change to any static file. How is the browser going to know that you made a change, so it can download the latest version of the file? The answer is that it can’t. It will keep serving the same cached version of the file for the next 365 days regardless of any changes you are making to the files.

Fingerprinting

The good news is that it is fairly trivial to make a change to our code, that changes the URL pointing to the static files and thereby tricking the browser into believing it’s a brand new resource that needs to be downloaded.

Here’s a little class that I use on several websites, that adds a fingerprint, or timestamp, to the URL of the static file.

using System; 
using System.IO; 
using System.Web; 
using System.Web.Caching; 
using System.Web.Hosting;

public class Fingerprint 
{ 
  public static string Tag(string rootRelativePath) 
  { 
    if (HttpRuntime.Cache[rootRelativePath] == null) 
    { 
      string absolute = HostingEnvironment.MapPath("~" + rootRelativePath);

      DateTime date = File.GetLastWriteTime(absolute); 
      int index = rootRelativePath.LastIndexOf('/');

      string result = rootRelativePath.Insert(index, "/v-" + date.Ticks); 
      HttpRuntime.Cache.Insert(rootRelativePath, result, new CacheDependency(absolute)); 
    }

      return HttpRuntime.Cache[rootRelativePath] as string; 
  } 
}

All you need to change in order to use this class, is to modify the references to the static files.

Modify references

Here’s what it looks like in Razor for the stylesheet reference:

<link rel="stylesheet" href="@Fingerprint.Tag("/content/site.css")" />

…and in WebForms:

<link rel="stylesheet" href="<%=Fingerprint.Tag(" />content/site.css") %>" />

The result of using the FingerPrint.Tag method will in this case be:

<link rel="stylesheet" href="/content/v-634933238684083941/site.css" />

Since the URL now has a reference to a non-existing folder (v-634933238684083941), we need to make the web server pretend it exist. We do that with URL rewriting.

URL rewrite

By adding this snippet of XML to the web.config’s <system.webServer> section, we instruct IIS 7+ to intercept all URLs with a folder name containing “v=[numbers]” and rewrite the URL to the original file path.

<rewrite>
  <rules>
    <rule name="fingerprint">
      <match url="([\S]+)(/v-[0-9]+/)([\S]+)" />
      <action type="Rewrite" url="{R:1}/{R:3}" />
    </rule>
  </rules>
</rewrite>

You can use this technique for all your JavaScript and image files as well.

The beauty is, that every time you change one of the referenced static files, the fingerprint will change as well. This creates a brand new URL every time so the browsers will download the updated files.

FYI, you need to run the AppPool in Integrated Pipeline mode for the <system.webServer> section to have any effect.

Upgrading an ASP.NET MVC 3 Project to ASP.NET MVC 4

http://www.asp.net/whitepapers/mvc4-release-notes#_Toc303253806

 

ASP.NET MVC 4 can be installed side by side with ASP.NET MVC 3 on the same computer, which gives you flexibility in choosing when to upgrade an ASP.NET MVC 3 application to ASP.NET MVC 4.

The simplest way to upgrade is to create a new ASP.NET MVC 4 project and copy all the views, controllers, code, and content files from the existing MVC 3 project to the new project and then to update the assembly references in the new project to match any non-MVC template included assembiles you are using. If you have made changes to the Web.config file in the MVC 3 project, you must also merge those changes into the Web.config file in the MVC 4 project.

To manually upgrade an existing ASP.NET MVC 3 application to version 4, do the following:

1. In all Web.config files in the project (there is one in the root of the project, one in the Views folder, and one in the Views folder for each area in your project), replace every instance of the following text (note: System.Web.WebPages, Version=1.0.0.0 is not found in projects created with Visual Studio 2012):

   System.Web.Mvc, Version=3.0.0.0
   System.Web.WebPages, Version=1.0.0.0
   System.Web.Helpers, Version=1.0.0.0
   System.Web.WebPages.Razor, Version=1.0.0.0

   
   

   with the following corresponding text:

   System.Web.Mvc, Version=4.0.0.0
   System.Web.WebPages, Version=2.0.0.0
   System.Web.Helpers, Version=2.0.0.0
   System.Web.WebPages.Razor, Version=2.0.0.0

   
   
2. In the root Web.config file, update the webPages:Version element to "2.0.0.0" and add a new PreserveLoginUrl key that has the value "true":

   <appSettings>
     <add key="webpages:Version" value="2.0.0.0" />
     <add key="PreserveLoginUrl" value="true" />
   </appSettings>

   
   
3. In Solution Explorer, right-click on the References and select Manage NuGet Packages. In the left pane, select Online\NuGet official package source, then update the following:
   
   
   
   • ASP.NET MVC 4
     
   • (Optional) jQuery, jQuery Validation and jQuery UI
     
   • (Optional) Entity Framework
     
   • (Optonal) Modernizr
   
   
4. In Solution Explorer, right-click the project name and then select Unload Project. Then right-click the name again and select EditProjectName.csproj.
   
5. Locate the ProjectTypeGuids element and replace {E53F8FEA-EAE0-44A6-8774-FFD645390401} with {E3E379DF-F4C6-4180-9B81-6769533ABE47}.
   
6. Save the changes, close the project (.csproj) file you were editing, right-click the project, and then select Reload Project.
   
7. If the project references any third-party libraries that are compiled using previous versions of ASP.NET MVC, open the root Web.config file and add the following three bindingRedirect elements under the configuration section:

   <configuration>
     <!--... elements deleted for clarity ...-->
    
     <runtime>
       <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
         <dependentAssembly>
           <assemblyIdentity name="System.Web.Helpers" 
                publicKeyToken="31bf3856ad364e35" />
           <bindingRedirect oldVersion="1.0.0.0" newVersion="2.0.0.0"/>
         </dependentAssembly>
         <dependentAssembly>
           <assemblyIdentity name="System.Web.Mvc" 
                publicKeyToken="31bf3856ad364e35" />
           <bindingRedirect oldVersion="1.0.0.0-3.0.0.0" newVersion="4.0.0.0"/>
         </dependentAssembly>
         <dependentAssembly>
           <assemblyIdentity name="System.Web.WebPages" 
                publicKeyToken="31bf3856ad364e35" />
           <bindingRedirect oldVersion="1.0.0.0" newVersion="2.0.0.0"/>
         </dependentAssembly>
       </assemblyBinding>
     </runtime>
   </configuration>

Starting IISExpress from command line

start "" "C:\Program Files (x86)\IIS Express\iisexpress.exe"  /config:"%userprofile%\Documents\IISExpress\config\applicationhost.config"  /site:"RRA.Web.McMuffin" /apppool:"Clr4IntegratedAppPool"

P.S. One of the many benefits I've discovered in starting IISExpress in this way from the command line, is that you get fiddler type page visit logging output for each page request in the resulting console window..

Altering the HTTP response using Fiddler

Should you ever have the need to change the http response to a web server, then please note in the latest version of Fiddler it's actually possible to do this without having to hack the CustomRules.js file that the Fiddler training videos and documentation tell you about.

You can simply set up an AutoResponder tab rule as follows

1. Stick a file in %userprofile%\Documents\Fiddler2\Captures\Responses folder

2. Highlight the request you want to set up a rule for

3. Got to the AutoResponder tab and check Enable automatic responses and unmagtched requests passthrough

4. Click Add rule

5. In the dropdown list control at the bottom, select the file that you dropped in the folder in step 1 above.

6. Hit the save button

7. Clear the Cache

Now next time you request that resource, the version you have saved on disk will be downloaded instead. You can check this by looking in the IE cache folder %userprofile

%userprofile%\AppData\Local\Microsoft\Windows\Temporary Internet Files

More detail about request and response breakpoints in fiddler here… (this is very useful should you wish to change the request going to the server in the first place as well)…

http://www.youtube.com/watch?v=8bo5kXMAcV0&list=PLvmaC-XMqeBbw72l2G7FG7CntDTErjbHc&index=2

P.S. For more powerful / permanent debugging solution you can just alter the fiddler customrules.js as follows

static function OnBeforeResponse(oSession: Session) {

        if (m_Hide304s && oSession.responseCode == 304) {

            oSession["ui-hide"] = "true";

        }

if (oSession.uriContains("Name=ViewerScript")) {

                                                oSession["x-replywithfile"]="Reserved.ReportViewerWebControl.axd";

                                }

    }

Microsoft Virtual Academy - ASP.NET MVC

I’ve just got into the Microsoft Virtual Academy, and I have to say it has a wealth of up to date, excellent training videos.

http://www.microsoftvirtualacademy.com/Content/ViewContent.aspx?et=4099&m=4093&ct=19601#?fbid=_Oyn-vcRqgr

Razor syntax escape characters…

Html anti forgery token..

http://blog.stevensanderson.com/2008/09/01/prevent-cross-site-request-forgery-csrf-using-aspnet-mvcs-antiforgerytoken-helper/

ASP.NET MVC 4 Content Map

http://www.asp.net/mvc/overview/getting-started/aspnet-mvc-content-map

Script including - always use the longhand version for the <script></script> tag, otherwise your script file will not be downloading to the client browser

JSBin.com - http://jsbin.com/ a fantastic javscript, jquery, html and css online playground like jsfiddle.net and plnkr.co. The nice thing about this one though is that you can download the entire finished article file as a single html page.

What's coming in ASP.NET - www.asp.net/vnext

Signed nightly builds of asp.net vnext - https://aspnetwebstack.codeplex.com/

Getting started with web api - http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api

Web API 2 (video) - http://channel9.msdn.com/Events/Build/2013/3-504

No Cache Attribute in MVC

    using System;
    using System.Web;
    using System.Web.Mvc;
    using RRA.Core.Services.Utilities;

    /// 

    /// Disables browser caching.
    /// 
    [AttributeUsage(AttributeTargets.Method)]
    public class NoCacheAttribute : ActionFilterAttribute
    {
        /// 

        /// Called by the ASP.NET MVC framework before the action result executes.
        /// 
        /// The filter context.
        public override void OnResultExecuting(ResultExecutingContext filterContext)
        {
            filterContext.HttpContext.Response.Cache.SetETag((Guid.NewGuid()).ToString());
            filterContext.HttpContext.Response.Cache.SetExpires(SystemDateTime.UtcNow.AddDays(-1)); 
            filterContext.HttpContext.Response.Cache.SetValidUntilExpires(false); 
            filterContext.HttpContext.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches); 
            filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache); 
            filterContext.HttpContext.Response.Cache.SetNoStore(); 
            base.OnResultExecuting(filterContext);
        }
    }

Preload Images with CSS, Javascript or Ajax

See here for many ways to achieve this...

http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Personally I'm sticking with the following...

http://jsfiddle.net/chafferm/VU2dq/

Note the type check for array in this example is probably overkill, as it is for all browser versions, we could have used jQuery isArray instead, or even Array.isArray in ECMA script 5 (IE 9 or higher).

Icon editor for favicon in the web

Came across this in the book I'm reading at the moment, http://www.xiconeditor.com/ - rather clever little tool from Microsoft for creating the favicon for your website, for when users book mark it on their iPad / iPod or desktop PC.

Beginner HTML5, JavaScript, jQuery, Backbone, and CSS3 Resources

Have a look at this guy's blog post here for a great load of resources on these topics...

http://www.elijahmanor.com/2013/01/beginner-html5-javascript-jquery.html

Project Silk for all your HTML web application needs

A colleague of mine pointed out this white paper article that Microsoft have kindly put together, which appears to be a full overview on how to construct a web site in this day an age.

"Guidance for building cross-browser web applications with a focus on client-side interactivity. These applications take advantage of the latest web standards like HTML5, CSS3 and ECMAScript 5 along with modern web technologies such as jQuery, Internet Explorer 9, and ASP.NET MVC3"

http://silk.codeplex.com/

You can also download it all in pdf format from the following link

http://www.microsoft.com/en-us/download/details.aspx?id=27290

YSlow CSS inspector

Just installed the YSlow browser extension for Chrome (although versions are available for other browsers too!).

http://developer.yahoo.com/yslow/

Not bad for finding where things on your site can be improved…

User Agent switcher extension for Google Chrome for mobile development

In case you have Google chrome, and are doing device based HTML rendering, this extension to chrome is very useful. Allows you to switch your desktop browser into behaving like an iPhone...

https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=en-US&gl=US

Here Chrome is looking like iPhone4 for twitter.com

Building Single Page Apps for desktop, mobile and tablet with ASP.NET MVC 4

Great video here from Steve Sanderson on building single page web apps for desktop mobile and tablet with MVC 4

http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159?format=html5

More at

http://blog.stevensanderson.com/

Using Apache benchmark to load test your web site

You can download the apache web server, then simply look inside the zip file for ab.exe.

E.g. to load test your site with 10 concurrent requests use the following command line...

>ab.exe -n 10 -c 10 http://localhost/mywebsite

For more information see 8.15mins into this video link...

http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2287