Load js file into partial view

Question

I have a layout and a view and a partial view. I used my layout in view and in view I load partial view with ajax into view. I used @RenderSection("Script", required: false) in my layout for loading my validation js file into partial view with this statement:

@section Script{
    <script src="~/Content/js/register.js"></script>
}

but after running my project and get view source I saw that file still doesn't load to this page.Then I put @section Script{ <script src="~/Content/js/register.js"></script> } in my View in this way file loaded but any of validation don't run. But when I copy script file code into partial view they are running. Now I want know why when I used file don't run my scripts?

Thanks!

No, After success request I put result into a div like $('#divreg').html(data); — Farshid Shekari, Aug 03 '16 at 06:15
What is in your `register.js` file. It referencing elements that are loaded dynamically, in which case are you using event delegation? — , Aug 03 '16 at 06:20
And `@RenderSection()` is not supported in partial views (only the main view) — , Aug 03 '16 at 06:22

score 4 · Accepted Answer · answered Aug 03 '16 at 06:23

You can refer following code to render your script:

function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

In your case you have to use this function like this:

After your success request:

$('#divreg').html(data);
loadScript("~/Content/js/register.js", function(){
    //initialization code
});

Hopefully it resolves your issue.

Thanks

Happy coding :)

Seriously, all that code just because the code in the script does use event delegation? — , Aug 03 '16 at 07:49

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

you can not use @section Scripts{} in your partial View. It changes nothing and does not render. you'd better use the script file without Section Helper.

Read more: Injecting content into specific sections from a partial view ASP.NET MVC 3 with Razor View Engine

edited May 23 '17 at 11:45

Community

1
1

answered Aug 03 '16 at 06:23

MRebati

591
14
29

The OP already mention that he is using `@section Scripts{}` on `view page` not in `partial view`. Thanks – Sunil Kumar Aug 03 '16 at 06:26

score 0 · Answer 3 · answered Dec 19 '18 at 10:08

To provide an update to this question, this is currently how we do this internally in Razor partials:

Button click is fired, partial is rendered in parent view
The partial view has it's own segment of js inside either a file with a script src=".. tag or locally inside <script> tags
Similar to document.ready, an IFFE is used to immediately invoke a series of events to load JS widgets etc held within the partial.
Partial view loads JS correctly.

An example IFFE for this would be:

<script>
    function ShoutAtMe(str) {

        alert(str)

    }

    (_ => {
        ShoutAtMe("HELLO")
    })();
</script>

This script block would be within the Partial.

Load js file into partial view

3 Answers3