I'm new to ASP.NET MVC and was wondering where JS functions for the views go. I have a table element in a view that displays the #RenderBody part of _Layout, and in it's th elements, I have -
<th id="one" oncontextmenu = "return menu(this)">label one</th>
Where should the function main(..) be located? Can it be in the script tag on the _Layout page or are individual view pages allowed to have their own script tags where this should go?
I've worked in WebForms before, so moving to MVC, I'm having trouble visualizing how to put all the pieces together. Help please!
Once you defined your script in your layout page u can use it anywhere else.there is no limitation in calling javascrip function cross-view.
It can be in the Same view file surrounded by a script tag
It can be in the Layout.cshtml file surrounded by script tag
It can be in a external javascript file referred in the same view
It can be in a external javascript file referred in the
Layout.cshtml view
Layout.cshtml works similar to Master page. so whatever you include there will available to all the views which uses the layout.
Related
In an ASP.NET Core app, I've a dashboard with widgets. Every widget has its own PartialViews, so the full page is generated in the following way:
-Layout.cshtml
--Dashboard.cshtml
--- Widget1.cshtml
--- Widget2.cshtml
Following best practices according to fast page load times, JavaScript is loaded before the closing </body> tag in Layout.cshtml. After that, there is a section for custom JS, which I commonly use to initiate objects on page load. So this section looks like this:
<script asp-append-version="true" type="text/javascript" src="~/clientscript/page.min.js"></script>
#RenderSection("Js", required: false)
In my Views, which are using the Layout.cshtml as layout (in this example, its Dashboard.cshtml), I can define a section like
#section Js {
// Js Code here
}
which is rendered after the script tag containing all script files. So I can be sure, that all dependencies like jQuery or custom classes are avaliable here.
But I also need to do this in widgets like Widget1.cshtml for example. The problem is: I load the PartialView Widget1.cshtml in Dashboard.cshtml. In the documentation is written, that this is not possible:
If you declare a Razor section in a partial view, it will not be visible to its parent(s); it will be limited to the partial view.
But that's exactly what I need. Is there a way to work around this limitation? Shortly, the goal is to inject JavaScript from a PartialView to the LayoutView, with an regular View between them.
The only way I know is the usage of setInterval() with a low interval like 50ms, and check there if jQuery or some of my custom class is defined in a loop until they are. Its a JS solution yes. But it makes it possible to include the script-block directly in the PartialView without making usage of sections. It fits well when you depend on a single variable like jQuery.
But I need to wait for custom classes to get loaded. They're included after jQuery. So writing a generic function like waitForTypeLoaded(type, callback) is not possible. It would cause me to write always the raw setInterval() code, which seems not a smart solution for me.
Something I did to get my scripts to run after Jquery was done loading was in my Partial Views and View Components I used the "DOMContentLoaded" event to load all my jQuery js script after the page was done loading. That way I could defer the Load of jQuery and Still Have jQuery code on my pages.
<script>
window.addEventListener('DOMContentLoaded',
function() {
$('body')....
});
</script>
Your problem can be solved as mentioned in my answer to this post:
How to render scripts, generated in TagHelper process method, to the bottom of the page rather than next to the tag element?
To sum up, you can create a pair of tag helpers, one that can be located in a partial view and just stores its content in a temporary dictionary, and the other that renders the content at the appropriate position (e.g. in the layout page). I use it extensively to render small dynamically created scripts as the final scripts of the body.
Hope it helps.
Honestly, I would make one step back and look at architecture once again if you have such dilemmas.
Why not add to required scripts which will be used on a couple of views/partial views to the main layout? In ASP.NET MVC you can use bundling mechanism (or you can write our own) - minify and bundle them with other required. It won't be heavy...
Your approach looks like unnecessary complicated.
I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej
It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array
I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:
I have a menu widget that I am trying to include on multiple pages. I have tried putting them in one php file and using php include. But the script part is being inserted right into the middle of the HTML and it comes before jQuery (at the bottom of the page) so it doesn't work.
How do I put the script part of the widget into the proper place (at the bottom of the page) while at the same time keeping the HTML and script together (in a file)?
I have a partial view that is loaded via an ajax call. Inside that partial, I have a textarea that is modified by a script. The script is used in other places across the site and is referenced in the _layout page...
<script src="~/Scripts/ckeditor/ckeditor.js"></script>
The script isn't working unless I place it in the partial view.
Its a ckeditor script for what its worth...
http://docs.ckeditor.com/#!/guide/dev_installation
This is not specific to this script though - it seems any script that needs to fire onload will fail on a run-time loaded partialview.
I would think that I should leave the script in a universal location like _layout rather than place it both in the _layout and add it to every partial its needed in.
Any ideas?
In my case, the script works by applying a class to a textarea...
#Html.TextAreaFor(model => model.business.act_comments, new { #class="ckeditor" })
When i click on a Ajax.ActionLink, which displays a partial view, why does none of the javascritp associated with the partial view fire? This previously all worked before when I used Html.ActionLink. I have a series of scripts referenced in master page, which include $document.Ready functions. I have also tried added the script into the partial views themselves but they still don't fire. Any ideas?
javascript code dynamicly loaded into a div doesnt get recognised as executable code.
put the code in a function in a sepperate .js file, load this in your site.master and start executing by adding the
new AjaxOptions { oncomplete="myJavascriptFunction" }
to your Ajax.Actionlink