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?

slandau · Accepted Answer · 2011-04-01 17:39:21Z

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 :)

answered Apr 1, 2011 at 17:39

slandau

24.2k43 gold badges124 silver badges186 bronze badges

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

5 Comments

Luis Aguilar Over a year ago

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 Over a year ago

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 Over a year ago

So your goal is to have coolObject perform different tasks on different partial views?

Luis Aguilar Over a year ago

Oh yeah! xD Am I aiming way too high?

slandau Over a year ago

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.

silverfighter · Accepted Answer · 2011-04-01 17:50:06Z

0

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...

answered Apr 1, 2011 at 17:50

silverfighter

6,89212 gold badges52 silver badges76 bronze badges

2 Comments

sq33G Over a year ago

How about a minute mark for where the video says anything about the question here?

silverfighter Over a year ago

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 =)

Saša Ćetković · Accepted Answer · 2011-04-03 12:57:07Z

0

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; }

answered Apr 3, 2011 at 12:57

Saša Ćetković

8959 silver badges21 bronze badges

Comments

user605334 · Accepted Answer · 2011-04-03 13:01:48Z

0

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.

answered Apr 3, 2011 at 13:01

user605334

Comments

kleopatra · Accepted Answer · 2013-09-04 06:37:08Z

0

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

edited Sep 4, 2013 at 6:37

kleopatra

51.6k28 gold badges103 silver badges220 bronze badges

answered Sep 4, 2013 at 6:31

user2745484

1

Comments

loveNZ · Accepted Answer · 2013-10-04 11:39:50Z

0

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.

answered Oct 4, 2013 at 11:39

loveNZ

3072 silver badges12 bronze badges

Comments

Alborz · Accepted Answer · 2013-12-15 06:19:24Z

0

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.

answered Dec 15, 2013 at 6:19

Alborz

6,9333 gold badges26 silver badges37 bronze badges

Collectives™ on Stack Overflow

Javascript Handling in MVC3

7 Answers 7

5 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related