ASP.NET 2.0マスターページの作成に伴うトラブル
全体的なレイアウトと設計の必要性のため、私たちは往々にしてマスターページを作成してウェブサイト全体の統一性を実現して、最近私は統一性の需要のため、もとのプロジェクト全体の単独のページをすべてマスターページにセットしました.しかし、エラーが発生しました.ここに記録しておくと、参考になります.
二、抽象モデル
ページ全体の内容が多すぎるので、私はこのページの中で最も本質的な問題を抽象化しました.
もとは単一ページで、ボタンでJSイベントをトリガーし、テキストフィールドに「()」を挿入していた.機能、実は現代コードは以下の通りです.
：
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title> －YJingLee</title>
<script. language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
</head>
<body>
<form. id="form1" runat="server">
<div>
<textarea id="txt" runat="server" name="txt"
rows="10" cols="50"></textarea>
<asp:Button ID="btnInsert" runat="server"
Text=" (_)" nClientClick="insert();"/>
<input id="btnInsert2" name="insert" nclick="insert();"
type="button" value=" (_)" runat="server"/></div>
</form>
</body>
</html>
上記のページは正常に使用できます.その後、テンプレート・ページを使用すると、次のコードが使用されます.
：
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default2.aspx.cs"
Inherits="Default2" Title=" －YJingLee" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script. language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
<div>
<textarea id="txt" runat="server" name="txt"
rows="10" cols="50"></textarea>
<asp:Button ID="btnInsert" runat="server" Text=" (_)"
nClientClick="insert();"/>
<input id="btnInsert2" name="insert" nclick="insert();"
type="button" value=" (_)" runat="server"/></div>
</asp:Content>
いてボタンを すと「Microsoft Jscript. エラー:'document.getElementById(...)」を します.これは が ですか?もとはよくて、どのようにマスターページを ってこの な が れますか? い っていたので、 と し って、やっと えを つけました・・・
、 を する
されたHTMLコードをよく てみましょう.
ページ:
：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title> －YJingLee</title>
<script. language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
</head>
<body>
<form. name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUKMTEzMjE5NDA0NWRkKlEH1jSXJkIbnUaP2d9Dra8LQEk=" />
</div>
<div>
<textarea name="txt" id="txt" rows="10" cols="50"></textarea>
<input type="submit" name="btnInsert" value=" (_)"
nclick="insert();" id="btnInsert" />
<input name="btnInsert2" type="button" id="btnInsert2"
nclick="insert();" value=" (_)" /></div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
value="/wEWBALVid/5DQKShrDCCQL5w9POBQL5w4vOBZPGqxUU/yvoKTqG8k+uG8YroGTv" />
</div></form>
</body>
</html>
マスターページを した に されるHTMLコードを てみましょう.
：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title> －YJingLee</title></head>
<body>
<form. name="aspnetForm" method="post" action="Default2.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUKLTEwMTY2NjE0OWRkADUETiohcorj2qXOE9M1qhFVw20=" />
</div>
<div>
<script. language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
<div>
<textarea name="ctl00$ContentPlaceHolder1$txt"
id="ctl00_ContentPlaceHolder1_txt" rows="10" cols="50"></textarea>
<input type="submit" name="ctl00$ContentPlaceHolder1$btnInsert"
value=" (_)" nclick="insert();" id="ctl00_ContentPlaceHolder1_btnInsert" />
<input name="ctl00$ContentPlaceHolder1$btnInsert2"
type="button" id="ctl00_ContentPlaceHolder1_btnInsert2"
nclick="insert();" value=" (_)" /></div>
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
value="/wEWBAKyga4JAtO59ZELApOT2tEDApOTwvAC83bfMO00kt0PYcRte7XQOsXBcFE=" />
</div></form>
</body>
</html>
が られたのか、ソースファイルコントロール のIDとHTMLファイルを するIDが していません.フォームfromのnameプロパティとidプロパティがaspnetFormになり、コントロールのidプロパティにctl 00_が もなく されました.ContentPlaceHolder1_ 、 にctl 00$ContentPlaceHolder 1$ も けられています.
わかりました. で「document.getElementById(...)」とヒントを えたわけです. かオブジェクトではない」というエラーで、ページが されるとIDが わります.
どうやって しますか?IDが わった 、JSコードidを のIDに します.コードは のとおりです.
：
function insert() {
document.getElementById(
"ctl00$ContentPlaceHolder1$txt").value=document.getElementById(
"ctl00$ContentPlaceHolder1$txt").value+"(__)";
return;
}
//
function insert() {
document.getElementById(
"ctl00_ContentPlaceHolder1_txt").value=document.getElementById(
"ctl00_ContentPlaceHolder1_txt").value+"(__)";
return;
}
はい、 は しましたが、 かもっと い がありますか? なぜですか?
は してみると、それは に されたクライアントidで、C# ControlのClientID を って、このように くことができます:txt.ClientID; txtは のコントロールのidで、 のClientIDは しく されたidです.txt.ClientIDはプログラムから り んだ に しいIDを した が いのではないでしょうか. コードは のとおりです.
：
function insert() {
document.getElementById("").value=document.getElementById("").value+"(__)";
return;
}
そして でForm["txt"]キーの を する があります.Requestに する があります.Form["]では、ページの を できません.IDを しようとするコントロールがユーザーコントロールであれば、ページを してClientIDを できるにもかかわらず、このオブジェクトが られないため、その を したり したりすることはできません. えば、 がしなければならないこのユーザーコントロールは、3つのDropDownListから されていますが、 は な (クライアントを す)を たいと っています.1つの えは、まず3つのDropDownListのClientIDを し、それからID 1を することです.value+ID2.value+ID3.value ですが、このようなユーザーコントロールを1ページに く がある は、ClientIDを する がありますか? らかにそうすると、 が くなり、 くのオブジェクトを しなければならず、エラーが しやすい.
、まとめ
このような は、 たちがプログラムを くときによく するように、「MasterPage、またはGridViewのテンプレート を した 、すべての IDが しない 」に するはずです. な ( えばMasterPage、またはGridViewのテンプレート を する)により、1つのコントロールの のIDはページを した のIDとは なることが い.コントロールクライアントIDを るためには、 したページからコントロールidを るには の3つの がある.(もちろん3つ をお めする) ：
document.getElementById("ctl00$ ID$ ID");
document.getElementById("ctl00_ ID_ ID");
document.getElementById("");
なぜかというと、 がまだその を く していないのか.NETメカニズムの は?