堆棧內存溢出
  簡體   English   中英

如何在母版頁的內容頁面內使用 jQuery 函數？

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

 原文  2015-08-02 16:42:16  1   3    javascript/ jquery/ asp.net/ twitter-bootstrap/ webforms

問題描述

我正在使用母版頁進行登錄。 子頁面內的登錄表單需要以下方法才能激活：

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

但由於signinform在子頁面內，我如何從母版頁調用它？ 我實際上還有其他可能直接從子頁面調用它嗎？

信息

我的網絡應用程序規范：

  • ASP.Net Web 窗體
  • .Net 框架 4.6

登錄.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>

感謝您為我的問題找到解決方案所做的努力。

3 個解決方案

解決方案1
 1  2015-08-02 17:14:13

首先，如果您看到錯誤$ is not defined ，那么在您嘗試使用它之前，您的頁面中顯然沒有包含 jQuery。 在頁面中的適當位置包含 jQuery 可能是您的全部問題。

如果您的“子頁面”實際上只是 HTML 主頁面中的一個模板（沒有 iframe，沒有彈出頁面，只有一個實際的 HTML 頁面），那么它就是一個 HTML 頁面（內容在發送到瀏覽器之前全部合並為一段 HTML)，如果 jQuery 已經加載到頁面中，那么您可以使用：

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

只要在插入之前已經加載了 jQuery，您就可以在頁面中的任何位置。 當頁面完成加載並被瀏覽器解析后， $(document).ready()調用將觸發，此時$('#signinform')應該可以在表單中訪問。

如果您的頁面結構比這更復雜（例如使用 iframe 等嵌入式文檔）或通過客戶端 JS 動態加載某些內容，那么您必須詳細描述其工作原理，然后我們才能就如何知道提供建議加載時。

另外，如果您在頁面中看到 JS 錯誤，請准確描述您在錯誤控制台中看到的內容。

解決方案2
 1 已采納  2015-08-02 17:16:40

您可以在母版頁中注冊一個部分或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 根目錄，而不是您當前的文件夾。

解決方案3
 0  2015-08-02 17:23:09

//運行時錯誤：'$'未定義

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 我如何在母版頁的內容頁中調用javascript函數 我如何使用相關的 jquery 函數將內容從另一個頁面加載到頁面中，使其工作（滑塊） 如何在header.master頁面中使用JQuery 如何使用 java 腳本從母版頁設置內容頁面上的元素樣式 如何使用 jQuery/AJAX 在 HTML div 內加載 html 頁面內容？ 如何從母版頁中的頁面中找到特定類型的所有控件？ 主頁和內容頁面中的pageLoad函數 如何將JavaScript添加到母版頁？ 如何為內容頁面自定義母版頁代碼 如果使用jQuery在母版頁中呈現控件，如何獲取控件ID？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM