Asp.net MVC - load JavaScript files

Question

In my asp.net MVC website, I have a layout file where I load my JavaScript files :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My title</title>
@Styles.Render("~/Content/css")

</head>
<body>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jquerymobile")
    @RenderSection("scripts", required: false)

    <div data-role="page" data-theme="a" id="home">
        <div id="divPartialView">
            @RenderBody()
        </div>
    </div>
</body>

Then, I have a main page that use the layout:

 @{
   Layout = "~/Views/Shared/_LayoutBase.cshtml";
 }

In this page, I replace the content of my div by a partial view :

 $.ajax({
 url: '@Url.Action("MyPage", "Home")',
 data: { myVariable: "variable"},
 cache: false,
 type: "POST",
 dataType: "html",
 success: function (data) {
     $("#divPartialView").html(data);
 },
 error: function () {
     alert("error");
 }
 });

My partial View :

<div data-role="header">

</div>

<div data-role="content" id="MainContent">

</div>

<div data-role="footer" data-position="fixed">

</div>

The problem is that in this partial view, I have to load the Jquery mobile scripts again, otherwise it doesn't work... (the header and footer doesn't display correctly)

Do you have an idea why ?

Read this article: gajotres.net/… so you can learn how jQuery Mobile handles JavaScript initialization. — Gajotres
– Gajotres, Commented May 19, 2014 at 8:43

Marcin Nabiałek · Accepted Answer · 2014-10-02 10:38:37Z

2

You have a file name BundleConfig, this file show you what scripts you load. This file should contain:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*"));

After that check your layout, your file must contain:

@Scripts.Render("~/bundles/jqueryval")

Have a good day.

edited Oct 2, 2014 at 10:38

Marcin Nabiałek

112k43 gold badges271 silver badges299 bronze badges

answered Oct 2, 2014 at 10:19

Robert Bucur

397 bronze badges

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

1 Comment

Mike Over a year ago

Wanted to thank you for your response @marcin-navialek couldnt remember for the life of me where they loaded in mvc. You saved me some time!

Ashwini Verma · Accepted Answer · 2014-05-19 08:31:24Z

1

You should use @section Scripts{}

<body>
    ...
    //should bottom of body tag.
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jquerymobile")
    @RenderSection("scripts", required: false)
</body>

In partial view write all code under Scripts section

@section Scripts {
    $.ajax({
        ....
    });
}

answered May 19, 2014 at 8:31

Ashwini Verma

7,5257 gold badges39 silver badges56 bronze badges

1 Comment

Gab Over a year ago

Ok thanks, I'll try it. Sorry if it was a simple question, I'm a beginner in asp.net mvc...

Snake Eyes · Accepted Answer · 2014-05-19 08:34:47Z

0

I would put javascript references after loading entire page like:

<div data-role="page" data-theme="a" id="home">
        <div id="divPartialView">
            @RenderBody()
        </div>
</div>

...     

     <!-- finally here -->
     @Scripts.Render("~/bundles/jquery")
     @Scripts.Render("~/bundles/jquerymobile")
     @RenderSection("scripts", required: false)
   </body>
</html>

answered May 19, 2014 at 8:34

Snake Eyes

16.8k39 gold badges120 silver badges235 bronze badges

Comments

Md Nazmoon Noor · Accepted Answer · 2014-05-19 09:05:45Z

0

You have to append relative scripts after you append new html (this case your partial) to the page. I'm guessing something like below:

...
success: function (data) {
     $("#divPartialView").html(data);
     $("#divPartialView").append('<script src="jquery.mobile.js" type="text/javascript"></script>');
 },
...

also make sure this script gets all the pre-requisite scripts.

answered May 19, 2014 at 9:05

Md Nazmoon Noor

3,3271 gold badge27 silver badges30 bronze badges

Collectives™ on Stack Overflow

Asp.net MVC - load JavaScript files

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related