Bind javascript events to MVC controls

Question

What is the best way to bind Javascript events to my custom MVC controls? My initial thought is to create the controls using Html Helpers which give them a CSS class that signifies what kind of control they are. Then, on document.ready, I'll use jQuery to select all such controls by their class name and bind their events.

However, I'm concerned about the speed of selecting from the entire dom by class name. I've read (and experienced) how slow this can be, especially in IE8 which we need to target for this project.

I could select by IDs by creating a js file for each page, but I'd rather not do this, as it's a complicated web app with lots of pages. I'd rather have one js file for each type of control that gets included in a view if the view contains at least one of that type of control.

Are CSS classes my best option? Any other ideas? I'm using MVC3.

lbstr · Accepted Answer · 2012-05-21 20:49:51Z

2

My advice would be to try it out with classes and test the performance. If you are not satisfied, switch to IDs. I use class selectors all the time and don't find them terribly slow in any browser. When you give jquery a context to search in, things are quite fast. For example:

$('#controls .control').whatever();

Or

$('.control', '#controls').whatever();

Sizzle is great at optimizing these things to be fast.

Edit: Here is a good reference for jQuery performance tips in general (notice #5): http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

answered May 21, 2012 at 20:49

lbstr

2,84220 silver badges29 bronze badges

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

6 Comments

Josh Noe Over a year ago

Thanks, but I can't select by context as the controls could be anywhere on the page. Just to be clear, I'm not going to be able to select "per page", it's got to be a generic methodology that works across the web app. See my edit.

lbstr Over a year ago

@JoshNoe I don't understand why you can't select by ID without creating a js file for each page. Is it just because you don't want to include code for controls that aren't on the page? If so, then it sounds like you're on the right track when you say that you'd rather have one js file for each control that gets included in a view if the view contains at least one of that type of control. Can't you do that and select by ID?

Josh Noe Over a year ago

How would my js file know what IDs to select by? For instance, say I have a control type "CustomDropDown" on two pages. One of the pages has a CustomDropDown with Id "companies", and another page has one with Id "racecars". Both of these pages will use the same "CustomDropDown.js" file, which won't have any knowledge of these ids.

lbstr Over a year ago

@JoshNoe You would only need to give them different IDs if they are expected to function differently. Otherwise, if your js is going to treat them the same, you could just give them an id of "CustomDropDown".

Josh Noe Over a year ago

@Ibstr Thanks but this isn't really practical in this case for a few reasons. For one, I'll likely have multiple of the same type of control on the page (I guess I could name the second "CustomDropDown2" and iterate until I don't find, but this smells). More importantly, I will likely need page-specific client-side functionality on these controls, so I'll want to access them by id in the page's js, so I'll want more descriptive ids.

|

Collectives™ on Stack Overflow

Bind javascript events to MVC controls

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related