CODEWITHSUNDEEP
asp.net-mvc-4
Jurjen
Jurjen

Reputation: 794

mvc EditorTemplate DisplayMod

I'm creating a mobile website using MVC-4.

Integer fields should be entered from the numeric keyboard, I use the EditorTemplate number wich creates an HTML element like this:

<input ... type="number" value="45" />

My customer doesn’t much appreciate the numeric keyboard shown this way on his iPhone and has asked me to show the phone keyboard which is shown by using type="tel" instead of type="number".

I’m struggling as to how to accomplish this in my EditorTemplate number.cshtml.

I’ve created a separate iPhone DisplayMode but am not sure how to use it combined with an EditorTemplate, I’ve tried copying it to number.iPhone.cshtml but EditorTemplates don’t seem to work that way…

Is there some method to retrieve the current DisplayMode so I can solve this problem ?

// pseudo code I guess …

@if(DisplayMode == "iPhone")    
{ 
   @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", type = "tel" })   
}    
else     
{
   @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", type = "number" })
}

Upvotes: 2

Views: 284

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038850

I've tried copying it to number.iPhone.cshtml but EditorTemplates don’t seem to work that way...

No, editor templates works exactly the same way as all other views. So assuming that you have registered a display mode called iPhone (because out of the box there's no such Display Mode):

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
    ContextCondition = context => context.Request.UserAgent.... some condition on the User Agent
});

and assuming you have the following model that gets passed to your view:

public class MyViewModel
{
    [DataType("Number")]
    public decimal Foo { get; set; }
}

in which you render an editor template for the Foo property as usual:

@Html.EditorFor(x => x.Foo)

Then assuming that you hit your website with an User-Agent that matches the condition you wrote when you registered your iPhone display mode, the ~/Views/Shared/EditorTemplates/Number.iPhone.cshtml will be rendered.

Upvotes: 2

Related Questions