如何在母版页的内容页中使用 jQuery 函数？

Question

我正在使用母版页进行登录。子页面内的登录表单需要以下方法才能激活：

<script type="text/javascript">
              $(document).ready(function () {
                  $('#signinform').validate();
              });
</script>

但是由于 signinform 在子页面内，我如何从母版页面调用它？我真的有其他可能直接从子页面调用它吗？

信息

我的网络应用程序规范：

ASP.Net 网络表单
.Net Framework 4.6

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

感谢您为我的问题找到解决方案所做的努力。

Answer 1

首先，如果您看到错误 $ is not defined，那么在您尝试使用它之前显然您的页面中没有包含 jQuery。在您页面的适当位置包含 jQuery 可能是您的全部问题。

如果您的 "child page" 实际上只是主 HTML 页面中的一个模板（没有 iframe，没有弹出页面，只有一个实际的 HTML 页面），那么它就是一个 HTML 页面（内容在作为 HTML 的一部分发送到浏览器之前全部合并），如果 jQuery 已经加载到页面中，那么您可以使用：

$(document).ready(function () {
    $('#signinform').validate();
});

只要在插入之前 jQuery 已经加载，页面中任何您想要的位置。当浏览器完成加载和解析页面时，将触发 $(document).ready() 调用，此时应该可以在表单中访问 $('#signinform')。

如果您的页面结构比这更复杂（例如使用 iframe 等嵌入式文档）或通过客户端 JS 动态加载某些内容，那么您必须先详细说明其工作原理，然后我们才能关于如何知道何时加载的建议。

此外，如果您在页面中看到 JS 错误，请准确描述您在错误控制台中看到的内容。

Answer 2

您可以在母版页中注册一个部分或 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 脚本包含似乎不起作用，很可能您在子文件夹中工作，并且应该将所有脚本更改为以 / 开头，以便它们是相对于网络根目录，而不是您当前的文件夹。

Answer 3

//运行时间错误：'$'未定义

您需要包括 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();
 })

如何在母版页的内容页中使用 jQuery 函数？

How do I use a jQuery function inside content page of the master page?

javascript

asp.net

jquery

webforms

twitter-bootstrap

信息

Login.Master

Login.aspx（内容页）