ASP.NET jQueryでコントロールIDがAutoIDになってしまう対策

Question

jQuery初心者です。よろしくお願いします。
Webアプリを開発しています。

DB:MySQL
サーバーサイド：C#
クライアントサイド：JavaScript(ほぼjQuery)
開発環境：ASP.NET (MVCではない)

前提・実現したいこと

jQueryでASP.NET上のHTML/CSSを変更したい。
ID名が変わってしまう対策を知りたい。(IDがAutoIDになってしまう問題）

発生している問題・エラーメッセージ

ASP.NET上ではコントロールのID名やNAMEが変わってしまいますが、
一般的にはどういう対処をしているのでしょうか。

たとえばIDをStaticにするなどの対応が考えられますが、ネット上では特にそのような話に言及している資料が少ないように感じました。
また、ハマりそうな部分であるにも関わらず、あまり資料やQAがないのは他の簡単な対策があるのではないか。と考えております。
IDをStaticにしているようなコードではなく、さも当たり前のようにASP.NET上のコントロールIDをjQuery上で使っているので。

また、チェックボックスの一括選択/解除などのときに、NAMEを使うサンプルがあります。
NAMEも固定することができるのでしょうか？
（サンプルではそこらへんが全て端折られており、全く違うところで詰まってしまい、なかなか勉強が進みません・・・）

試したこと

・IDをStatic or Inheritにする。
⇒確かにこれで動きますが、全部のコントロールにこれをするのは、漏れが発生しそうで怖いです。どこかで一括指定できればまた違うと思います。
また、NAME指定するようなサンプルが使えず困ってます。

質問内容

重複しますが、知りたい質問内容をまとめました。

・一般的なチーム(企業)開発として、IDがAutoIDになってしまう対策を知りたい。
(Staticにすると衝突が起きるので、Inheritが普通？）

・NAMEを固定する方法を知りたい。
(ClientID Modeがあるのに、NAMEを固定するモードがない？）

Answer 1

ASP.NET Web Forms アプリのサーバーコントロールが html に変換される際、サーバーコントロールに付与した ID と html コードの id が異なることがあるので、例えば $("#TextBox1") では jQuery オブジェクトが取得できなくて困っているという話ですよね？

であれば、対処方法として以下の記事が参考になると思いますので、読んでみてください。

Control.ClientID と Html.IdFor
http://surferonwww.info/BlogEngine/post/2017/02/19/control-clientid-and-html-idfor.aspx

記事に書いてありますが、<%=TextBox1.ClientID%> というようにコード表示ブロックを使って、インラインのスクリプトに TextBox1 が HTML 要素に変換された時の id を埋め込むことができます。

ASP.NET MVC では、MVC4 以降であれば Html ヘルパーに IdFor メソッドが用意されていて、それを利用することができます。その説明も上に紹介した記事にあります。

【追記】

「質問内容」に直接答えてなかったので追記します。

一般的なチーム(企業)開発として、IDがAutoIDになってしまう対策を知りたい。(Staticにすると衝突が起きるので、Inheritが普通？）

デフォルトでは「IDがAutoIDになってしまう」と言うことはないはずです。

ASP.NET サイトの記事 ASP.NET 4 Breaking Changes / ClientIDMode Changes (URL 下記) にあるように、ASP.NET 4 からは ClientID の命名がデフォルトで Predictable となってます。

ASP.NET 4 Breaking Changes / ClientIDMode Changes
https://docs.microsoft.com/en-us/aspnet/whitepapers/aspnet4/breaking-changes#0.1__Toc256770142

正確に言うと、コントロールの ClientIDMode はデフォルトで Inherit だが、ページの ClientIDMode はデフォルトで Predictable なので、それを継承して結果的に Predictable になるということです。

特に理由がなければデフォルトで問題ないと思います。問題があるとすると以下のようなケースです。

UpdatePanel と ListView
http://surferonwww.info/BlogEngine/post/2016/11/20/linkbutton-in-listview-in-updatepanel.aspx

NAMEを固定する方法を知りたい。(ClientID Modeがあるのに、NAMEを固定するモードがない？）

name は固定できません。裏技的に変える方法があるかもしれませんが、ASP.NET が name を UniqueID に設定し、サーバー側でそれを使って操作することがあるので、変えるといろいろ支障が出るはずです。

クライアントスクリプトで jQuery オブジェクトを取得したいのなら id を使ってください。

Comments

[dorado]

>　例えば $("#TextBox1") では jQuery オブジェクトが取得できなくて困っているという話ですよね？
その通りです。

>　<%=TextBox1.ClientID%> というようにコード表示ブロック
現在、JavaScriptとHTML/CSSは別ファイルで管理しています。それでもこの方法は使えるのでしょうか。調べる限りですと使えないと思っていました。
（環境が仕事上にありまして、今すぐに実装確認することができず申し訳ありません。）

また、NAMEで指定することはできませんでしょうか。
※追記しましたがMVCは使用していません

追記：
返信かぶりしてしまいました。

> name は固定できません。
そうなんですね！ほとんどのサイトではいまだに<input ~~ > のHTMLスクリプトでjQueryやJavaScriptのサンプルを掲示していましたので、このままでは使えないということですね・・・。

全選択チェックボックスの作り方は、ネット上であまり出回っていないようなので、もう少し調べてみるか、自力で実装してみます。実装自体はID使えばできるんですが、保守性がよくないので・・・。

[退会済みユーザー]

> 現在、JavaScriptとHTML/CSSは別ファイルで管理しています。それでもこの方法は使えるのでしょうか。

やり方次第ですが、もちろん使えます。

> NAMEで指定することはできませんでしょうか。

回答欄に追記しましたようにできません。当該要素の jQuery オブジェクトを取得するということなら、その必要もないでしょう。

[dorado]

> やり方次第ですが、もちろん使えます。
承知しました。

ASP.NETの記載：
<asp:CheckBox id="CheckBox1" runat ="server" >

吐き出されるHTML：
<input name="ctl00$C$CheckBox1" id="ctl00$C$CheckBox1" type="checkbox" />

一般的な企業ではPredictableでやっているということであれば、上記のような感じになると思います。jQueryではctl00$C$CheckBox1を指定しなければならないということですよね。
メンテナンス性があまりよくない気がしてるんですが、そういうもんなんですかね・・・。他の会社ってどうやっているのか検討もつかないので。

[退会済みユーザー]

> 全選択チェックボックスの作り方は、

今回の質問とは関係なさそうな気がしますけど？　関係するならどういうことか詳しく書いてもらえば答えます。

あまり関係ないなら、新に別のスレッドを立てて質問してください。

[退会済みユーザー]

> メンテナンス性があまりよくない気がしてるんですが、そういうもんなんですかね・・・。他の会社ってどうやっているのか検討もつかないので。

話は通じてますか。紹介した記事を読んでもらってないですよね。がっかりです。

$('#<%=TextBox1.ClientID%>') として TextBox1 の jQuery オブジェクトを取得すれば、AutoID でも Predictable でも何でも OK ということ分かってますか？

[dorado]

すみません。今理解しました。
全選択チェックボックスの不明点については新たにスレッドを立てます。

[退会済みユーザー]

質問者さんの問題が解決できて、これ以上質問がなければこのスレッドはクローズしてください。

[dorado]

職場での実装確認を以って、クローズする予定ですので、少々お待ちください。