Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Asp.net MVC - load JavaScript files

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 ?

like image 774
Gab Avatar asked Mar 07 '26 21:03

Gab


2 Answers

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.

like image 177
Robert Bucur Avatar answered Mar 10 '26 11:03

Robert Bucur


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({
        ....
    });
}
like image 29
Ashwini Verma Avatar answered Mar 10 '26 10:03

Ashwini Verma



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!