Asp.net MVC - 加载 JavaScript 文件答案

【问题标题】：Asp.net MVC - load JavaScript filesAsp.net MVC - 加载 JavaScript 文件
【发布时间】：2014-10-02 18:38:37
【问题描述】：

在我的 asp.net MVC 网站中，我有一个布局文件，用于加载我的 JavaScript 文件：

<!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>

然后，我有一个使用布局的主页：

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

在此页面中，我将 div 的内容替换为部分视图：

 $.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");
 }
 });

我的部分观点：

<div data-role="header">

</div>

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

</div>

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

</div>

问题是，在这个局部视图中，我必须重新加载Jquery移动脚本，否则它不起作用......（页眉和页脚显示不正确）

你知道为什么吗？

【问题讨论】：

阅读这篇文章：gajotres.net/…，以便了解 jQuery Mobile 如何处理 JavaScript 初始化。

标签： javascript asp.net-mvc jquery-mobile

【解决方案1】：

你有一个文件名BundleConfig，这个文件显示你加载了哪些脚本。该文件应包含：

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

然后检查您的布局，您的文件必须包含：

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

祝你有美好的一天。

【讨论】：

感谢您的回复@marcin-navialek 无法记住他们在 mvc 中加载的位置。你为我节省了一些时间！

【解决方案2】：

你应该使用@section Scripts{}

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

在局部视图中写下脚本部分的所有代码

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

【讨论】：

好的，谢谢，我试试。对不起，如果这是一个简单的问题，我是 asp.net mvc 的初学者...

【解决方案3】：

我会在加载整个页面后放置 javascript 引用：

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

【讨论】：

【解决方案4】：

在将新的 html（本例是您的部分）附加到页面后，您必须附加相关脚本。我猜是这样的：

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

还要确保此脚本获取所有必备脚本。

【讨论】：