2022年4月29日 星期五

[研究][ASP.NET]MasterPage中ContentPlaceHolder內的 JavaScript「顯示密碼」功能

[研究][ASP.NET]MasterPage中ContentPlaceHolder內的 JavaScript「顯示密碼」功能

[研究][ASP.NET]JavaScript 抓取 ContentPlaceHolder 中 ASP.NET 控制項的 ID

2022-04-27

環境:Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#

ASP.NET控制項(Control)的 ID,如果是在 MasterPage 架構的 ContentPlaceHolder1 中,在瀏覽器中看到的 ID 變更。

********************************************************************************

Site1.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.Site1" %>

<!DOCTYPE html>

<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

Default.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master"
    AutoEventWireup="true" CodeBehind="Default.aspx.cs"
    Inherits="WebApplication1.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script>
        function ShowPW() {
            var x = document.getElementById("ContentPlaceHolder1_TextBox1");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:TextBox ID="TextBox1" required="required" TextMode="Password" 
        AutoComplete="Off" runat="server"></asp:TextBox>
    <br />
    <asp:CheckBox ID="CheckBox1" Text="顯示密碼" OnClick="ShowPW()" runat="server" />
    <br />
</asp:Content>


瀏覽器看到的 HTML Source

原來在 .aspx 中的 ID 是 TextBox1,現在變成了 ContentPlaceHolder1_TextBox1,所以 JavaScript 要抓取時,不能用 TextBox1,要用 ContentPlaceHolder1_TextBox1。

另外很多情況下 HTML 元素 (element) 的 ID 和 name 是相同的,但此時不同,不要錯用了 name 的 ctl00$ContentPlaceHolder1$TextBox1

<!DOCTYPE html>

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>

</title>
    <script>
        function ShowPW() {
            var x = document.getElementById("ContentPlaceHolder1_TextBox1");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }
    </script>
</head>
<body>
    <form method="post" action="./Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="zAE3P/7wt0M3uv/5llCSAr3yf1PYvO8mEmfl6tswaGanRIG/x4nfITMOV5YGUgeLMHwaNhnfWljHJTTBC2TZ45KhDzFigI1gv5UL8n6PYkKT/xzB4XP6NCz1FMeNwvEQ4ROBEG2cz4Ldmpz+AjDxzMXzThdSyXoXdkdLqMgJyBYupUKulNKCHi1ahgWWBU3s" />
</div>

<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="ESsA+ggMfjTJUH5bZ2Ix51c3ZJSrS30FLzobHXB//9f+pkaGPz/XpxMB0qtWzrGdAYXQO15QnOIwvAsrW3xORSbmc5iKMedbRkWkZzOg2aDJlloKooaor6L1rL71cB/6eP3190y1XdCMp7erjYcfGQ==" />
</div>
        <div>
            
    <input name="ctl00$ContentPlaceHolder1$TextBox1" type="password" id="ContentPlaceHolder1_TextBox1" required="required" AutoComplete="Off" />
    <br />
    <input id="ContentPlaceHolder1_CheckBox1" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" onclick="ShowPW();" /><label for="ContentPlaceHolder1_CheckBox1">顯示密碼</label>
    <br />

        </div>
    </form>
</body>
</html>



(完)

相關

[研究][ASP.NET]MasterPage中ContentPlaceHolder內的 JavaScript「顯示密碼」功能
[研究][ASP.NET]JavaScript 抓取 ContentPlaceHolder 中 ASP.NET 控制項的 ID
https://shaurong.blogspot.com/2022/04/aspnetmasterpagecontentplaceholder.html

[研究][ASP.NET]登入畫面表單美工設計(一)
https://shaurong.blogspot.com/2022/04/aspnet.html

[研究][JavaScript]切換顯示和隱藏密碼
https://shaurong.blogspot.com/2019/02/javascript.html

[研究][JavaScript][C#][ASP.NET] Select2 v4.0.3 - jQuery Plugin 安裝 - 讓 DropDownList 可以輸入關鍵字,即時過濾顯示下拉選項
https://shaurong.blogspot.com/2017/01/caspnet-select2-v403-jquery-plugin.html


沒有留言:

張貼留言