dev >> .NET >> ASP.NET

デスクは広い方がいい

THREE-ONE — Fri, 08 Aug 2008 18:25:00 GMT

こんなことをいろいろやって、cssの勉強がてら頼まれてた Web アプリを作ってたんだがやめた。
なんつーか、ヘッダ・メニュー・フッタ全部邪魔!!
メニューなんてこちらのサンプルのようなのがちょろっとだけあればいいし、コピーライトだけのフッタが常時見えている必要はない。
メニューは常時アクセスできるようにしておきたいけど、ヘッダはスクロールして隠れてもいいよ。
あたりまえだけど、結局一番大事なのはコンテンツなので、そのスペースはできる限り大きく取りたい。
ブラウザ最大化してようやく使い物になるような Web システムなんてクソだ。

Page にて特定のコントロールの ViewState を削除する

THREE-ONE — Fri, 08 Aug 2008 11:49:00 GMT

viewstateについてにて回答したことに対する補足というかメモ。

LoadPageStateFromPersistenceMedium は Pair オブジェクトを返す。
この Pair の First には ControlState が、Second には ViewState が格納されている。
そこから以下は最初だけちょっと違って、Pair と ArrayList が交互に格納されている。
おそらく画面の構造がそのまま反映されているんだろう。
で、この ArrayList への格納の仕方がちょっとひどい。
偶数番目にコントロールのインデックスが格納されており、+1した奇数番目に ViewState のデータが Pair オブジェクトとして格納されている。
そこは Dictionary か、それこそ Pair を要素にしておけばいいんじゃないの？って感じがする。
実際 ControlState の方は、キーがコントロールの ID で、値に ControlState を格納する Pair オブジェクトを持つ HybridDictionary になっている。
なので、目的のコントロールの ControlState は見つけやすい。
目的のコントロールの ViewState は本当に見つけにくく、ページの構成に大きく左右されるため、意味不明で保守しづらい危険なコードになる。
ちなみに、GridView が 2 つ、Button が 1 つ並んでいる aspx にて、二番目の GridView の ViewState を削除するためには下記のコードが必要だった。こんなの絶対保守したくない
それ以前に、こんなトリッキーなことは普通やらないわな

GridView に Flexigrid を適用する

THREE-ONE — Thu, 31 Jul 2008 10:37:00 GMT

jQuery のプラグインで Flexigrid ってのがあります。
Rails 開発でちょくちょく使ってて便利なので、GridView に適用できないもんかなーと思ってやってみた。
まず、通常の GridView ではうまくいかない。
というのも、GridView は thead, tbody タグを生成しない。
これの解決策として CSS Friendly Control Adapters を使用する、。
以前は VSI で配布されていたが、今はずいぶんとシンプルになっている模様。
まず、zip と dll をダウンロード
Web アプリケーションプロジェクトに zip 内の CSSFriendly/CSS と CSSFriendly/JavaScript を移植。（いらないかも）
参照設定にダウンロードした CSSFriendly.dll を追加。
App_Browsers ディレクトリを追加し、中に CSSFriendlyAdapters.browser を配置。
CSS Friendly Control Adapters の設定はこれで OK。
これで、thead, tbody が出力されるようになる。

次に Flexigrid の設定。
Flexigrid は jQueryのプラグインなので、jquery.js をダウンロードして JavaScript フォルダに配置。（軽量版の jquery.pack.js をリネームした）
次に flexigrid.js を JavaScript フォルダに配置。
CSS ディレクトリに flexigrid.css および images ディレクトリを配置。
これで Flexigrid の設定も完了。

これで $(#GridView1).flexigrid() でよいかといえばそうはいかない。
若干の追加処理が必要になる。
まず、CSS Friendly Control Adapters を使用した場合、コントロールの id は table ではなく、それを取り囲む div タグに設定される。
flexigrid メソッドは table のオブジェクトから呼び出す必要があるため $() の引数を #GridView1 table としてやる。
(追記：$(#GridView1).flexigrid() でもできました。正式に table から呼び出す方が無難とは思われますが。

次にヘッダの width。
CSS Friendly Control Adapters を使用すると、各列の HeaderStyle の出力がされない。
ちなみに HeaderStyle の CssClass も設定されない。ヘッダなのに ItemStyle の CssClass の反映がなされる。
まあ、どっちにしても Flexigrid に必要なのは width 属性であり、style="width:100px" などしても反映されないのではあるが。
なので、下記のようにしてヘッダの各セルに width を設定してやる必要がある。
別に HeaderStyle から持ってこなくてもいいのだが、ヘッダの設定なので HeaderStyle に仕込んでおくのが筋だろうと思うので。
デザイナで設定できますしね。これで $(#GridView1 table).flexigrid() で Flexigrid を適応できる。
Flexigrid には Ajax による非同期のページングやソートなども組み込まれているため、GridView に対するその部分のコーディングを簡略化できるかも。
XML か JSON を返す別の aspx なりが必要になりますが。

もともと GridView の機能である、インプレース編集などがうまくマッチできるかどうかはまだ試してません。
ここがうまく統合できるならかなり強力だと思うんだけどなぁ・・・
ぼちぼち試してみる予定です。

# まともな技術系エントリはかなり久々な気がする(;-_-)

DataSource はなぜデザイナに貼り付ける？

THREE-ONE — Fri, 21 Mar 2008 00:11:00 GMT

DataSource 系のコントロールはなぜデザイナに貼り付けなければならないんだろう？
というかなぜコントロールなんだろう？
VS2003まであった、SqlCommand のようなコンポーネントで扱う方がよかったんじゃないだろうか？
画面に表示されないものをデザイナに貼り付けるってのは WYSIWYG を阻害するだけでしかないと思うんだけど。
そもそも、UI に直接作用するものではなくデータやビジネスロジックと UI の橋渡しをするものなんだし。
グレーの四角いのが画面に並んでるのはあまりいいもんじゃないなぁ～

ChartFX for VisualStudio2005

THREE-ONE — Sun, 14 Oct 2007 02:24:00 GMT

現在のプロジェクトで使っていくであろうChartFX for VisualStudio2005のトライアル版をインストール

とりあえずしばらくはサンプルと英語のドキュメントをにらめっこしていくことになりそうです。
棒グラフとかを表示させるにしても、デザイナでは折れ線なのか・・・
ていうかプロパティ設定で全然かわらない？？
設定とデータよりpngを生成して出力するようなので、デザイナではしかたないのかなぁ？
サンプルちょっと動かしただけなのでこれからです

ASPX でのコメントアウト

THREE-ONE — Sun, 08 Apr 2007 12:12:00 GMT

C# に限らず、ソースファイルでは修正時に過去のソースをコメントアウトとして残し、コメントで情報を添えることで変更履歴を残す風習はいたるところで見られます。
バージョン管理システムが普及している今、そういう考え方はよしとされない傾向もあります。

では、ASPX のようなデザインとロジックが一体化したファイルの場合、不必要になった・変更になったコントロールはどうしますか？
ほとんどの場合、すっぱり削除するのが多いと思います。私もそうします。
しかし、中には以下のようなことをやるのも見たことがあります。

・<%-- <asp:Label id="lbl" runat="server">hoge</asp:Label> --%>
　正しいコメントアウトだと思います。
　ですが、クライアントに空白や空行として送信されてしまうのが、個人的には好きじゃありません。

・Visible を false
　クライアントの HTML には反映されませんが、インスタンスは作られるしコントロールに対する処理も実行されるのでムダですね。

・
　なんか勘違いしてますね、これ書いた人は勉強しなおしたほうがいいと思います。
　インスタンスは作られて、コントロールに対する処理も実行される上でなく、クライアントの HTML にも埋め込まれます。
　ブラウザが見えなくしてるだけです。

で、先日現場で上記のどれでもないコメントアウトを見つけました。

それが・・・・・コレだ

One, Two, Three

<%/* <asp:Label id="lbl" runat="server">hoge</asp:Label> */%>

この発想はなかったので、はじめは何してるかわからなかった（コメントアウトとは思わなかった）
まあ、結果は確かに期待したとおりのものになりますが、なんか違うよね。
アクセス時に作成される cs (または vb）ファイルに /* <asp:Label id="lbl" runat="server">hoge</asp:Label> */ つーコメントを埋め込めと命令しているわけで。
まあ、実害はないので放置しておきました。

あ、でもね

<!-- 1999/01/23 Mr.X また猿に負けたため削除 begin -->
<%/* <asp:Label id="lbl" runat="server">hoge</asp:Label> */%>
<!-- 1999/01/23 Mr.X また猿に負けたため削除 end -->

台無しですから（日付・名前・コメントはもちろん適当ですよ）

上から順でお願いします

THREE-ONE — Wed, 04 Apr 2007 21:26:00 GMT

Webアプリの保守や改修をしていると、aspx のソースからデザインや各コントロールをイメージして、テキストエディタでいじることをよくやります。（私は）
ですが、ここでどうしようもないこまったちゃんが出てきます。
そ～ぅ、GridLayoutで・す・YO!!。
DataGrid が縦に 4 つ並んでたのですが、HTML 上では実際の 3 → 2 → 4 → 1 の順に並んでました。
ﾅﾒﾝﾅﾜﾘｬｧ(ﾉ-_-)ﾉ⌒┻┻

まあ、厳密には GridLayout というか絶対位置指定の問題なんですけど。
GridLayout に頼っていると、HTML が見づらいものになってしまうという点で同じかな。
絶対位置指定も z-index を利用して、三次元ぽい配置するには便利なんですよ。
FlowLayout そんなにめんどくさいかなぁ？
個人的には、GridLayout をデフォルトにした MS のせいだと思ってます。

VS2003 までは、デザイナでちまちまやるより、直接 HTML やコントロールをタグでがーーーーーーっと書いていくほうが、効率いいと思うんだけどなぁ。
インテリセンスもきくんだし。
もちろん、ある程度なれた人限定ですけど。
あ、なれてなくても必ず FlowLayout でやってください。ﾏｼﾞﾃﾞ

Name と NCName と QName

THREE-ONE — Thu, 15 Mar 2007 01:35:00 GMT

昨日の XML Schema のデータ型に Name と NCName と QName という似たようなデータ型があります。
これはいったいなんでしょう？
まず、QName とは属性名や要素名の形式です。
xsl:stylesheet のように名前空間接頭辞:localName の形式です。
これに対して展開された名前というものが存在します。
これは "http://www.w3.org/1999/XSL/Transform"+"stylesheet" のように名前空間を URI に展開します。
つまり、同じ名前空間に属する同じ localName の要素でも QName は違う可能性がありますが、展開された名前は必ず一致します。
この、名前空間接頭辞:localName の形式を QName といいます。
データ型としてわかりやすいのは、xsd:element 要素の name 属性とかでしょうか。

たいして、Name と NCName は要素内容や属性値に使用できる文字の集合を表しています。
要素名や属性名に使用できる文字で構成された文字列データということです。
そのため、xsd:string から派生したものになっています。
NCName とは Name で使用される文字から : を取り除いたものです。
XML において名前に : は含むことができます。
ただし、名前空間とのデリミタとしても使用されるため、推奨されていません。（パーサーによってはエラーにもなりますね）
要するにまぎらわしいんですよ。

ID データ型は NCName から派生しています。
つまり、ID データ型に指定された属性値には : を含むことができないのです。
そういえば、ASP.NET で id 属性にレンダリングされる Control.ClientID は Control.UniqueID の : を _ に置換したものですね。
(ASP.NET 2.0 以降なら $ か。まあ $ は ID 型や NCName 型以前に Name 型として不適なので同じですけど)
それもちゃんと理由があるわけですね。
ま、これは XML Schema の ID 型というか DTD の ID 型なんですけれども。
XML Schema の ID 型も DTD の ID 型に対応させるためにあるわけなので、結局は同じ話です。

シェルピンスキーのギャスケット

THREE-ONE — Fri, 23 Feb 2007 02:44:00 GMT

今日はマス北野の日です。
というわけで、数回前のネタであるフラクタルで遊んでみましょう。

コードビハインド

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class FractaleTest_FractaleTest : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.rowRepeater.DataSource = this.CreateDataSource(64);
        this.rowRepeater.DataBind();
    }

    /// <summary>
    /// データソースを作成します。
    /// </summary>
    /// <param name="lineCount">表示行数</param>
    /// <returns>データソース</returns>
    private List<List<bool>> CreateDataSource(int lineCount)
    {
        List<List<bool>> dataSource = new List<List<bool>>(lineCount);
        for (int i = 0; i < lineCount; i++)
        {
            int dataCount = i + 1;
            List<bool> line = new List<bool>(dataCount);
            for (int j = 0; j < dataCount; j++)
            {
                if ((j == 0) || (j == dataCount - 1))
                {
                    line.Add(true);
                }
                else
                {
                    List<bool> previousLine = dataSource[dataSource.Count - 1];
                    line.Add(previousLine[j - 1] ^ previousLine[j]);
                }
            }
            dataSource.Add(line);
        }

        return dataSource;
    }
}

aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FractaleTest.aspx.cs" Inherits="FractaleTest_FractaleTest" %>

<!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>シェルピンスキーのギャスケット</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table cellpadding="0" cellspacing="0" border="0">
            <asp:Repeater ID="rowRepeater" runat="server">
                <ItemTemplate>
                    <tr>
                        <td style="text-align:center; font-family:Monospace" nowrap="nowrap">
                            <asp:Repeater ID="circleRepeater" runat="server" DataSource="<%# Container.DataItem %>">
                                <ItemTemplate>
                                    <%# ((bool) Container.DataItem) ? "○" : "●" %>
                                </ItemTemplate>
                            </asp:Repeater>
                        </td>
                    </tr>
                </ItemTemplate>
            </asp:Repeater>    
        </table>
    </div>
    </form>
</body>
</html>

結果（ちょっとサイズでかいです）

フラクタルだけに再帰でやりたかったけど、わかりにくいソースになりそうでやめた。

続、Excel でダウンロード

THREE-ONE — Sun, 04 Feb 2007 17:26:00 GMT

http://blogs.wankuma.com/pinzolo/archive/2006/11/24/46804.aspx

これの DataGrid を GridView に変更して実行するとエラーになります。
原因は、GridView が VerifyRenderingInServerForm を呼び出していて、Form のレンダリング中に GridView のレンダリングが行われていないためです。
で、これを回避するためには VerifyRenderingInServerForm をオーバーライドしろとなっています。
で、いくつかの掲示板は blog では Page::VerifyRenderignInServerForm を中身空でオーバーライドしているコードが見受けられます。
これは非常に危険です。
VerifyRenderingInServerForm はメソッド名どおり、コントロールが HtmlForm 内に配置されレンダリングされていることを確かめます。
つまり、これを空でオーバーライドすると全てのコントロールが HtmlForm 外に配置されていても例外が出力されないということになります。
ダウンロードという一機能のために画面全体の ASP.NET のアーキテクチャに影響する変更をしてはなりません。
VerifyRenderingInServerForm を呼び出しているのは GridView だけではないのです。
せめて下記のようにするべきでしょう。

private bool _isDownloading = false;
public override void VerifyRenderingInServerForm(Control control)
{
    if (!_isDownloading)
    {
        base.VerifyRenderingInServerForm(control);
    }
}
protected void downloadButton_Click(object sender, EventArgs e)
{
    base.Response.ContentType = "application/vnd.ms-excel";
    base.Response.AppendHeader("content-disposition", "attachment;filename=hoge.xls");
    using (HtmlTextWriter writer = new HtmlTextWriter(base.Response.Output))
    {
        try
        {
            _isDownloading = true;
            this.GridView1.RenderControl(writer);
            writer.Flush();
            base.Response.End();
        }
        finally
        {
            writer.Close();
        }
    }
}