Adding a Placeholder to a TextBox for a String EditorTemplate

This post describes how an html5 placeholder can be added to an html input using mvc.

Add the Display attribute to a property in your ViewModel. Set the placeholder text to the Prompt property of this attribute.
MSDN describes the Prompt property as follows:

Gets or sets a value that will be used to set the watermark for prompts in the UI.

This is why I think the Prompt is the right property to use as placeholder.


[Display(Prompt = "search for cities and countries")]
public string SearchTerm { get; set; }

Create a new EditorTemplate which overwrites the default editor template for properties of type string and save this file on the following location:



@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", placeholder = ViewData.ModelMetadata.Watermark })

When you want to use placeholders with other types than strings (for example with type int), you should create a custom EditorTemplate for all these types.

Manually setting the navigator.geolocation

Firefox is probably my most favorite browser. Mostly because of all the great extensions.
Every web developer should know Firebug. It really makes my life so much easier. I use it a lot for:

  • Examining and manipulating dom elements
  • Run JavaScript
  • Inspect ajax calls (request and response)
  • Resource manager (see what’s being loaded, cached, etc)

But this post is not about Firebug.
Another great extension is Geolocator.
This tool allows you to change your geolocation. Let me first explain what the geolocation is.
The geolocation is your current position provided by your browser.
It can be requested via JavaScript. This is one of the new features described in the HTML5 standard.


The geolocation object has three methods:

  • getCurrentPosition
  • watchPosition
  • clearWatch

getCurrentPosition gives you the current position, this method accepts two arguments, the first argument is the method called when the position is successfully retrieved. The second argument is the method called when the position could not be retrieved. This could also be because the user has denied location sharing.

function onSuccess(position)
    var lat = position.coords.latitude;
    var long = position.coords.longitude;

function onError()
    // handle failed retrieving of location.

navigator.geolocation.getCurrentPosition(onSuccess, onError);

The watchPosition method also returns the current position, but continues to return updated positions.
The clearWatch method stops the watchPosition method.

Not all browsers support html5, so not all browsers support geolocation. You first need to check if geolocation is available.

if (navigator.geolocation) {
    // do location based stuff here

I was working on a location based application and wanted to test the applications with different positions, and that’s when I came across the Geolocator extension.
I created several locations and when I reloaded the page, Firefox showed a dropdownlist with my locations so I could easily switch my position.

Locations can be added by going to the Add-ons menu and select the Geolocator options. Search for your location, leave the search screen (tweak settings a bit if you’d like) and click the save button.