部分视图问题 - 未定义 jQuery答案

【问题标题】：Partial view issue - jQuery not defined部分视图问题 - 未定义 jQuery
【发布时间】：2014-11-12 17:33:39
【问题描述】：

我在 ASP.NET MVC 5 项目中遇到 jQuery 加载问题。我正在尝试加载部分视图，所以我使用了

@Html.Action("GetView", "Home")

局部视图包含一些 jQuery 函数。加载时显示 jQuery 未定义消息，但 jQuery 正在主页面上工作。

所以我尝试了其他两种方法来加载局部视图，这些方法没有 jQuery 问题

@Html.Partial("_viewname")

@Ajax.BeginForm()

家庭控制器

public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetView(string id = "")
        {
           return PartialView("_ViewName");

        }
    }

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("Head", false)
</head>
<body>
    <section >
        <div>
            @RenderBody()
        </div>

        <div>
            @RenderSection("Sidebar", false)
        </div>

    </section>

    <!-- jQuery -->
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("Scripts", false)
</body>

父页面索引.cshtml

@{
    ViewBag.Title = "Admin";
}

<div id="main_content">
    @Html.Action("GetView", "Packages")
</div>

部分视图_view.cshtml

<div class="row">
    <div class="col-sm-12">
        <select>
            <option>1</option>
            <option>2</option>
        </select>
    </div>
</div>


<script type="text/javascript">

    $(document).ready(function () {
        $("select").addClass("form-control");
    });

</script>

我认为有一些 jQuery 加载问题，但我不明白为什么会在特定操作中发生这种情况。

请建议我解决这个问题。

【问题讨论】：

包含局部视图渲染的页面在哪里？
能不能分部分视图和父视图代码？
包括你的部分脚本
加上检查jquery是否正在使用firebug加载
您的 jQuery 正在呈现在正文的末尾，请确保您的局部视图中的所有脚本都在您的 Scripts-section 中，否则当您尝试使用它时 jQuery 尚未加载。

标签： jquery asp.net-mvc asp.net-mvc-3 asp.net-mvc-4 asp.net-mvc-5

【解决方案1】：

您的视图（不是部分视图）需要将代码包含在 @section Scripts 块中。正如您所指出的，@sections 在部分视图中不起作用。

确保您在父视图中的代码是这样的：

@section Scripts{
    <script>
         // DOM ready handler if needed
         $(function(){
              // Your Javascript/jQuery code here
         });
    </script>
}

@section 指令告诉视图构建器在母版页中插入此块的位置。使用 Javascript，您需要它始终位于 Scripts 部分，否则它将在声明的位置内联呈现。

替代方法是将 jQuery 包含移动到母版页中 RenderBody() 调用之前：

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("Head", false)
    <!-- jQuery -->
    @Scripts.Render("~/bundles/jquery")
</head>
<body>
    <section >
        <div>
            @RenderBody()
        </div>

        <div>
            @RenderSection("Sidebar", false)
        </div>

    </section>

    @RenderSection("Scripts", false)
</body>

与使用捆绑包相关的浏览器缓存意味着只有第一个页面加载在您的网站上效率会有点低。

【讨论】：

是的，我也在考虑在头脑中使用 JS，但我正在尝试找到解决方案（如果有的话）！
@AskQuestion：你是对的（忘记了）。已更新答案。您需要将代码移动到包含部分渲染的视图或向上移动 jQuery（两个选项都已列出）。
我正在尝试提高页面加载性能，这就是我在页面底部使用 JS 的原因
单独捆绑（以及相关的浏览器缓存）将提高性能，超出将 jQuery 放在最后的效果，但另一种选择是将代码放在您的视图中。
如果局部视图包含动态脚本来执行诸如加载需要在局部视图上运行脚本的 d3.js 图表之类的操作，则此解决方案将不起作用。对这种情况有什么建议吗？

【解决方案2】：

如果您必须在部分视图上运行脚本，例如从 AJAX 调用调用部分视图时返回动态创建的内容，您应该会发现问题中描述的问题实际上只发生在初始父页面上加载。如果是这种情况，您可以通过不在主视图上加载部分来解决此问题。相反，您可以使用 JQuery AFTER 加载初始页面加载。

所以，不要在主视图上与 HTML 内联：

@Html.Partial("YourCoolDynamicDashboard")

在 .js 文件或主视图的 javascript 标记中执行此操作：

$(document).ready(function () {
      $.get("/YourController/YourCoolDynamicDashboard", [<... data goes here...>], function (result) {
            $("#YourDashboardContainer").html(result);    
      });
});

此解决方法将允许您在主视图和部分视图中运行客户端 JQuery 代码。

【讨论】：

【解决方案3】：

document.addEventListener("DOMContentLoaded", function() {
   //Define Jquery here
});

这对我有用

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。