ModelMetadata.Watermark and MVC View Models

Question

I'm struggling to display a watermark (so called placeholder) on my MVC3 form inputs.

There is already few posts down here talking including the quite focused one here:

Html5 Placeholders with .NET MVC 3 Razor EditorFor extension?

In these posts, advice is made to create tweaked html.TextBox templates. In my case, my asset is that I should not need any editor template as I'm tweaking them inline.

Better than long talks, here is the relevant part of the actual code:

~/Models/myModel.cs

namespace myProject.Models {
  public class myFormModel {
    ...
    [Display(Name = "firstFieldName", Prompt = "firstFieldPrompt")]
    public string firstFieldValue { get; set; }
    ...
  }
}

~/Controllers/myFormSurfaceController.cs

namespace myProject.Controllers {
  public class myFormSurfaceController : SurfaceController {
    ...
    [ChildActionOnly]
    public PartialViewResult myForm()
    {
        return PartialView("myPartialView", new myFormModel());
    }
    ...
    [HttpPost, ValidateAntiForgeryToken]
    public ActionResult handleMyFormSubmit(myFormModel model) {...}
    ...
  }
}

~/Views/myProject/Partial/myPartialView.cshtml

@model myFormModel
@{      
  using (Html.BeginUmbracoForm("handleMyFormSubmit", "myFormSurface", null, new Dictionary<string, object> { { "class", "myFormStyle" }, { "id", "myFormId" } }))
  {
    ...
    @Html.TextBoxFor(x => x.firstFieldValue, new { @class = "myInputStyle", @placeholder = ViewData.ModelMetadata.Watermark })
    ...
  }
}

Result is that the placeholder html tag is showing up correctly on my rendered webpage but is empty though Name tag is filled up correctly, even without DisplayName decoration set on my view model's property.

http://localhost/testpage

...
<input type="text" value="" placeholder="" name="firstFieldName" id="firstFieldName" class="myInputStyle">
...

What am I missing here ? I did try indeed to create both editor templates (MultilineText and String) in the correct folder (~/Views/Shared/EditorTemplates/) but I assume they are never called as I'm using "Html.TextBoxFor" and not "Html.TextBox"...

Other thing, if I remove "@placeholder = ViewData.ModelMetadata.Watermark" from the @Html.TextBoxFor call, I don't have any "placeholder" displayed on the rendered webpage. Which is good, this part of the call is definitively fine.

Thanks in advance for any help on that point...

Nicolas.

Edit:

What about if I create more variable in my model.

For instance:

public string firstFieldPrompt { get { return "bla"; } set { } } 

and then

@Html.TextBoxFor(x => x.firstFieldValue, new { @class = "myInputStyle", @placeholder = x => x.FirstFieldPrompt })

?

Answer 1

The reason you get an empty watermark is that in your case (i.e. not using templates) ViewData actually refers to myFormModel (not myFormModel.firstFieldValue); you are essentially retrieving the watermark of your view model. Since models can't have watermarks ([Display] can't be applied to classes) ViewData.ModelMetadata.Watermark will always be empty for views.

As far as I can see, your only option here (if you don't want to use templates) is doing the watermark inline:

@Html.TextBoxFor(x => x.firstFieldValue, new { @class = "myInputStyle", placeholder = "Your watermark text here" })

By the way, if want to use templates, you need to use the templated helpers @Html.EditorFor() and @Html.DisplayFor(). @Html.TextBoxFor() is just the strongly-typed version of @Html.TextBox(). It is not templated.

Answer 2

I realise this is an oldie, but you can use the ModelMetadata.FromLambdaExpression() method from within your view (without using templates), i.e.

    @Html.TextBoxFor(x => x.firstFieldValue, 
        new { 
            @class = "myInputStyle", 
            @placeholder = ModelMetadata.FromLambdaExpression(x => x.firstFieldValue, ViewData).Watermark 
    })

Hope this helps someone :-)