create custom controls mvc3

Question

Just starting to get the hang of MVC3 and want to start building out some custom controls that I can just drop into a view. Specifically I want to be able to drop in some html form controls that will automatically add some javascript for validation.

something like this is what I'd want:

@Html.VTextBox("MyTextBox","",new {@vType="PhoneNumber", @vMessage="You Must Enter a Phone Number" })

when the page is rendered, I'd want it to search for any custom elements I create then drop in the appropriate javascript to validate client side. I did something very similar to this with asp.net web forms for custom controls ie

<ucc:VTextBox ID="MyTextBox" runat="server" message="You must fill this in" />

just wondering if MVC3 offers the same extensibility. Any resources or advice you can provide would be greatly appreciated.

TIA

xTRUMANx · Accepted Answer · 2011-06-16 07:18:11Z

1

To start off with, you'll need to look into extension methods and more specifically, how to create extension methods for the HtmlHelper class so you could write code like the example you've shown above.

For the example you've shown above, you could write code like this:

public MvcHtmlString VTextBox(string name, object value, object htmlAttributes)
{
    StringBuilder html = new StringBuilder();

    // Build your html however you want
    // Here's a simple example that doesn't
    // take into account your validation needs
    html.AppendFormat("input type=\"text\" name=\"{0}\" value=\"{1}\" />", name, value);

    return MvcHtmlString(html.ToString());   
}

Then in your view you can use the example above like so:

@Html.VTextBox("MyTextBox","",new {@vType="PhoneNumber", @vMessage="You Must Enter a Phone Number" })

NOTE: You'll need to import the namespace the extension method is in to your view. Simplest method, put a @using ExtensionMethodNamespace at the top of your view. You can make the namespace automatically imported to all your views by fiddling with the web.config (and maybe the Global.asax).

ADDENDUM: Please note RPM1984's comment below where he advises to use TagBuilder in place of StringBuilder which is sound advice since this is the exact scenario TagBuilder was designed for. He also mentions strong typing the helper to the model which is also great advice.

edited Jun 16, 2011 at 7:18

answered Jun 16, 2011 at 5:22

xTRUMANx

1,0351 gold badge8 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RPM1984 Over a year ago

two points. 1) you should use TagBuilder, which is more rich and better suited for html extensions. 2) where possible, you should strong-type the helper to the model, to avoid passing additional parameters. So it could be VTextBox<MyModel>(object htmlAttributes), and you could pull what you need out of htmlHelper.ViewData.Model. But in general, good answer +1

Collectives™ on Stack Overflow

create custom controls mvc3

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related