2023/04/05(水)子ノードへのリンクではまる

WebForm
本来ならRoleでメニューを絞り込むのが普通なんでしょうが、日によって役割変わったり、更新系ではないので担当者以外が見ても問題ないので、メニューを分けて絞り込もうと思ったら思わぬ落とし穴に。

やりたかったこと

Menuコントロールのページには自分の子ノードのページだけのリンクを作成する。
viewtree020.png

viewtree030.png


StartFromCurrentNodeをTrueにするだけでいいと思ったら、なぜかTreeViewがまったく表示されません。

原因はWeb.sitemapのURLに拡張子「.aspx」が付いていたこと。
大文字小文字は違っていても大丈夫ですが、拡張子がついていると完全無視でした。

逆にStartingNodeUrlは参照ボタンで選択すると拡張子が付きますが、Web.sitemapのURLに拡張子がついていないとサーバーエラーになり直ぐに気づきます。
コメント（0件）

2020/07/19(日)テキストボックス内のクリアボタン

WebForm
自分用に作ったプログラムは自分の環境でちゃんと使えればよかったので、Edgeが変わってから作業効率が落ちてイライラ。

一番影響デカイのが赤枠部分のクリアボタンが消えてしまったこと。
input-search.png


CSVのダウンロード時にフォルダ開くのにワンクリック増えたとかはまだ我慢できますが、このクリアボタンは重宝してたので慣れたくない感じだったので調べました。

今までどのブラウザでも表示されていたと思っていたら、マイクロソフトさんの独自の仕様（::-ms-clear 疑似要素）だったようで。

新しいEdge等で似たようなクリアボタンを表示させるには
<input type="text">
ではなくHTML5で追加された
<input type="search">
に変えれば、一部対応していないブラウザはあるけれどEdgeでクリアボタンが表示される。

WebFormの場合はTextModeをSearchに。
<asp:TextBox ID="txtKeyword" TextMode="Search" runat="server"></asp:TextBox>
ただしbootstrap3を使っている場合は消されて（display:none）しまうので、bootstrapを読み込んだ後でさらに上書きする必要がある。
<style>
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
  }
</style>
上の画像はVS2019でbootstrap4だったのでちゃんと表示されました。

ということでTextMode=Searchを付けてまわることに。
コメント（1件）

2019/04/22(月)WebFormでDOMを扱う

WebForm
ページ内にGridViewが複数あり、一番上のGridViewに表示されたセルのテキストをクリックすると、２番目、３番目のGridView内の同じテキストをハイライトしたい（テキストコピーしてCTRL+Fでページ内検索していたがコピーペーストが面倒）という非常にレアなシチュエーション。
WebFormでjQueryや他のライブラリ使うよりは直接DOMの配列ぐるぐる回した方が楽そう。
<script type="text/javascript">
    function highlightKeyword(keyword) {
        var tbls = document.getElementsByTagName("table");
        // 一番上のテーブルを除く全てのテーブルの全ての行の全てのセル内を置換
        for (var i = 1; i < tbls.length; i++) {
            for (var j = 1; j < tbls[i].rows.length; j++) {
                for (var k = 0; k < tbls[i].rows[j].cells.length; k++) {
                    var str = tbls[i].rows[j].cells[k].innerHTML;
                    // 既にタグが付いてるかも知れないので削除してから追加
                    tbls[i].rows[j].cells[k].innerHTML = str.replace('<span style="background: yellow;">', '').replace('</span>', '').replace(keyword, '<span style="background: yellow;">' + keyword + '</span>');
                }
            }
        }
    }
</script>
コメント（0件）

2019/04/14(日)ASP.NET WebFormのMenuコントロール その3

WebForm
WebFormのテストプロジェクトに過去に試したものも統合しておこうとMenuコントロールを追加したら、Bootstrapのバージョン上げた（4.3.1）ためにデザインが崩れてまたやり直し…。

ここまでは順調
menucontrol.png


幅を寄せるをなぜかトグルボタンの位置がずれる
menucontrol2.png


メニューを開くと正常な位置に
menucontrol3.png


なんとなくあと一息、と言う感じだったのでメニューコントロール使わない正常パターンと使った時のずれるパターンでソースを見比べながら頑張りましたが違いが見つけ出せず。

menuコントロールの一番外側がdivになっていたので、CssClassプロパティにcollapse navbar-collapseをセットしていたのですがそれをやめ、divタグで囲んだらちゃんと表示されるようになりまた。
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" runat="server" href="~/">テスト用</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar">
        <asp:Menu ID="mainmenu" DataSourceID="SiteMapDataSource1"
            runat="server" 
            Orientation="Horizontal" 
            StaticDisplayLevels="2"
            StaticEnableDefaultPopOutImage="False"
            MaximumDynamicDisplayLevels="10" 
            EnableViewState="false"
            StaticMenuStyle-CssClass="navbar-nav mr-auto" 
            StaticSelectedStyle-CssClass="active"
            DynamicMenuStyle-CssClass="dropdown-menu" 
            IncludeStyleBlock="false" 
            SkipLinkText=""
            RenderingMode="List"
            StaticMenuItemStyle-CssClass="nav-link"
            DynamicMenuItemStyle-CssClass="dropdown-item">
        </asp:Menu>
    </div>
</nav>
コメント（0件）

2017/07/22(土)ASP.NET WebFormのMenuコントロール その2

WebForm
PC専用（タブレット含む？）ということであれば、Menuコントロールのプロパティだけで何とかなりそうです。
こちらからそのまま貰ってきて、エラーの出るOnMenuItemClick="Menu1_MenuItemClick"を削除、DataSourceIDにサイトマップのIDを設定。
MaximumDynamicDisplayLevels="10"とあるので、頑張ってデータ作ってみました。
bootstrap風Menuコントロール

bootstrapのドロップダウンは1層だけですが、WebFormのMenuコントロール用cssとの合わせ技でしょうか、8層くらいまでなら表示できそうです。右端に到達したら折り返してきてくれるかなと試しましたが、表示が切れました。

WebFormは社内用のアプリで多く使っていて今まではPCかつIE専用で押し通すことも可能でしたが、最近はスマホからVPN経由で使いたい、と言うような要望も出てきています。
スマホのことを考えると干渉するかもしれないcssの合わせ技は、不具合の出る端末見つかった時には手に負えないかも。

スマホ用のサイズでデザインが崩れないようにするには、jQueryでMenuコントロールのcssを取り除け、という情報が多いようです。一番詳しいのはこちら。個人的にjQueryでcssやstyleいじるくらいならC#でSiteMapデータをグリグリしたい派なので、実際には試していません。
コメント（0件）
OK キャンセル 確認 その他