DropDownList を使って絞込み

by WebSurfer 2011年7月17日 14:29

GridView に表示するレコードを DropDownList を使って絞り込むサンプルです。

GridView に表示するレコードを DropDownList を使って絞り込み

以前、実験室 SelectCommand の切り替えにも、2 つの DropDownList を使って GridView に表示されるレコードを絞り込むサンプルを書きましたが、それは SqlDataSource の SelectCommand（正確には SELECT クエリの WHERE 句）を書き換えていて、そのためのコードを書かなければならないのが面倒で、かつ、あまりスマートな方法とはいえません。

今回、ここに書いた方法は、WHERE 句は以下のように固定しておいて、DropDownList の SelectedValue プロパティの値によって全件抽出と条件抽出の両方に対応できるようにしたものです。

WHERE (@CustomerID='ALL' OR o.CustomerID=@CustomerID) 
  AND (@EmployeeID=0 OR e.EmployeeID=@EmployeeID)

上記で、@CustomerID='ALL' と @EmployeeID=0 が全件抽出の条件で、DropDownList.SelectedValue がそれぞれ "ALL" と "0" の時にその条件に一致させるようにします。

そのために、DropDownList の AppendDataBoundItems プロパティを true に設定した上で、全件抽出条件のための ListItem を追加します。なお、EmployeeID については、データ型が int なので、ListItem は以下のように設定しなければなりません。DropDownList.SelectedValue プロパティは string 型を返しますが、データベースプロバイダが型変換してくれます。

<asp:ListItem Value="0">ALL</asp:ListItem>

これによって C# のコードは一行も書かずに、すべてウィザードベースで作ることができます。上の画像の aspx ページのコードは以下の通りです。データベースには Northwind サンプルデータベースの Orders, Customers, Employees テーブルを使っています。

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:SqlDataSource ID="SqlDataSource1" 
      runat="server" 
      ConnectionString="<%$ ConnectionStrings:Northwind %>" 
      SelectCommand=
        "SELECT DISTINCT o.CustomerID, c.CompanyName 
        FROM Orders AS o 
        INNER JOIN Customers AS c 
        ON o.CustomerID = c.CustomerID">
    </asp:SqlDataSource>
    Customer: 
    <asp:DropDownList ID="DropDownList1" 
      runat="server" 
      AppendDataBoundItems="True" 
      DataSourceID="SqlDataSource1" 
      DataTextField="CompanyName" 
      DataValueField="CustomerID" 
      AutoPostBack="True">
      <asp:ListItem>ALL</asp:ListItem>
    </asp:DropDownList>
    <br />
    <asp:SqlDataSource ID="SqlDataSource2" 
      runat="server" 
      ConnectionString="<%$ ConnectionStrings:Northwind %>" 
      SelectCommand=
        "SELECT DISTINCT o.EmployeeID, 
          e.FirstName + ' ' + e.LastName AS Name 
        FROM Orders AS o 
        INNER JOIN Employees AS e 
        ON o.EmployeeID = e.EmployeeID">
    </asp:SqlDataSource>
    Employee: 
    <asp:DropDownList ID="DropDownList2" 
      runat="server" 
      AppendDataBoundItems="True" 
      DataSourceID="SqlDataSource2" 
      DataTextField="Name" 
      DataValueField="EmployeeID" 
      AutoPostBack="True">
      <asp:ListItem Value="0">ALL</asp:ListItem>
    </asp:DropDownList>

    <asp:SqlDataSource ID="SqlDataSource3" 
      runat="server" 
      ConnectionString="<%$ ConnectionStrings:Northwind %>" 
      SelectCommand=
        "SELECT o.OrderID, c.CompanyName, 
          e.FirstName + ' ' + e.LastName AS Name, 
          o.ShippedDate, o.Freight 
        FROM Orders AS o 
        INNER JOIN Customers AS c 
          ON o.CustomerID = c.CustomerID 
        INNER JOIN Employees AS e 
          ON o.EmployeeID = e.EmployeeID
        WHERE (@CustomerID='ALL' OR o.CustomerID=@CustomerID) 
          AND (@EmployeeID=0 OR e.EmployeeID=@EmployeeID)
        ORDER BY o.OrderID">
        <SelectParameters>
          <asp:ControlParameter ControlID="DropDownList1" 
            Name="CustomerID" 
            PropertyName="SelectedValue" />
          <asp:ControlParameter ControlID="DropDownList2" 
            Name="EmployeeID" 
            PropertyName="SelectedValue" />
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:GridView ID="GridView1" 
      runat="server" 
      AllowPaging="True" 
      AutoGenerateColumns="False" 
      DataKeyNames="OrderID" 
      DataSourceID="SqlDataSource3">
      <Columns>
        <asp:BoundField 
          DataField="OrderID" 
          HeaderText="OrderID" 
          InsertVisible="False" 
          ReadOnly="True" 
          SortExpression="OrderID" />
        <asp:BoundField 
          DataField="CompanyName" 
          HeaderText="Customer" 
          SortExpression="CompanyName" />
        <asp:BoundField 
          DataField="Name" 
          HeaderText="Employee" 
          ReadOnly="True" 
          SortExpression="Name" />
        <asp:BoundField 
          DataField="ShippedDate" 
          HeaderText="Shipped Date" 
          SortExpression="ShippedDate" 
          DataFormatString="{0:yyyy/M/d}" >
          <ItemStyle HorizontalAlign="Center" />
        </asp:BoundField>
        <asp:BoundField 
          DataField="Freight" 
          HeaderText="Freight" 
          SortExpression="Freight" 
          DataFormatString="${0:N2}" >
          <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
      </Columns>
    </asp:GridView>
  </div>
  </form>
</body>
</html>

57c74d71-ad07-4caf-b4fd-2d63043ca780|0|.0

Tags: DropDownList, GridView

ASP.NET

W3C 検証にパスしない

by WebSurfer 2011年6月13日 22:58

ページングする際に &page=n（n はページ番号）というクエリ文字列がページャーのリンクの URL に追加される場合があります。しかしながら、& のままでは W3C Markup Validation に通りません。HTML エンコードして & にする必要があります。この問題には今まで気がつきませんでした。（汗）

この問題を解決するには、User controls/PostList.ascx.cs の InitPaging メソッドを以下のように修正します。

private void InitPaging()
{
  string path = Request.RawUrl;

  if (!(Request.QueryString["year"] != null || 
    Request.QueryString["date"] != null))
    path = REMOVE_DEFAULT_ASPX.Replace(path, string.Empty);

  if (path.Contains("?"))
  {
    if (path.Contains("page="))
    {
      int index = path.IndexOf("page=");
      path = path.Substring(0, index);
    }
    else
    {
      path += "&";
    }
  }
  else
  {
    path += "?";
  }

  int page = GetPageIndex();
  string url = path + "page={0}";

  // 下記の追加のみ
  url = url.Replace("&", "&amp;");

  hlNext.HRef = string.Format(url, page);		
  hlPrev.HRef = string.Format(url, page + 2);

  if (page == 0)
  {
    hlNext.Visible = false;
  }
  else
  {
    (Page as BlogBasePage).AddGenericLink(
      "next", 
      "Next page", 
      hlNext.HRef);
    Page.Title += " - Page " + (page + 1);
  }

  if (hlPrev.Visible)
    (Page as BlogBasePage).AddGenericLink(
      "prev", 
      "Previous page", 
      string.Format(url, page + 2));
}

06ea958f-8f9a-4702-bc0e-b808ca158318|0|.0

Tags: W3C

BlogEngine.NET

BlogEngine.NET 2.0 の導入

by WebSurfer 2011年6月11日 15:49

今年の 1 月にリリースされた BlogEngine.NET バージョン 2.0 を導入しました。

BlogEngine.NET 2.0 の導入

と言っても、既存のバージョン 1.6.1 のブログ（ここがそれです）をアップグレードしたわけではなく、ここは 1.6.1 のまま残しておいて、BlogEngine2 という名前の別アプリケーションとして構築しました。

まだ試験段階ですので、試験のための記事しかありませんし、スタイルもデフォルトのままですが、以下の URL から入れます。

http://surferonwww.info/BlogEngine2/default.aspx

今回は、、データストアとして、今まで使っていなかった MySQL を使うことにしました（現在のホスティングサービスでは SQL Server と MySQL がそれぞれ 300MB ずつ使えます）。ちなみに、既存のブログ（ここ）は SQL Server を使用しています。

Forms 認証にはサイト内で共通の SQL Server を利用した SqlMembershipProvider, SqlRoleProvider を使って、サイト内でアプリケーション間を移動するとき再認証を受けなくても済むようにしました。

とりあえず見つけた問題はすべて解決できましたので、どのような問題があったのか、どう解決したのかを備忘録として書いておきます。

データベース構築の問題

BlogEngine.NET/setup/MySQL フォルダの中にデータベースを構築するためのスクリプトファイルが用意されており、これを走らせて必要なテーブルを生成します。このスクリプトは各テーブルを DEFAULT CHARSET=latin1 で作るように指定しています。（latin1 が MySQL のデフォルトらしい）。

一方、MySQL 全体とデータベースのキャラクターセットはすべて UTF-8 で設定しており、その状態で日本語を使うと、Incorrect string value というエラーが出て投稿できませんでした。

結局 latin1 で作ったデータベースはドロップして、スクリプトの DEFAULT CHARSET=latin1 を utf8 に書き換えてテーブルを作り直して解決しました。

バージョン 1.6.1 の諸問題

以下の致命的な問題（詳細はリンク先の記事を参照ください）はすべて解消されていました。(1) については Encoding.Default が Encoding.UTF8 に変更されていました。(2), (3) は大幅にコードが書き換えられており、1.6.1 で問題だったコードは見つからず、実際に試して不具合は出ませんでした。

(1) 日本語の文字化け

(2) SyntaxHighlighter のコードの間違い

(3) reCaptcha のコードの間違い

以下は見栄えなどの軽微な問題です。1.6.1 の場合と同様な修正が必要でした。問題の詳細および修正方法はリンク先の記事を参照ください。

(4) 各記事の左上の日付の表示が 31. 5月 2010 12:15 のようになる

(5) Search の結果、タイトルの表示が「の検索結果 'XXXX'」となる

(6) 「関連するブログ」でテキストの折り返しがされない

(7) ウィジェットのカレンダーが月曜日から始まっている

(8) タイトルが 5月 31. 2011 のように表示される

以下の問題は 1.6.1 の場合（詳細はリンク先の記事を参照ください）より悪化していました。詳細は CodePlex の Discussions のページにアップしました。まだ検証中ですので、サーバーには修正済みファイルはアップしていません。検証が終わって修正版をサーバーにアップしたら、詳しい話を書きます。

(9) Tag cloud 中の日本語の Tag の問題

最後に、以下の問題は、SyntaxHighlighter のバージョンが変わったためか、解消されていました。

(10) SyntaxHighlighter とフラグメント識別子

------------ 2011/6/14 追記 ------------

上の (9) で書いた日本語の Tag の問題の解決策は BlogEngine.NET 2.0 の Tag cloud の問題に詳細を書きました。興味がありましたらそちらを参照ください。

bd193331-af8d-4137-a972-b248a227ab37|0|.0

Tags:

BlogEngine.NET

WebSurfer's Home

DropDownList を使って絞込み

W3C 検証にパスしない

BlogEngine.NET 2.0 の導入

About this blog

Search

Recent Posts

Calendar

日	月	火	水	木	金	土
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	1	2	3	4
5	6	7	8	9	10	11

日	月	火	水	木	金	土
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	1	2	3	4
5	6	7	8	9	10	11

日	月	火	水	木	金	土
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	1	2	3	4
5	6	7	8	9	10	11