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
– Farshid Shekari, Commented Aug 3, 2016 at 6:15
What is in your register.js file. It referencing elements that are loaded dynamically, in which case are you using event delegation? — user3559349
– user3559349, Commented Aug 3, 2016 at 6:20
And @RenderSection() is not supported in partial views (only the main view) — user3559349
– user3559349, Commented Aug 3, 2016 at 6:22

Sunil Kumar · Accepted Answer · 2016-08-03 06:23:42Z

4

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

answered Aug 3, 2016 at 6:23

Sunil Kumar

3,2522 gold badges23 silver badges34 bronze badges

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

1 Comment

user3559349 Over a year ago

Seriously, all that code just because the code in the script does use event delegation?

Community · Accepted Answer · 2017-05-23 11:45:33Z

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, 2017 at 11:45

CommunityBot

11 silver badge

answered Aug 3, 2016 at 6:23

MRebati

59916 silver badges30 bronze badges

1 Comment

Sunil Kumar Over a year ago

The OP already mention that he is using @section Scripts{} on view page not in partial view. Thanks

James Gould · Accepted Answer · 2018-12-19 10:08:31Z

0

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.

answered Dec 19, 2018 at 10:08

James Gould

4,7582 gold badges30 silver badges57 bronze badges

Collectives™ on Stack Overflow

Load js file into partial view

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related