Develop Reference

Where to put script references for widgets (partial page)

Working on MVC5 asp.net website.
I have a "dashboard" page that allows the user to place pre-defined "widgets" on the page. These widgets are simply MVC 5 partial pages (Razor). I really wanted each widget to be "self-contained" so all references, scripts, etc... are within the widget's cshtml file. BUT, the main "dashboard" page also needs certain references to jQuery, bootstrap, etc...
Of course, doing this, I could encounter conflicts, duplicate references (one from main page, one from widget), etc....
Question: What is the preferred method for this scenario? Should references like jQuery and bootstrap be JUST on the main "dashboard" page? What about javascript or jQuery code that is in the widget itself? Should this remain in the widget? If so, will I encounter the issue where it doesn't have jQuery defined (because it's in the parent page), etc...?
Any thoughts on this would be appreciated?
Thanks!
**** UPDATE ****
TO further clarify: If I put the scripts, references, etc (specific to the widget) at the bottom of the widget, then when the partial page is rendered on the main page, the scripts, etc.. are not rendered at the bottom of the main page. This causes my code to act funny because of the order that things are rendered. This is one reason I ask this question. Hope this makes sense. Thanks.

Put the script code and references that are global to the application , that are used everywhere and that are not specific to a widget in the most outer page.
What i would do, is i would bundle all my script references in one place and add that bundle link to the dashboard page, this makes your code cleaner and your page will have less external references thus a better client side performance.

.Net MVC how to add scripts to individual views

I was wondering if there is a way to add JavaScript files to individual views if I am using a wrapper .cshtml file.
Basically I have a wrapper cshtml file called _Layout that I am using for all my front end views. It basically has the <header> section and the HTML for my header/navigation and the footer. It also contains references to all the JavaScript files I need on each page after the footer.
However, on my contact view I want to use another JavaScript file, but I don't want to add it to the wrapper as that will add it to every single view.
Is there anyway to get add the file to the wrapper using a conditional statement - i.e. if Contact view then reference the contact JS file?

You can use Razor's section. It allows you to create "sections" in your layout page, and then add to them from your view pages.
You might already have a section "Scripts" declared in your layout page. If not, all you need to do is add #RenderSection("Scripts", required: false) in your layout, immediately after your other script tags. This creates a section called "Scripts" which we will add to later.
Then, you can add to that section by adding the following to your individual views:
#section Scripts {
<script type="text/javascript" src="..."></script>
}
You can do this with other elements as well; you aren't limited only to scripts. You'll just have to add another #RenderSection("SectionName", required: false) to your layout page.
You might also be interested in reading Scott Gu's slightly dated (2010) blog post on Layouts and Sections with Razor.

Add Javascript to header section of an ASP.NET/MVC web page from a view with bundling?

If found this Stack Overflow page that shows you how to add a Javascript include to an ASP.NET/MVC (Razor) view, so that it ends up in the HEAD section of the web page:
Add CSS or JavaScript files to layout head from views or partial views
It works great. But I'm wondering if there is a way to do it in a way that takes advantage of bundling? I found this SO post that says it isn't possible and to use something called Cassette, but it's from 2012 so I'm wondering if there's a way to do it now native to ASP.NET/MVC/Razor:
MVC Bundles: How to add assets in views and have them render combined with the main layout page bundle
I found this SO post that talks about adding new bundles dynamically but it appears to add them only to the BODY section, not the HEAD:
MVC Bundles: How to add assets in views and have them render combined with the main layout page bundle

Your comment has helped me understand what you want to do now. As far as rendering out bundles from a view, it works the same way the answer to your first question.
First, make a bundle for those file(s) that you want.
BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/mySpecialBundle").Include(
"~/Scripts/notOftenUsedScript.js",
"~/Scripts/someOtherScript.js"));
Next, in your layout, define a section where you want to be able to render out the JavaScript bundle.
_layout.cshtml
#RenderSection("scripts", required: false)
Now, in any view that you want to render the special bundle, reference this section and use the same syntax that you would in the layout page for bundle rendering.
ExampleView.cshtml
#section scripts{
<!---Test section rendering-->
#Scripts.Render("~/bundles/mySpecialBundle")
}
The #Scripts.Render and #Styles.Render will work from any razor page in your application. Using the section allows us to control where the output from our view page will land in the master page.
With that said, if the JS is truly lightweight, then after the first time your user hits a page with the special bundle, it should be cached by their browser. So, the performance hit from just having this in your layout all the time would probably be minimal the first page hit and non-existent for each page hit afterwards.

MVC3 Move Validation Blocks

I'm attempting to place all JavaScript at the bottom of a page. If I move jquery to the bottom it breaks validation on the page. Is there a way to move validation to the bottom of the page.

No, jQuery must be at the top of the page, but most everything else can come after it.

The best practice is to put all of your styles at the top of the page and all of your scripts at the bottom of the page. You will need to put the references to your JavaScript files above your page specific JavaScript.
Its easy to do in MVC3 if you use helper methods.
The process goes like this:
Create helper methods for storing the scripts in the ViewContext
Add scripts and references to JavaScript files in the ViewContext in any of your views and partial views
Render the scripts at the bottom of the page in the order you need them
If this seems like a lot, take a look at this post:
MVC executing view code before layout code and ruining my script order
The helper methods simplify what would otherwise be very messy code. Good luck!

ASP MVC javascript lazy loading

in view, i have at the bottom many javascript and jquery code, and i dont like it, so im placing all scripts into one ascx file, and make partial rendering like:
<!--<%Html.RenderPartial("~/Views/Home/StationLogics.ascx"); %>-->
of this ascx file with scripts. So, is there any better way?
cant place it to master page, cause not always i need this scripts, if user get some privilage, he can use some scripts, if not - others

it mat not be what u intended to know but i think that u can place all ur javascript and jquery code in a js file like in yourjavascript.js file and place a reference of js file in your view or the master page page file that the view is inheriting e.g.
<script src="<%=ResolveUrl("~/scripts/yourjavascript.js") %>" type="text/javascript"></script>

You could add your common JavaScript files in the head element of a Master page, and then let your pages reference that master page using the <%# Page %> directive, for example:
<%# Page MasterPageFile="/Views/Shared/Site.Master" %>
Now, all you have to do is update the scripts in your master page, and pages referencing that master page will have the scripts as well.
However, if your scripts are too specific to include in the master page, then your solution is probably fine.