如何在母版页的内容页中使用 jQuery 函数？
Posted
技术标签:
【中文标题】如何在母版页的内容页中使用 jQuery 函数？【英文标题】：How do I use a jQuery function inside content page of the master page? 【发布时间】：2015-10-24 18:48:21 【问题描述】：我正在使用母版页进行登录。子页面内的登录表单需要以下方法才能激活：
<script type="text/javascript">
$(document).ready(function ()
$('#signinform').validate();
);
</script>
但由于signinform 在子页面内，我如何从母版页面调用它？我真的有其他可能直接从子页面调用它吗？
信息
我的网络应用规范：
ASP.Net Web 表单 .Net Framework 4.6Login.Master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Login.master.cs" Inherits="Web_WebApp.Login" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<title>Web - <%: Page.Title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="assets/global/css/style.css" rel="stylesheet">
<link href="assets/global/css/ui.css" rel="stylesheet">
<link href="assets/global/plugins/bootstrap-loading/lada.min.css" rel="stylesheet">
<%-- <asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>--%>
</head>
<body class="account separate-inputs" data-page="login">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<script src="assets/global/plugins/jquery/jquery-1.11.1.min.js"></script>
<script src="assets/global/plugins/jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="assets/global/plugins/gsap/main-gsap.min.js"></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/global/plugins/backstretch/backstretch.min.js"></script>
<script src="assets/global/plugins/bootstrap-loading/lada.min.js"></script>
<script src="assets/global/js/pages/login-v1.js"></script>
<script type="text/javascript">
$(document).ready(function ()
$('#signinform').validate();
);
</script>
</body>
</html>
Login.aspx（内容页面）
<%@ Page Title="Log In" Language="C#" MasterPageFile="~/Login.Master" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Web_WebApp.Account.Login" Async="true" %>
<%@ Register Src="~/Account/OpenAuthProviders.ascx" TagPrefix="uc" TagName="OpenAuthProviders" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<!-- BEGIN LOGIN BOX -->
<div class="container" id="login-block">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<div class="account-wall">
<i class="user-img icons-faces-users-03"></i>
<form id="signinform" runat="server" class="form-validation animated fadeIn">
<div class="form-signin">
<div class="append-icon">
<input type="text" name="name" id="name" class="form-control form-white username" placeholder="Username" required>
<i class="icon-user"></i>
</div>
<div class="append-icon m-b-20">
<input type="password" name="password" class="form-control form-white password" placeholder="Password" required>
<i class="icon-lock"></i>
</div>
<button type="submit" id="submit-form" class="btn btn-lg btn-danger btn-block ladda-button" data-style="expand-left">Sign In</button>
<div class="clearfix">
<p class="pull-left m-t-20"><a id="password" href="#">Forgot password?</a></p>
</div>
</div>
<div class="form-password">
<div class="append-icon m-b-20">
<input type="password" name="password" class="form-control form-white password" placeholder="Password" required>
<i class="icon-lock"></i>
</div>
<button type="submit" id="submit-password" class="btn btn-lg btn-danger btn-block ladda-button" data-style="expand-left">Send Password Reset Link</button>
<div class="clearfix">
<p class="pull-left m-t-20"><a id="login" href="#">Already got an account? Sign In</a></p>
<p class="pull-right m-t-20"><a href="user-signup-v1.html">New here? Sign up</a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</asp:Content>
感谢您为解决我的问题所做的努力。
【问题讨论】：
您的表单是否在 iframe 中？或者，我假设您的模板被编译为单个 HTML 文件，并且应该没有理由将 JS 放在母版页中来访问子级。 子页面到底是什么意思？ 不，它不在 iframe 内。该表单位于子页面内，其中包含用户名、密码和登录按钮。 @jfriend00 子页面 = 内容页面 您可以尝试在您的“子页面”上使用准备功能，例如 $('#child').ready，因为我可以理解您的子页面在同一个文件中 【参考方案1】：您可以在母版页中注册一个部分或ContentPlaceholder，也许在您的jQuery <script... 标记下方的页脚中，然后在内容页中使用该部分名称将内容注入到母版中。基本上，您创建另一个占位符，就像您为 MainContent 所做的那样
母版页：
...
<script type="text/javascript" src="BLAH/BLAH/jquery.js"/>
<asp:ContentPlaceHolder id="MyScripts" runat="server">
</asp:ContentPlaceHolder>
内容页面：
<asp:Content ContentPlaceHolderId="MyScripts" runat="server">
<script type="text/javascript">
$(document).ready(function ()
$('#signinform').validate();
);
</script>
</asp:Content>
但是，您的 jQuery 脚本包含似乎不起作用，很可能您在子文件夹中工作，并且应该将所有脚本更改为以 / 开头，以便它们相对于 Web 根目录，而不是您当前的文件夹。
【讨论】：
谢谢，我实际上使用的是 ASP.Net。你能说得更具体点吗？ 我喜欢你的方法，但我仍然收到同样的错误信息。 当我把内容放在主要内容之前我得到相同的jQuery错误，当我把它放在最后我得到以下错误：内容控件必须是内容页面中的***控件或引用母版页的嵌套母版页。 当我放在最后时，在我的第一个内容之后，我得到以下信息：0x800a1391 - JavaScript 运行时错误：'$' is undefined 该路径内的文件存在。运行前在 IE 上显示此错误：错误：'$' is undefined【参考方案2】：//运行时错误：'$'未定义
你需要包含 jQuery：http://learn.jquery.com/about-jquery/how-jquery-works/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
或者运行 jQuery.noConflict();在某处。试试这个
jQuery(document).ready(function ($)
$('#signinform').validate();
)
【讨论】：
【参考方案3】：首先，如果您看到错误$ is not defined，那么在您尝试使用它之前，您的页面中显然没有包含 jQuery。在页面的适当位置包含 jQuery 可能是您的全部问题。
如果您的“子页面”实际上只是主 HTML 页面中的一个模板（没有 iframe，没有弹出页面，只有一个实际的 HTML 页面），那么它就是一个 HTML 页面（内容在发送到浏览器作为一个 HTML 片段），如果 jQuery 已经加载到页面中，那么您可以使用：
$(document).ready(function ()
$('#signinform').validate();
);
只要在插入之前已经加载了 jQuery，就可以在页面中的任何位置。当页面被浏览器加载和解析完成时，$(document).ready() 调用将被触发，此时$('#signinform') 应该可以在表单中访问。
如果您的页面结构比这更复杂（例如使用 iframe 等嵌入式文档）或通过客户端 JS 动态加载某些内容，那么您必须详细描述其工作原理，然后我们才能提供建议如何知道何时加载。
另外，如果您在页面中看到 JS 错误，请准确描述您在错误控制台中看到的内容。
【讨论】：
快速问题：如果母版页已经包含另一个$(document).ready();，这种方法是否有效？在这种情况下，哪一个会起作用？ @jfriend00
并不复杂，应该如你所描述的那样简单。我的母版页是主模板/主题，内容页只是同一页面的一部分，其中包含一个带有用户名、密码和按钮的表单。
@AtanuRoy - 您可以拥有任意数量的 $(document).ready() 语句。当页面完成解析时，它们将按照它们最初运行的顺序被调用。
@KevinMaxwell - 你的评论指的是$ is not defined。听起来您在尝试使用 jQuery 之前没有加载 jQuery，这可能是整个问题。以上是关于如何在母版页的内容页中使用 jQuery 函数？的主要内容，如果未能解决你的问题，请参考以下文章
MVC 和 jQuery 验证，在哪里“编织”javascript 以及如何嵌入母版页？