What is the best practice for referencing javascript that is specific to PartialView in asp.net-mvc?

Question

I have an asp.nset-mvc site, and I have a partial view that exists in several different views.

There is also a .js file that is associated with the functionality used by this partial view.

Right now, I am including this js file in every parent view in which this partial view is located inside the section of the chapter.

Now I think it’s easier to maintain by removing this link to the javascript file from each parent view and simply placing this link in the body of the partial view. (therefore it was simply indicated in one place)

Does anyone see a flaw in this change? Is this a recommended practice with javascript that is only used with a partial view?

Answer 1

I asked myself a few questions:

• How big is the js file? How big is his score?
• How many times is it used with the average use of your application?

If this is a large file that is not used much, I would include a script inside the file and not make a deal.

You need to remember that js files are cached, and if the average user enters a partial view, he will need to load the script.

As for the good script \ style processing methods:

Use combined js files and reduce them during production.
This can be done using the asset manager or "grouping" js files using packages.

Ligaments
Cassette - for assets

You can also use "require.js" to load script dependencies.
I have not used it, but from what I know, you can configure modules and js functions that depend on other modules and js files.

RequireJS

Answer 2

It sounds to me as if you had better leave it with the rest of your scripts.

You must link, minimize, and cache the scripts forever. If you do this, then even new users on your site only have a small file to download. Parsing it into several files, you only fight. It’s better for them to just download everything they need for your site right away.

I would consider separate packages if you have very different sections of your site that you do not expect from users. For example, maybe your section is without authentication and the section is "members only". Even then, it will not matter much, so it makes sense to just lay them out in such a way as to make sense for the overall architecture of your site (for example, perhaps only a section for users only is another area of ​​mvc).

But pulling out scripts that are partially needed individually only because not every single page will use it will be counterproductive.

EDIT: I think it’s better to understand after re-reading. What I said is still worth it, but the emphasis is on the bunch. Do not include separate script links for all your scripts on every page he needs. It’s best to collect all the scripts your site needs and include them on each page. With caching, users will download it only once, and then will not make more script requests when navigating your site, instead of each page ending with another unique script that requires loading.

Answer 3

I think this is a good solution for creating extension methods to add javascript to partialView

Good example: How to render a section in partial view in MVC3?

Answer 4

The answer to your question can be obtained from the answer to this question:

• Do you think this partial view is part of the entire web application or just a separate component?

This is usually part of a web application, since you are only going to use it in this web application. Thus, from this point of view, there is no need to associate a view with its javascript, since javascript, like the view, is still part of the entire web application.

• When do we collect things?

When they are connected with each other and are not connected with anything other than its entirety. I doubt your javascript for this view is dependent on anything else. Not even jQuery? even no framework, for example. knockout or bob.js? If so, why don't you associate your submission with these frameworks in it too?

Yes, the answer is dependencies. This is an implementation, while others are dependencies. However, the line between implementation and dependencies becomes blurred when working with partial views within the same web application. The reason is that a partial view is part of the web application. This is just a wireframe way of handling things, allowing you to separate partial views in reusable mode. But still, the partial view remains part of the entire web application and, therefore, its implementation of the script.

If you followed all these thoughts, then you would agree that in this particular case it does not matter if you want to associate the code with a partial representation or if you want to associate it with a web application scripts. It is just the same .

Thus, the solution should be dictated by other indicators, such as script loading performance, etc. This is beyond the scope of the question, but the description provided should be sufficient as an answer.

Answer 5

Loading javascript ad-hoc by simply specifying this link inside the partial view body is the right strategy. You avoid analyzing and interpreting the overhead on all other pages. Even if your javascript file is cached, it will still take time (albeit small) to execute on every page that includes it. What should you do if you have complex logic in it or a DOM repetition is performed, or you have many such files? ..

Indeed, this is the first step to mature dependency management. If you know what functionality is used on which page, the cost of re-factoring or servicing will be less expensive in the future.

The question is how to reference JavaScript resources from a partial view. You don’t want to simply unload the <script> in the middle of the ^{[citation required]} page ^; instead, you can use a specialized asset manager, such as cassette . There are numerous perks to use it, but first of all you can refer to assets in one place of the page life cycle (for example, from your partial view):

 @{ Bundles.Reference("scripts/your-dependency.js"); Bundles.Reference("scripts/another-dependency.js"); } 

... and then render the required <script> tags elsewhere (for example, in your main view):

 <body> ... </body> @Bundles.RenderScripts() </html> 

... which may include additional resources required from other views and / or minimized packages containing common javascript code.

Answer 6

I use something like the one explained here, works great. http://blog.mariusschulz.com/2013/07/07/generating-external-javascript-files-using-partial-razor-views

Answer 7

I think u should use requirejs because

In my opinion, there are three pretty important reasons:

You can create and reuse modules without polluting the global namespace. The more polluted your global namespace is, the greater the likelihood of a function / variable collision. This means that you define a function called "foo", and another developer defines a function "foo" = one of the functions is overwritten.

You can structure your code into separate folders and files, and requirejs will load them asynchronously when necessary, so everything just works.

You can build for production. RequireJS comes with its own R.JS build tool, which will concatenate and guess your javascript modules in one (or several) packages. This will improve the speed of your page, as the user will have to make fewer script calls and load less content (as your JS fades away).

You can take a look at this simple demo project: http://bit.ly/requirejs (in cloud9ide).

To create your modules in one application, you only need to install the npm package and run the command: r.js -o build / build.properties.js

In development, all modules in separate files are just a good way to structure and manage your code. It also helps you in debugging (for example, an error in the line "Module.js line 17" instead of "scriptipts.js line 5373").

For production, you must use the build tool for concat and uglify javascript in one file. This will speed up page loading as you make fewer requests. Each request that you download slows down your page. The slower your page, the less points Google gives you. The slower the page, the more frustrated your users are. The slower your page, the less sales you get.

If you want to learn more about web page performance, check out http://developer.yahoo.com/performance/rules.html