ASP.net MVC v2 - Styling templates

Question

Just wondering if anyone has any ideas on how we can style templates... Like if I want to change the MaxLength of a textbox how do I go about doing this.

What I would like to be able to do is something like what I can do in WPF with styles and templates... In WPF you can pass through styles to the templates and then choose where those styles are applied... For instances if the user sets the width on a control (which is the template), within the control code I can choose to apply that width to any element I want within template or to none at all...

Hence I was wondering if anyone knows of anything similar?

score 2 · Accepted Answer · edited May 23 '17 at 10:33

I've posted an answer to a similar question here.

If you want generic styles, you can derive your custom templates's Models from the base TemplateViewModel class which will support your required styles:

public interface ITextSpecifier
{
  int? Size { get; }
  bool AutoGrow { get; }
}

public class TemplateViewModel<T> where T: class
{
  public IDictionary<string, string> Attributes { get; }
  public ITextSpecifier TextStyle { get; private set; }
  public IColorSpecifier ColorStyle { get; }
  public T TextStyle(int size, bool autogrow)
  {
     TextStyle = new TextSpecifier(size, autogrow);
     return this;
  }
}

public class TextBoxViewModel: TemplateViewModel<TextBoxViewModel>
{
}

<%= Html.EditorFor(x => new TextBoxViewModel(Model.StringData).TextStyle(10, false)) %>

In the template:

<!-- template page derived from typed control for TextBoxViewModel -->
<input type='text' <%= Model.TextStyle.Size != null 
    ? "size='" + Model.TextStyle.Size + "'" : "" %> ... />

It's a bit of work, that's why I hope they'll invent some common method in MVC v2 release.

I can see what you are getting at... but as you say in the other post I think there needs to be a better way of handling the problem... I think the WPF solution would work really well here... — vdhant, Oct 30 '09 at 23:08
this looks to solve the problem I'm working on. Has that new thing you were hoping for arrived in v2 or v3? T — kenny, Mar 04 '11 at 15:18

score 0 · Answer 2 · answered Jul 13 '12 at 22:55

0

The easiest way to do this as far as I know is to create a HTML id for the textbox like shown below:

  @Html.EditorFor(model => model.Description, null, "Description", null)

And at the end of the page, write the following javascript

 <script type="text/javascript">
        $(function () { $("#Description").css("width","450"); });    
 </script>

NB:- Even I hate MVC!!!

answered Jul 13 '12 at 22:55

iShah

119
2
14

why would you hate a design pattern ? or are you one of people who refers to IE as "the internet" and to ASP.NET MVC framework as "the mvc"? – tereško Jul 14 '12 at 00:05

score 0 · Answer 3 · answered May 07 '10 at 22:57

The solution here is to use metadata! You can reuse the StringLength data annotation validation attribute here. Create a new metadata provider that reads the max length out of the StringLength attribute and puts it into the AdditionalValues dictionary. Your metadata provider should inherit from DataAnnotationsModelMetadataProvider. And then in the template that you create, in the DisplayTemplates or EditorTemplates, you can access the string's max length.

ASP.net MVC v2 - Styling templates

3 Answers3

Linked