Question

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

父页面Index.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加载问题，但我不明白为什么会发生这种情况。

请建议我解决此问题。

Answer 1

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

确保父视图中的代码如下所示：

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

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

另一种方法是将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>

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

Answer 2

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

因此，不要在主视图上与HTML内联：

@Html.Partial("YourCoolDynamicDashboard")

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

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

这项工作将允许您在主视图和局部视图中运行客户端JQuery代码。

部分视图问题 - 未定义jQuery

2 个答案: