none
IE11上でBootstrapが機能しない場合がある(但しASP.netで作成) RRS feed

  • 質問

  • ASP.Net上でBootstrapを使用したWebAppを作成しております。

    ASP.netがBootstrapをサポートしていない事は認識しておりますので回避方法がない可能性は覚悟しております。

    まあ、ASP.net上のデザイナーは真っ黒になってASP.net上のオブジェクトをクリックもできません。

    実行は、クロムで行って、HTMLを直接変更して開発しております。(bootstrap4 でSlick)です。HTML直であれば開発は可能ですし、動きす。

    しかしここに来て、一部IE11でも機能しないBootstrapのコントロールがありました。

    上記でも言っている通り、クロムでは問題なく動きますしASP.net上で作成したユーザーコントロールも思い通り機能しています。

    しかしクロムではASP.netからデバッグが機能しません。開発効率が悪くて仕方有りません。Bootstrap4での実行対象にはクロムだけでなくIE11も書かれていますがIE11では思う動作がなされません。例えばSlickの「tab-contents」などはTabの切り替えが効きません。クロムでは問題なく動くコントロールがIE11では動きません。テストはクロムで行うことになりデバッガが使用できない状態です。

    デザイナーは真っ黒になっておりコントロールをクリックできないありさまです。どなたかデザイナーが真っ黒になる現象の回避策やVS上でデバッガを使用する方法をご存知の方は居られないでしょうか?サポート対象外だからMVC を使えと言うお話は理解していますが数十万ステップ以上有るベースを破棄できませんし、スマホやタブレット対応の自動化機能を無視できません。良い方法がないか探しております。ご教授頂けると幸いです。ASP.Net+Bootstrap開発手法は後にHPに公開しますので、現状の打開策をヒントでもご教授下さい。※Visual studio Codeでの開発ではなく、Visual studio上で開発を希望します。VS Codeで逃げを試しておりませんがソースが大きすぎて正しく機能しない可能性があります。VS2019前ではソースが大きすぎてデバッガ(Personal IIS)がSession情報を保持できず、まともに稼動しませんでした。VS Codeも今のバージョンでは同じ状況になりそうです。ですのでテストしていません。


    • 編集済み PETENSs 2019年8月26日 14:55 誤字修正
    2019年8月26日 14:01

回答

  • 何が分からないのか、何を聞きたいのかが質問文からは理解できませんでした。

    失礼ながら、質問者さんご自身もそのあたりが明確でなく、話が通じないような気がしますが、誤解されているところがあるようですのでその点をレスしておきます。

    > ASP.netがBootstrapをサポートしていない事は認識しております

    そんなことはありません。

    質問者さんが言う「Bootstrap」が何かによりますが、世間一般で言う Bootstrap.css や Bootstrap.js のことであれば、ASP.NET Web Forms でも ASP.NET MVC でもプロジェクト作成時に「Web フォーム」「MVC」テンプレートを使えば自動的に組み込まれるようになります。

    以下の画像は、Visual Studio Cummunity 2015 Update 3 で .NET 4.6.1 ベースの ASP.NET Web Forms アプリを Web アプリケーションプロジェクトとして「Web フォーム」テンプレートを利用して生成したものです。 Bootstrap.css と Bootstrap.js が組み込まれているのが分かりますか?

    さらに以下の記事に書いてある通り、スクリプトマッピングのための ScriptManager、.css ファイルを参照する link 要素をレンダリングするためのコードがマスターページに設定されます。

    ASP.NET 4.5 ScriptManager
    http://surferonwww.info/BlogEngine/post/2018/04/23/aspnet-45-scriptmanager.aspx

    なので、マスターページを使えば(使わなくても必要なコードをマスターページからコピペすれば) Bootstrap.css や Bootstrap.js は使えるようになります。

    Visual Studio 2015 の Bootstrap は 4 ではなくて 3 ですが、どっちにせよ ASP.NET がサポートしてないということはあり得ません。

    ただし、ASP.NET でなくブラウザの話に限れば、IE11 については、HTML5 とか最新の JavaScript を完全にはサポートしてないので、Chrome では動くが IE11 では動かないということはありますが。


    > ASP.net上のデザイナーは真っ黒になってASP.net上のオブジェクトをクリックもできません。

    少なくともテンプレートで Bootstrap を含めて自動生成したプロジェクトであればそういうことはあり得ません。

    質問者さん独自のなにか特別ものインストールするなど、普通ではないことをしていませんか?


    > しかしクロムではASP.netからデバッグが機能しません。

    Visual Studio で[デバッグ(D)]⇒[デバッグの開始(S)]で Chrome をブラウザとして使えないと言ってます? であれば、それも違います。

    .aspx を表示して以下の画像のように設定すれば、

    以下の画像の通り Chrome で表示されます。Bootstrap.css が効いているのが分かりますか? もちろん Visual Studio 上で C#, VB.NET のコードのデバッグもできます。

    Visual Studio 2015 ではクライアントスクリプトのデバッグができませんが、Visual Studio 2017 では可能になったと聞いてます(自分は VS2017 は持ってないので未確認ですが)。

    • 回答としてマーク PETENSs 2019年9月15日 12:59
    2019年8月27日 2:34

すべての返信

  • 何が分からないのか、何を聞きたいのかが質問文からは理解できませんでした。

    失礼ながら、質問者さんご自身もそのあたりが明確でなく、話が通じないような気がしますが、誤解されているところがあるようですのでその点をレスしておきます。

    > ASP.netがBootstrapをサポートしていない事は認識しております

    そんなことはありません。

    質問者さんが言う「Bootstrap」が何かによりますが、世間一般で言う Bootstrap.css や Bootstrap.js のことであれば、ASP.NET Web Forms でも ASP.NET MVC でもプロジェクト作成時に「Web フォーム」「MVC」テンプレートを使えば自動的に組み込まれるようになります。

    以下の画像は、Visual Studio Cummunity 2015 Update 3 で .NET 4.6.1 ベースの ASP.NET Web Forms アプリを Web アプリケーションプロジェクトとして「Web フォーム」テンプレートを利用して生成したものです。 Bootstrap.css と Bootstrap.js が組み込まれているのが分かりますか?

    さらに以下の記事に書いてある通り、スクリプトマッピングのための ScriptManager、.css ファイルを参照する link 要素をレンダリングするためのコードがマスターページに設定されます。

    ASP.NET 4.5 ScriptManager
    http://surferonwww.info/BlogEngine/post/2018/04/23/aspnet-45-scriptmanager.aspx

    なので、マスターページを使えば(使わなくても必要なコードをマスターページからコピペすれば) Bootstrap.css や Bootstrap.js は使えるようになります。

    Visual Studio 2015 の Bootstrap は 4 ではなくて 3 ですが、どっちにせよ ASP.NET がサポートしてないということはあり得ません。

    ただし、ASP.NET でなくブラウザの話に限れば、IE11 については、HTML5 とか最新の JavaScript を完全にはサポートしてないので、Chrome では動くが IE11 では動かないということはありますが。


    > ASP.net上のデザイナーは真っ黒になってASP.net上のオブジェクトをクリックもできません。

    少なくともテンプレートで Bootstrap を含めて自動生成したプロジェクトであればそういうことはあり得ません。

    質問者さん独自のなにか特別ものインストールするなど、普通ではないことをしていませんか?


    > しかしクロムではASP.netからデバッグが機能しません。

    Visual Studio で[デバッグ(D)]⇒[デバッグの開始(S)]で Chrome をブラウザとして使えないと言ってます? であれば、それも違います。

    .aspx を表示して以下の画像のように設定すれば、

    以下の画像の通り Chrome で表示されます。Bootstrap.css が効いているのが分かりますか? もちろん Visual Studio 上で C#, VB.NET のコードのデバッグもできます。

    Visual Studio 2015 ではクライアントスクリプトのデバッグができませんが、Visual Studio 2017 では可能になったと聞いてます(自分は VS2017 は持ってないので未確認ですが)。

    • 回答としてマーク PETENSs 2019年9月15日 12:59
    2019年8月27日 2:34
  • ご回答有難うございます。

    >ASP.NET 4.5 ScriptManager
    >http://surferonwww.info/BlogEngine/post/2018/04/23/aspnet-45-scriptmanager.aspx

    知りませんでした。なるほどこの機能使えますね。有難うございます。

    >Visual Studio 2015 の Bootstrap は 4 ではなくて 3 ですが、どっちにせよ ASP.NET がサポートしてないということはあり得ません。

    開発フレームワークがslickですので、Bootstrap は 4になります。その為、

    >少なくともテンプレートで Bootstrap を含めて自動生成したプロジェクトであれば・・・

    テンプレートを使用せず、プロジェクトにBootstrap4の構成ファイル(jquery)などを、独自にコピーしています。この結果、同じasp.netのコンパイルでありながら、iE11はNG、でクロムはOkと言うよく分からない結果になりました。

    クロムでは問題なく動きますがIE11では動きません。勿論同じオブジェです。

    下記はDIvタグを多用したデザイナー画面です。BootstrapにあわせてHTMLを構成すると全ての画面が下記のようになります。

    また、ブラウザの選択機能は見逃しておりました。有難うございます。試してして見ます。目的のデバッグができそうな気がします。

    >質問者さんが言う「Bootstrap」が何かによりますが、世間一般で言う Bootstrap.css や Bootstrap.js のことであれば、

    上記のようにSlickを前程にWebFromの改修を行った為、bootstrap3前程のテンレートを除外していました。WebFromがHTMLを吐き出した後、SlickのJqueryが動けば動作に問題はないと考えテンプレートを除外しておりました。

    従って、Bootstrap.css や Bootstrap.jsは使用しておりません。

    デザイナーが上記のように黒くなるのを防ぐためには必須なのかも知れません。ご存知であれが教えてください。

    今のテンプレート(Bootstrap.css や Bootstrap.js)が3前程であるとすると、Bootstrap4のフレームワークであるslickで両方指定すると誤作動は起きないのでしょうか?デザイナーをまともに動かすにはテンプレート(Bootstrap.css や Bootstrap.js)が必用な気がします。お手数をお掛けしますがご教授頂けると幸いです。

    2019年8月27日 3:39
  • 連投失礼します。

    クロムでのデバッグできました。半分諦めいたので大変助かりました。(簡単な見落としでした。)

    ちなみに、私はVS2019なので、「ファイル」メニューには「ブラウザの選択」は無く、ソリューション エクスプローラの.aspxファイル何でも良い)を右クリックし、「webブラウザの選択」からクロムを選択(規定値をクロムにする)しました。これは助かりました。有難うございました。

    2019年8月27日 4:20
  • > 開発フレームワークがslickですので、Bootstrap は 4になります。

    意味が分かりません。正しい用語の使い方になっているのでしょうか?

    そもそも Slick とは何ですか? 以下の jQuery プラグインのことですか?

    slick - the last carousel you'll ever need - Ken Wheeler
    https://kenwheeler.github.io/slick/

    違うものなら何なのか詳しく書いてください。

    もし上の記事のものだとすると「開発フレームワークがslick」とはどういうことですか? 意味が分かりません。

    また、なぜ Slick を使うから Bootstrap のバージョンが 4 でなければならいのですか? そもそも、上の記事の Slick は Bootstrap は使ってないようです(slick-theme.css, slick.css, jquery.js, slick.min.js だけあれば動くようです)。Bootstrap は Slick を動かすには必要ないと思うのですが、違います?


    > クロムでは問題なく動きますがIE11では動きません。勿論同じオブジェです。

    上のレスでも書いたように、IE11 は HTML5 とか最新の JavaScript を完全にはサポートしてないので、Chrome では動くが IE11 では動かないということはあります。

    そういう話ではないのですか?

    ただ、上の記事のデモは IE11 でも問題なく動くようです。質問者さんのアプリが IE11 で動かないとすると Slick とは違うところで何か IE11 がサポートしてないことをしているのだろうと思います・・・が、それが何だかはエスパーではない自分には分かりません。


    > 下記はDIvタグを多用したデザイナー画面です。BootstrapにあわせてHTMLを構成すると全ての画面が下記のようになります。

    それは、上のレスにも書きましたが、質問者さん独自のなにか特別ものインストールするとか実装するとか、なにか普通ではないしことをしているのではないかと思います・・・が、それも何だかはエスパーではない自分には分かりません。

    2019年8月27日 5:03
  • 言葉が足らなくてすみません。

    Slickで通じると思っていました。日本ではあまり知名度が無いようです。

    >slick - the last carousel you'll ever need - Ken Wheeler
    違います。

    >違うものなら何なのか詳しく書いてください。
    slickとはBootstrap4をベースにしたレスポンシブなHTMLを作成するbootstrap template Generatorです。低価格の・・・$100程度の・・・
    https://themewagon.com/themes/slick/

    この中にコンポーネント部品があり、Bootstrap4に準拠しています。

    従ってこのジェネレーターで出力したものを使用するためにはBootstrap4が必須になります。

    このジェネレーターから出力されるコントロール部品は公開されており使用できます。
    Bootstratp4の対象はクロムを含みIE11からなので稼動できるはずと思っています。
    またslickのサイト上はCompatible BrowserrsにIE9+から載ってますのでジェネレーターから出力されたHTMLが
    >上のレスでも書いたように、IE11 は HTML5 とか最新の JavaScript を完全にはサポートしてないので、
    >Chrome では動くが IE11 では動かないということはあります。
    >そういう話ではないのですか?
    と言う事は有りません。(あるのかなぁ?)

    向こうでは結構シェアを持ってるサイトなので、FAQやForramを検索しても該当のような問題は見つからず困っています。
    もっともASP.net+Bootstrap4(Slick)の話題自体が有りませんので・・・・。

    >自分には分かりません。
    お手数をお掛けします。お付き合い頂いて有難うございます。
    前話のクロムでデバッグできただけでも、大変ありがたかったです。感謝いたします。

    MSのVSのテンプレートにBootstrap4のテンプレート(無いかもしれない)が見つかりません。ただ教えて頂いた3も見つからない。
    私が、なにか間違え散るのでしょうか?
    VSで新規プロジェクト作成画面からテンプレートの選択で最後までスクロールし「更にツールと機能をインストールする」でインストール実行。
    Bootstrapで検索して見つからないのですが何故?(~~;)
    お手数ですが、教えていただけると助かります。

    2019年8月27日 7:16
  • > slickとはBootstrap4をベースにしたレスポンシブなHTMLを作成するbootstrap template Generatorです。
    > https://themewagon.com/themes/slick/

    そういう情報は質問の一番最初に一行目に書くようにしてください。ググっても出てこないし、回答者・閲覧者が調べないで済むよう(余計な時間を使わせないよう)お願いします。

    Slick のサイトを見ましたが、Drag & Drop Bootstrap Template Generator ということ以外は依然として分かっていませんし、

    > このジェネレーターから出力されるコントロール部品は公開されており使用できます。

    その「コントロール部品」というのも何だか分かりませんが、ASP.NET のサーバーコントロールではないし、それに何らかの影響を直接与えるものでもなさそうです。

    想像ですが、Slick というのは、Bootstrap の css や JavaScript の機能(Slick による拡張もあるかも)を使って、html ソースに対して css の適用とかクライアントスクリプトによる操作をするもののように思われます。

    Slick は ASP.NET とは、少なくともサーバー側の動作においては何の関係もなくて、ASP.NET がレンダリングしてブラウザに送信した結果である html ソースにのみ影響があるということだと思います。違いますか?

    そうであれば、さらに想像ですが、Visual Studio の「デザイン」画面で真っ黒になってしまうのは、Slick による css 適用の影響ではないかと思います・・・が、エスパーではない自分としては想像の域を出ないので、質問者さんの方で確認してください。

    ちなみに、Visual Studio 2015 のデザイン画面で Bootstrap の css が適用されている Dafault.aspx ページを表示すると、Bootstrap の css が適用された形で表示されます。質問者さんのケースで黒くなるのは Slick が何かしているのでは?

    Chrome では動くが IE11 では動かないのは、何度も書きますが、IE11 は HTML5 とか最新の JavaScript を完全にはサポートしてないこと以外は、少なくとも今提供されている情報では、原因として考えられません。これも、質問者さんの方できちんと確認してください。IE9+ と書いてあっても、それは昔の話かも。

    > MSのVSのテンプレートにBootstrap4のテンプレート(無いかもしれない)が見つかりません。

    Visual Studio 2015 の場合ですが、[ツール(T)]⇒[NuGet パッケージマネージャー(N)]⇒[ソリューションの NuGet パーッケージの管理(N)...]で先のレスの画像の管理画面を開くことができます。

    2019年8月28日 1:50
  • Resに時間が掛かってすみません。

    >そういう情報は質問の一番最初に一行目に書くようにしてください。ググっても出てこないし、回答者・閲覧者が調べないで済むよう(余計な時間を使わせないよう)お願いします。
    すみません。お手数をお掛けしました。

    >質問者さんのケースで黒くなるのは Slick が何かしているのでは?
    間違いなくそうだと思います。

    >原因として考えられません。質問者さんの方で確認してください。
    認識していますが。ヒントが全く無く手詰まりです。質問だも書いたとおり少しでも情報が欲しいので・・・.

    開発はHTMLベースだと効率が・・・

    >IE9+ と書いてあっても、それは昔の話かも。
    怖い可能性です。

    >Visual Studio 2015 の場合ですが、[ツール(T)]⇒[NuGet パッケージマネージャー(N)]⇒[ソリューションの NuGet パーッケージの管理(N)...]で先のレスの画像の管理画面を開くことができます。
    有難うございます。VS2019でもおなじですが、参照の中にもありません。VS2019では無いのでしょうか?公開期間や作成削除の可能性でもあるのでしょうか?VS2015を新たにインストールして確認を行っています。(環境作成に時間が・・・).後でご報告します。

    何れにしても、お付き合い有難うございました。感謝です。M(__)M

    2019年8月30日 1:06
  • > 認識していますが。ヒントが全く無く手詰まりです。質問だも書いたとおり少しでも情報が欲しいので・・・.

    ASP.NET Web Forms + Slick での開発経験があって同じ問題に悩んで解決した人でないとヒントは出せないと思います。ただ、英語だけで範囲を広げてググっても何もヒットしないので、そういう人はごくごく少数なのかも。

    知らないのに勝手なことを言わせてもらえれば・・・

    もし可能であれば Slick の影響が一切出ないようにして確認してみてはどうですか。もしそれでデザイン画面のブラックアウトの問題が解決できれば Slick の影響ということが確認できるわけですから。

    一般的に、Visual Studio のデザイン画面が使えないとウィザードを利用してのサーバーコントロールの初期設定に困るということはありますが、それ以外はソース画面で作業できるはずです。

    なので、デザイン画面のブラックアウトの問題が Slick の css の影響ということが確認出来たら、サーバーコントロールの初期設定は Slick の影響が出ないようにしてデザイン画面で行い、後はソース画面で作業してはいかがですか?

    対症療法的ですが、それぐらいしか手はないような気がします。


    > 有難うございます。VS2019でもおなじですが、参照の中にもありません。VS2019では無いのでしょうか?

    「NuGet - ソリューション」ウィンドウの右上の[パッケージソース]がデフォルトの[Microsoft Visual Studio Offline Pakage]になってませんか?

    そうであれば、それを[nuget.org]とかに変えて探す範囲を広げれば[参照]に出てくると思います。

    • 編集済み SurferOnWww 2019年8月30日 2:27 訂正
    2019年8月30日 2:25
  • 有難うございます。

    >なので、デザイン画面のブラックアウトの問題が Slick の css の影響ということが確認出来たら、
    >サーバーコントロールの初期設定は Slick の影響が出ないようにしてデザイン画面で行い、後は
    >ソース画面で作業してはいかがですか?
    今、行っている方法です。WebFormによっては入力用コントロールが100以上あり、修正が・・・・

    >対症療法的ですが、それぐらいしか手はないような気がします。
    (^^;)/・・・。
    教えて頂いたクロムのデバッグだけでの大変改善されました。少し前までは「上記」+「クロムではデバックできない」状態
    でしたので、開発スピードは大幅に改善されました。M(__)M/改めて

    >そうであれば、それを[nuget.org]とかに変えて探す範囲を広げれば[参照]に出てくると思います。
    できました。(^^)V39
    VS2017以降はパッケージソースから[Nuget.org]はなくなったようです。手動で設定する方法が下記にありました。
    http://pongitsune.hatenablog.com/entry/2017/04/13/234242
    上記で復活方法(手動設定)が書かれていました。この方法で検索できました。
    Bootstrpap4関係はありましたが、どれが使えるか?確認中です。(^^;)

    お付き合い有難うございました。感謝です。M(__)M

    2019年8月30日 10:36
  • PETENSsさん、こんにちは。フォーラムオペレーターのHarukaです。
    MSDNフォーラムにご投稿くださいましてありがとうございます。

    ご質問いただいた件ですが、その後いかがでしょうか。
    SurferOnWwwさんから寄せられた投稿はお役に立ちましたか。

    参考になった投稿には [回答としてマーク] をお願い致します。

    設定いただくことで、
    他のユーザーもお役に立つ回答を見つけやすくなります。

    お手数ですが、ご協力の程どうかよろしくお願いいたします。


    MSDN/ TechNet Community Support Haruka

    ~参考になった投稿には「回答としてマーク」をご設定ください。なかった場合は「回答としてマークされていない」も設定できます。同じ問題で後から参照した方が、情報を見つけやすくなりますので、
    ご協力くださいますようお願いいたします。また、MSDNサポートに賛辞や苦情がある場合は、MSDNFSF@microsoft.comまでお気軽にお問い合わせください。~

    2019年9月10日 2:20
    モデレータ