Using jquery in an asp.net mvc 2 editor template

Question

I've created an editor templace in an mvc app, and I want to restrict the input of each text box in the template to only numbers.

At render time, the template my be rendered multiple times on the page because the view could have multiple properties that are of type phone number, so the actual IDs of the text boxes will get unique names. What is the best way for me to add some jquery code to the template, reducing duplication of code, and being able to handle the issue of the ID's being dynamically generated by the mvc framework?

Below is my template:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<PhoneNumber>" %>
<span>
(<%= Html.TextBox("AreaCode", (Model == null) ? "" : Model.AreaCode, new { size = 3, maxlength = 3, style = "width:25px" })%>)&nbsp;
<%= Html.TextBox("Prefix", (Model == null) ? "" : Model.Prefix, new { size = 3, maxlength = 3, style = "width:25px" })%>-
<%= Html.TextBox("Suffix", (Model == null) ? "" : Model.Suffix, new { size = 3, maxlength = 4, style = "width:35px" })%>&nbsp;
<%= Html.TextBox("Extension", (Model == null) ? "" : Model.Extension, new { size = 10, maxlength = 10, style = "width:55px" })%>
</span>

David · Accepted Answer · 2009-12-27 10:21:53Z

2

Set each textbox to have a specific css class. Then use jquery to work on the class rather than id. You can also then remove some of the html attributes and define it specifically in your css class.

<%= Html.TextBox("AreaCode", (Model == null) ? "" : Model.AreaCode, 
    new { size = 3, maxlength = 3, @class = "number-textbox" }) %>

//jquery
$('.number-textbox').each(function()
{
   //validate numbers method
});

//css
.number-textbox
{
    width: 25px;
}

edited Dec 27, 2009 at 10:21

answered Dec 27, 2009 at 10:14

David

15.4k15 gold badges64 silver badges84 bronze badges

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

Comments

Mike Gleason jr Couturier · Accepted Answer · 2009-12-27 08:00:48Z

0

You should create a user control as your "template" and use a binding prefix according to some id uniquely identifying the user control.

Like:

Html.TextBox("Contact1.AreaCode", [...])

But I think you'll have to fetch back the values yourself.

Or you can create your own model binder to handle your list.

Mike

answered Dec 27, 2009 at 8:00

Mike Gleason jr Couturier

9,2064 gold badges44 silver badges60 bronze badges

Collectives™ on Stack Overflow

Using jquery in an asp.net mvc 2 editor template

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related