Javascript Handling in MVC3

Question

So, continuing in climbing my MVC learning curve, I would like to know how to effectivelly handle javascript in partial views. I mean coding a script in a partial view and then rendering the partial view twice in a view gives duplicate code, including variables and is generally conflictive.

How pros handle JS concurrency in ASP.NET MVC so each partial view see only its own JS code?

Answer 1

When you render a partial view within a view, you can still reference all of the HTML elements in that partial view from Javascript on the holding view.

This will not only help with duplication, but will add to the principle that code should be maintainable within one place in the codebase.

If I were you, I would put all Javascript that your partial views need in the main view, or better yet, in a Javascript file that is separate and reference it in a master page which your main view inherits from :)

• Luis Aguilar: Well, what if I have multiple partial views... and View 1 references an object initialized in its corresponding JS file. Then View 2 creates a object for itself with the same name... it will overwrite View 1's object. Using different names for each variable is not the point since if I have 45 views I would have to make variable1, variable2... till 45... That's my issue.
• Luis Aguilar: Here: Code. The javascript part corresponds to the partial view. When rendering Partial View 1 coolObject is created, then when rendering Partial View 2 coolObject is overwritten.
• slandau: So your goal is to have coolObject perform different tasks on different partial views?
• Luis Aguilar: Oh yeah! xD Am I aiming way too high?
• slandau: Well, the only way I could see that working is if you declared the object on the base view, and then initiated it to w/e you needed it to be before using it on each partial view every time you used it.

Answer 2

This video gave me a great inside look into jquery with mvc it share also some best-practise...

mvcConf 2 - Eric Sowell: Evolving Practices in Using jQuery and Ajax in ASP.NET MVC Applications

http://channel9.msdn.com/Series/mvcConf/mvcConf-2-Eric-Sowell-Evolving-Practices-in-Using-jQuery-and-Ajax-in-ASPNET-MVC-Applications

def. worth a look...

• sq33G: How about a minute mark for where the video says anything about the question here?
• silverfighter: the video shows "one" way to structure and scope JavaScript with some sort of repository pattern. The code gets namespaced properly with an API... So for me there not one mark in the video. It shows just an interesting way to structure JS code (which envolves). And it addresses well the question. Because its defines an api with different namespace and scopes. So no reason for downvote just a little more effort then copy and paste code =)

Answer 3

Use external javascript file and reference it only in the full view. Put this line in the partial view so it does not load the stuff from the _Layout.cshtml

@{ this.Layout = null; }

Answer 4

you need to add the script at the bottom of the page before close the body tag place all required js their and place a rendersection('yoursection',false) so when you need you can define your section and just use the script their who would work in the page you need to define.

Answer 5

If you want javascript need to maintained effectively. Write that javascript in seperate js file. create another partial view and give the link to the js file. while rendering partial views, render the partial view which contains the link for that js file

Answer 6

I am not sure if it is the best way of doing this, but I certainly got it working for me.

So you write you javascript in an external file, and reference it in a partial view, then you could nest your partial view inside this partial view, so each of those nested partial view will be able to use the java script file on their parent level. So this way, you only reference the javascript once, but it can be used with all nested partial views.

good luck mate.

Answer 7

I think Dan Finch and user2745484 have answered the question. But as you sad scripts in partial views may override each other. For solving these problem you need to use some kind of object oriented programming to have encapsulation. Note that you may encounter these kind of problem everywhere you write JavaScript code.