2010年7月25日日曜日

Data ServicesのPOCO利用

ADO.NET Dataservice/WCF Data ServicesってそれぞれEntity Frameworkを使う場合とPOCOを使う場合と、それぞれを混在させたい場合とあるような気がするけどどうなんでしょう。Read Onlyなら普通に混在できていいんじゃないかと思うけど簡単に出来たりしないのかな~。

データ モデル (ADO.NET Data Services フレームワーク)

試しにNorthwindのProducts/Categories/Order/Order Detailsでやってみた。

まずはVS2008を使ってADO.NET Entity Data Modelを以下のように作成。

astoria1

続いてADO.NET Data Serviceを作成。

 

public class DataEF : DataService<NorthwindEntities>
{
  public static void InitializeService(IDataServiceConfiguration config)
  {
    config.UseVerboseErrors = true; // 追加

    config.SetEntitySetAccessRule("*", 
EntitySetRights.AllRead); config.SetServiceOperationAccessRule("*",
ServiceOperationRights.AllRead); } }

astoria2

普通ですね。

これに以下のようなPOCOクラスも混在させたい。

public class DailyOrderSummary
{
  public int Year { get; set; }
  public int Month { get; set; }
  public int Day { get; set; }
  public decimal Amount { get; set; }
}

このモデルを返すのは以下のようなクエリです。

from o in Context.Orders
where o.OrderDate.HasValue
group o by new 
{ 
  o.OrderDate.Value.Year, 
  o.OrderDate.Value.Month, 
  o.OrderDate.Value.Day 
} into daily
select new DailyOrderSummary
{
  Year = daily.Key.Year,
  Month = daily.Key.Month,
  Day = daily.Key.Day,
  Amount = daily.Sum(d => d.Order_Details
                           .Sum(od => (od.UnitPrice * 
                                       od.Quantity)))
};

がしかし、これを利用するためにDataEfクラスにIQueryableなメソッドを追加してもどうにもこうにも機能してくれないんですよ。Object Service層にはそんなのいないからってことでしょうね。んじゃどうしましょうか。

An ADO.NET Data Services Primer - O'Reilly Answers

ここにあるように一旦POCOだけで動かせる状態にして、そのクラスをプロキシとしてDataService<T>を作ってみます。

public class EfDataModels
{
  public NorthwindEntities Context { get; private set; }

  public EfDataModels()
  {
    Context = new NorthwindEntities();
  }

  public IQueryable<Categories> Categories
  {
    get { return Context.Categories.AsQueryable(); }
  }

  public IQueryable<Products> Products
  {
    get { return Context.Products.AsQueryable(); }
  }

  public IQueryable<Orders> Orders
  {
    get { return Context.Orders.AsQueryable(); }
  }

  public IQueryable<Order_Details> OrderDetails
  {
    get { return Context.Order_Details.AsQueryable(); }
  }

  public IQueryable<DailyOrderSummary> DailyOrderSummaries
  {
    get
    {
      return 
         from o in Context.Orders
         where o.OrderDate.HasValue
         group o by new
                      {
                        o.OrderDate.Value.Year, 
                o.OrderDate.Value.Month, 
                o.OrderDate.Value.Day
                      }
           into daily
           select new DailyOrderSummary
           {
             Year = daily.Key.Year,
             Month = daily.Key.Month,
             Day = daily.Key.Day,
             Amount = daily.Sum(d => d.Order_Details
                        .Sum(od => (od.UnitPrice * 
                          od.Quantity)))
           };
    }
  }
}

これを使ってDataEfを定義することにしてみたけど、これはこれでやっぱりエラー。

astoria3

でもね、上記EfDataModelクラスからEntity Modelで定義したものを除外してDailyOrderSummariesだけにするとうまく行くわけですよ。

astoria4 astoria5

となると、違いはDataService<T>に指定するクラスじゃなくて、モデルの基底クラスなのかなとなりますね。なりませんかね。ソースかドキュメントでもあれば自信を持って基底クラスがEntityObjectのものがいるとPOCO混在出来ないと言えるところなんですが、そのへんよくわからないです。教えてエライ人!

で、それならそれでLINQ to SQLのDataContextを使うという方法もありますね。こっちは基底クラスがいない(objectな)わけで。最初に戻ってLINQ to SQLのDataContextの作成からやり直してみます。

astoria6

EFと一緒です。あ、そうそうちなみにPOCOの場合、キー項目がわからないので、クラスにDataServiceKey属性を付けるのを忘れずに。

ADO.NET Data Services and LINQ-to-SQL - Sergey Zwezdin

なので、先のDailyOrderSummaryクラスは以下のように属性を付けておく必要あり。

[DataServiceKey("Year", "Month", "Day")]
public class DailyOrderSummary
{
  public int Year { get; set; }
  public int Month { get; set; }
  public int Day { get; set; }
  public decimal Amount { get; set; }
}

DataContextに追加したモデルたちもpartialなので同じように定義します。

[DataServiceKey("OrderID")]
partial class Order
{
}

[DataServiceKey("OrderID","ProductID")]
partial class Order_Detail
{
}

[DataServiceKey("ProductID")]
partial class Product
{
}

[DataServiceKey("CategoryID")]
partial class Category
{
}

これをプロキシとなるDataModelsにまるっといれこんで以下のようなクラスができました。

public class DataModels
{
  public DataL2SDataContext Context { get; private set; }

  public DataModels()
  {
    Context = new DataL2SDataContext();
  }

  public IQueryable<Category> Categories
  {
    get { return Context.Categories; }
  }

  public IQueryable<Product> Products
  {
    get { return Context.Products; }
  }

  public IQueryable<Order> Orders
  {
    get { return Context.Orders; }
  }

  public IQueryable<Order_Detail> OrderDetails
  {
    get { return Context.Order_Details; }
  }

  public IQueryable<DailyOrderSummary> DailyOrderSummaries
  {
    get
    {
      return 省略
    }
  }
}

なんか無駄にコードの量が増えてきて面倒になってきた...。

astoria7 astoria8 astoria9

ナイス!

ここまで来たら、VS2010でADO.NET POCO Entity Generatorを使って同じようにやりたくなるってもんですよね。

ADO.NET C# POCO Entity Generator

このジェネレータはT4になってて、EDMXファイルを指定すると、ObjectContex派生のコンテキストクラスと、エンティティPOCOクラスを生成してくれます。

もちろんPOCOエンティティなのでDataServiceKey属性定義は必要だね。やってみよう!

astoria10 astoria11

おぉ~、いいじゃ~ん。と思ったのもつかの間。

astoria12

ジェネレートしたエンティティを参照すると↑こんなの出てきてちゃんと動かない。なんでじゃ~。出力されたエラーを見てみると...。

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<feed xml:base="http://localhost:29890/Data.svc/" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://www.w3.org/2005/Atom">
  <title type="text">Categories</title>
  <id>http://localhost:29890/Data.svc/Categories</id>
  <updated>2010-07-25T06:29:58Z</updated>
  <link rel="self" title="Categories" href="Categories" />
  <m:error>
    <m:code></m:code>
    <m:message xml:lang="ja-JP">内部サーバー エラーです。型 'System.Data.Entity.DynamicProxies.Categories_549968D49334B0D9E524C2FC37C19156947873B86A46A78227AFE184CB25AA68' は複合型またはエンティティ型ではありません。</m:message>
  </m:error>

なんじゃこれ。いろいろ調べてみたらDynamicProxiesを使わないようにすればいいという記述を発見。

ADO.NET C# POCO Entity Generator and Data Services
ObjectContextOptions プロパティ (System.Data.Objects)

というわけで、POCO GeneratorのTTファイルをいじることにしてみます。

VSに生成されてる~.Context.ttファイルを開いて、Constructorsリージョンで隠れてる部分を開いて以下のように変更。

#region Constructors

public <#=code.Escape(container)#>()
  : base(ConnectionString, ContainerName)
{
  ContextOptions.ProxyCreationEnabled = false; 
<#
WriteLazyLoadingEnabled(container);
#>
}

public <#=code.Escape(container)#>(string connectionString)
: base(connectionString, ContainerName)
{
  ContextOptions.ProxyCreationEnabled = false; 
<#
WriteLazyLoadingEnabled(container);
#>
}

public <#=code.Escape(container)#>(EntityConnection connection)
: base(connection, ContainerName)
{
  ContextOptions.ProxyCreationEnabled = false; 
<#
WriteLazyLoadingEnabled(container);
#>
}

#endregion

この状態で動かしてみます。

astoria13

今度は通常のエンティティクラスの参照もうまくいきました。ちなみにttファイルをいじってしまえば、DataServiceKey属性もハナからくっついた状態でエンティティクラスを生成させることも出来ますね。

using System.Data.Services.Common;
<#
    BeginNamespace(namespaceName, code);
    bool entityHasNullableFKs = 
       entity.NavigationProperties
             .Any(np => np.GetDependentProperties()
                          .Any(p=>ef.IsNullable(p)));
#>
[DataServiceKey(<#= string.Join(",",entity.KeyMembers.Select(km=>"\""+km.Name+"\""))#>)]
<#=Accessibility.ForType(entity)#> 
 <#=code.SpaceAfter(code.AbstractOption(entity))#>
 partial class <#=code.Escape(entity)#>
 <#=code.StringBefore(" : ", code.Escape(entity.BaseType))#>
{
<#
    region.Begin("Primitive Properties");

    foreach (EdmProperty edmProperty in 
                           entity.Properties
                                 .Where(p => p.TypeUsage.EdmType is PrimitiveType && 
                                             p.DeclaringType == entity))

太字の1行。

ようはPOCOのみで構成してしまえば、Read OnlyのData Servicesは比較的簡単に公開できるね、っていう話。

なんだけど、本質的にはData ServiceのレイヤでごちゃごちゃせずにDBにViewを定義して、そのViewをそのまま公開するのが本筋だと思うわけです。Viewが集計に必要なRaw状態になってれば、あとはPivotTableなり使ってExcelでよしなにやってしまえよ、というのがセルフBIのスタートラインなんじゃないのかね。賢くないことをしようとすると無駄なことをたくさんしないといけなくなるから、そこんとこちゃんとやりたまえよ。

2010年7月18日日曜日

Programming Microsoft ASP.NET MVC

Amazon.co.jp: Programming Microsoft ASP.NET MVC: Dino Esposito: 洋書

先月6/3にこの本が届いてから、毎日通勤電車で少しずつだけど読み進め、やっと終わることが出来たっす。時間かかり過ぎ。

ASP.NET MVC 2に関する書籍は発売延期を繰り返しまだ全然出てきてないですが、7/21にはAmazon.co.jp: Pro ASP.NET MVC 2 Framework, Second Edition: Steven Sanderson: 洋書も届くので、その前に読み終えることができてちょっとホッとしてます。

3部構成になっていて、1部はMVCとはなんぞや、2部は内部構造、3部は機能紹介と結構豊富でAppendix含め全549ページ。読み応え抜群です。

1部のMVC、MVP、MVVPのアーキテクチャデザインの解説はかなり勉強になります。Original MVCとModel 2のMVCの違い、ASP.NET MVCはModel2なのでレイヤ的にModelはView Modelなんだよ、だったり(ヘルプ - IBM WebSphere Help Systemを見てもわかるとおりMVC Model 2でのModelとビジネスロジック+DALは別物)。Chapter 3は何度読んでも面白いです。それ以外のASP.NETとIISの関係なんかは知ってる人には面白味にかける部分かも。2部以降少し新鮮味に欠ける部分も多くなりますが、明確に書かれているのを見たことがないMVC1とMVC2の機能の違い(全然知らなかったのがTempDataの変化)がところどころ差し込まれてるので、これまた面白いです。3部のChapter 11はカスタマイズポイントが事細かに書かれているので、個人的には一番盛り上がりました。ValueProviderはあんまり取り上げられてなくてちょっと残念。というか、Providerに関してはそれほどかも。

Chapter2のNote枠に書かれてたことで、なぬ~と思ったところがあったので紹介しておくと「.NET4では直ってるけど、system.WebServer/handlersにUrlRouting.axdが無いとIIS7の統合モードで動かないバグがあるよ」っていうところ。ローカルIISにデプロイして確認してみたところ、404エラーが出てちゃんと機能させることが出来ませんでした。気をつけようね!

なんだかんだと、面白いことがたくさん書かれてて、読んで損することは絶対ないと言い切れる内容だと思います。英語でDinoさんの難しい言い回しの部分は多々あるけど、その辺は適当に辞書引いて関係ないと思ったら読み飛ばし、気になるところだけがっつり読み込む感じで十分楽しめます!

次の本は776ページらしいので、またのんびり2カ月くらいかけて読んみようと思います。

鼻唄三丁と401

401と言えばUnauthorizedなんて言う人はHTTP好きすぎ。今回は違ってAppleからリリースされたiOS4.0.1→401です。

アップル - iPhone - 新しいiOS 4ソフトウェアアップデートの機能をご紹介します。

昨日の夜に早速適用したら、それはそれは残念な結果に。なんとまぁ更新に失敗してしまいまして。原因はよくわからないけど、何度やっても途中で失敗する。ダウンロードファイル(iPhone3,1_4.0.1_8A306_Restore.ipsw)を消してやり直してもダメで、全く起動できなくなりました。泣ける。過去一度もこんなことになったことないのに~。

しょうがないから場所もよく覚えてない(一度行ったことあるはずなんだけど)銀座アップルストアに行ってきたですよ。そしたら、その場で更新適用したらすんなり出来たみたいで「普通にできましたよ~」って言われた。ギャフン。ちょっとキレ気味で「どうなんてんのさ、電話もできねーじゃん!」って文句言ってごめんね。帰ってから同期したら普通に元通りでホッとしました。

IMG_0002 IMG_0001

ちなみに写真は電車で銀座に行くのにつかった京急の八丁畷。のどかすぎです(ホネだけに)。

Bing翻訳(Bing Translator)のブックマークレット

違うウィンドウ(タブ)で開くとき。

javascript:window.open('http://www.microsofttranslator.com/bv.aspx?ref=Internal&from=&to=ja&a='+encodeURI(location.href),'_blank','');void(0);

Bing翻訳

同じウィンドウで翻訳するとき。

javascript:location.href='http://www.microsofttranslator.com/bv.aspx?ref=Internal&from=&to=ja&a='+encodeURI(location.href);

Bing翻訳

とりあえず、見つからなかったので。

2010年7月11日日曜日

GridViewも使ってます

MVCだけじゃないよ。WebFormも使ってるよ。最近GridViewで表示結果が1件だけだったら最初から選択状態にしたいな、なんて思ったわけですが、そんなときってSelectedIndexに行番号セットすれば済むよね。

  <asp:GridView runat="server" ID="gridView" 
    DataSourceID="dataSource" AutoGenerateColumns="false" 
SelectedRowStyle-CssClass="selectedRow" ShowHeader="false" DataKeyNames="Name"> <Columns> <asp:CommandField ShowSelectButton="true" /> <asp:BoundField DataField="Name" /> <asp:BoundField DataField="AkumaNoMi" /> </Columns> </asp:GridView> <asp:ObjectDataSource runat="server" ID="dataSource"
TypeName="WebApplication1.People" SelectMethod="Select">
</asp:ObjectDataSource> <asp:Button runat="server" ID="button" Text="ぼたーん" /> <h2 runat="server" id="subject"></h2>

こんなページでしょうか。

gridview1

コードビハインドはこうですよね。

  public class Person
  {
    public string Name { get; set; }
    public string AkumaNoMi { get; set; }
  }

  public class People
  {
    private static List<Person> _people = new List<Person>
               {
                 new Person {Name = "ルフィー", AkumaNoMi = "ゴムゴム"},
                 new Person {Name = "ニューゲート", AkumaNoMi = "グラグラ"},
               };

    public IEnumerable<Person> Select()
    {
      return _people;
    }
  }

  public partial class _Default : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      gridView.SelectedIndexChanged += (s, ev) => 
subject.InnerText = gridView.SelectedIndex + "行目"; } }

ObjectDataSourceを使ってるのはデータバインドの処理とか実際にはコード書かないっていう前提だからです。この状態で、選択ボタンを押すとちゃんと「n行目」って選択した行が表示されましょう。そうでしょう。

gridview2

これって普通なんだけど、GridViewのSelectedIndexにセットするようPage_Loadに書いてみても「n行目」とは表示されませぬ。されませぬ。

    protected void Page_Load(object sender, EventArgs e)
    {
      gridView.SelectedIndexChanged += (s, ev) => 
subject.InnerText = gridView.SelectedIndex + "行目"; if(!IsPostBack) { gridView.SelectedIndex = 1; } }

gridview3


↑ちゃんとニューゲート選択されてるけど「1行目」とは表示されない。なぜでしょうか。SelectedIndexプロパティに値をセットしても、GridViewがSelectedIndexChanging/SelectedIndexChangedイベントをRaiseしてくれないからですね。これをRaiseしてあげればいいんだけどそんなことしてくれないと思うので、そんな時にはGridViewにあるprotectedなOnSelectedIndexChanging/OnSelectedIndexChangedを呼べばいいでしょう。GetMethodで取り出せばprotectedだとしても知ったこっちゃないしね。

 

    private void GridViewSelectedIndex(GridView grid, int index)
    {
      grid.SelectedIndex = index;
      var selectedIndexChanged = typeof(GridView).
GetMethod("OnSelectedIndexChanged",
BindingFlags.NonPublic |
BindingFlags.Instance); if (selectedIndexChanged != null) { selectedIndexChanged.Invoke(grid,
new object[] { new EventArgs() }); } }

これをPage_Loadの”gridView.SelectedIndex = 1;”の部分で呼び出してあげるように書き換えちゃえば、ほら出来た!

gridview4

うぬ。悪くない。でも、これと同じことをクライアントサイドで選択ボタンを押したことにすることでも、実現できますね。例えばこう。

  <script type="text/javascript">
    <% if(!IsPostBack){ %>
    $(function () { 
      __doPostBack("<%=gridView.ClientID.Replace("_","$") %>","Select$1");
    });
    <%} %>
  </script>
  

固定でニューゲートを選択させてます。Select$1の部分。これはちょっと気持ち悪いかも。悪くないとは言いがたい。UpdatePanelに入れておけばそれなりな感じでいいかもしれないけど、普通に1回PostBackされるから悩ましい。

サーバーサイドとクライアントサイドのどちらをチョイスしてもいいかなと思うけど、どうでしょうね。いきなりGridViewの話をしているのはフリで、ここからが本題です。

AjaxControlToolkit(ACT)をがんばって使ってます。WebFormでの簡単Ajax導入に関してACTはとてもいい選択肢ではありますね。お金払わなくていいし、クライアントサイドの知識も要らないし。でも気に入らない部分も多くてウキャ~!ってなる。ACTとはいえ、レンダリングされてしまえばただのHTMLとJavaScriptなわけじゃないですか。気に入らなければ書き換えちゃえばいい。どこを書き換えるかがポイントだと思いますが、今回Accordionを書き換えてみました。ボス、ごめんね!

先程のGridViewのサンプルの続きに書き足していきます。

まずはASPXに以下を追加。これでAccordionが使えます(なんつーかツールボックスからのドラッグアンドドロップのやり方を知ってるともっとラクにかけるんだろうけど、そんなやり方はわすれたので普通に手で書いてます)。

  <asp:ToolkitScriptManager runat="server"></asp:ToolkitScriptManager>
  <asp:Accordion runat="server" ID="accordion"
       HeaderCssClass="acd_header" HeaderSelectedCssClass="acd_selected" 
ContentCssClass="acd_content"> <Panes> <asp:AccordionPane runat="server" ID="pane1"> <Header>pane 1</Header> <Content>パネルのコンテンツ その1 <p>The Ajax Control Toolkit contains a rich set of controls that you can use to build highly responsive and interactive Ajax-enabled Web applications. The Ajax Control Toolkit contains more than 40 controls, including the AutoComplete, CollapsiblePanel, ColorPicker, MaskedEdit, Calendar, Accordion, and Watermark controls. Using the Ajax Control Toolkit, you can build Ajax-enabled ASP.NET Web Forms applications by dragging-and-dropping Toolkit controls from the Visual Studio Toolbox onto a Web Forms page.</p> </Content> </asp:AccordionPane> <asp:AccordionPane runat="server" ID="pane2"> <Header>pane 2</Header> <Content>パネルのコンテンツ その2 <p>The Ajax Control Toolkit contains a rich set of controls that you can use to build highly responsive and interactive Ajax-enabled Web applications. The Ajax Control Toolkit contains more than 40 controls, including the AutoComplete, CollapsiblePanel, ColorPicker, MaskedEdit, Calendar, Accordion, and Watermark controls. Using the Ajax Control Toolkit, you can build Ajax-enabled ASP.NET Web Forms applications by dragging-and-dropping Toolkit controls from the Visual Studio Toolbox onto a Web Forms page.</p> </Content> </asp:AccordionPane> <asp:AccordionPane runat="server" ID="pane3"> <Header>pane 3</Header> <Content>パネルのコンテンツ その3 <p>The Ajax Control Toolkit contains a rich set of controls that you can use to build highly responsive and interactive Ajax-enabled Web applications. The Ajax Control Toolkit contains more than 40 controls, including the AutoComplete, CollapsiblePanel, ColorPicker, MaskedEdit, Calendar, Accordion, and Watermark controls. Using the Ajax Control Toolkit, you can build Ajax-enabled ASP.NET Web Forms applications by dragging-and-dropping Toolkit controls from the Visual Studio Toolbox onto a Web Forms page.</p> </Content> </asp:AccordionPane> <asp:AccordionPane runat="server" ID="pane4"> <Header>pane 4</Header> <Content>パネルのコンテンツ その4 <p>The Ajax Control Toolkit contains a rich set of controls that you can use to build highly responsive and interactive Ajax-enabled Web applications. The Ajax Control Toolkit contains more than 40 controls, including the AutoComplete, CollapsiblePanel, ColorPicker, MaskedEdit, Calendar, Accordion, and Watermark controls. Using the Ajax Control Toolkit, you can build Ajax-enabled ASP.NET Web Forms applications by dragging-and-dropping Toolkit controls from the Visual Studio Toolbox onto a Web Forms page.</p> </Content> </asp:AccordionPane> <asp:AccordionPane runat="server" ID="pane5"> <Header>pane 5</Header> <Content>パネルのコンテンツ その5 <p>The Ajax Control Toolkit contains a rich set of controls that you can use to build highly responsive and interactive Ajax-enabled Web applications. The Ajax Control Toolkit contains more than 40 controls, including the AutoComplete, CollapsiblePanel, ColorPicker, MaskedEdit, Calendar, Accordion, and Watermark controls. Using the Ajax Control Toolkit, you can build Ajax-enabled ASP.NET Web Forms applications by dragging-and-dropping Toolkit controls from the Visual Studio Toolbox onto a Web Forms page.</p> </Content> </asp:AccordionPane> </Panes> </asp:Accordion>

acd1

恐ろしいほど簡単。もちろん、サーバーサイドで動的にPaneを追加するような使い方も多いでしょう。そうすると、Paneが10個や20個にナッチャウことも。そうなるとインターフェースとしてちょっと問題あり。そんなに追加しなきゃAccordionっていいのにとつくづく思う。でも、かなり開発が進んでしまうと、おいそれとインターフェースを変更するのはしんどい作業になります。変更箇所多すぎるし。そんなこんなで、クライアントサイドで何とかしてしまいます。

acd2acd3

完成形は↑これです。何をしてるのかというと、AccordionのHeaderをSelect(DropDown)にして、選択したら該当するPaneの中身を表示するという動きです。ヒマがあったら動かしてみてね。

まずは、AccordionがレンダリングするHTMLを確認。

<div>
  <input type=”hidden” value=”選択してるPaneのIndex”/>
  <div class=”header class name”>header 1</div>
  <div class=”content class name”>content 1</div>
  <div class=”header class name”>header 2</div>
  <div class=”content class name”>content 2</div>
</div>

こんな構造ですね。ヘッダとコンテンツが、連続してるdiv要素をクラス名で判別というのがちょっと気に入らないですが、今回そこはどうでもいいです。最初にこういう構造でレンダリングされるというのがわかりさえすればいいです。

続いて、どういうスクリプトが動いてるのかを確認してみると、ページ内では↓これだけですね。

<script type="text/javascript"> 
//<![CDATA[
(function() {var fn = function() {
$get("ctl00_MainContent_ToolkitScriptManager1_HiddenField").value = '';
Sys.Application.remove_init(fn);};Sys.Application.add_init(fn);})();


Sys.Application.add_init(function() { $create(Sys.Extended.UI.AccordionBehavior,
{"ClientStateFieldID":"ctl00_MainContent_accordion_AccordionExtender_ClientState",
"HeaderCssClass":"acd_header",
"HeaderSelectedCssClass":
"acd_selected","id":"ctl00_MainContent_accordion_AccordionExtender"},
null, null, $get("ctl00_MainContent_accordion")); }); //]]> </script>

Sys.Application.add_initのタイミングでAccordionBehaviorオブジェクト(クラスのような作りかな?)を渡してますね。そもそもSystem.Extendedが何者なのかしらないですけど、ソースが公開されてるので確認してみたところ、各種Behaviorオブジェクトのprototype.initializeでいろいろ初期化処理を書いてました。

ということは、そこを壊せば、Accordionの初期化処理は走らなくなるということなので、add_initで追加したものが実行される前に、AccodionBehavior.prototype.initializeを壊してみました。runat="server"なform要素の閉じタグ直前に以下のコードを書き足します。

  <script type="text/javascript">
    if (Sys.Extended !== undefined && 
Sys.Extended.UI.AccordionBehavior !== undefined) { Sys.Extended.UI.AccordionBehavior.prototype.initialize = function () { }; } </script>

やりすぎな感じもしますが、まぁいいでしょう。

続いてドロップダウンを表示する枠と、Paneの中身を表示する枠を用意します。Accordionタグの上にでもおいておきます。

  <div id="dropdown"></div>
  <div id="viewer"></div>

最後に、Accordionそのものが表示されてしまわないように、Accordionを非表示するためのCSSを定義します。Visibleを指定しちゃうとホントになくなっちゃうからCSSだけで消しちゃうのがいいです。

  <asp:Accordion runat="server" ID="accordion"
       CssClass="accordion_hack" HeaderCssClass="acd_header" HeaderSelectedCssClass="acd_selected" 
       ContentCssClass="acd_content">

太字のところで、クラス名指定して、そのクラスはdisplay:none;だけを適用してます。

あとはJavaScriptでDropDownを生成するのと選択肢を変えたときに表示を切り替えるようなコードをゴリゴリ書けば完成。

<script type="text/javascript">
  $(function () {
    var hack = function () {
      var accordion = $(".accordion_hack:first");
      var viewer = $("#viewer");

      var dropdown = $("<select />");
      var currentId = accordion.find(".acd_selected")
.next()
.attr("id"); var prevId = currentId; accordion.find(".acd_content").each(function (idx, e) { $(dropdown).append( $("<option />").text($(e).prev().text()) .val($(e).attr("id"))); }); $(dropdown).appendTo("#dropdown"); $(dropdown).change(function (e) { prevId = currentId; currentId = $(this).val(); viewer.fadeOut("fast",function () { if (currentId != prevId) { $("#" + prevId).appendTo(accordion); } $("#" + currentId).show().appendTo(viewer); }).fadeIn("fast"); // accordion.find("input[type='hidden']:first")
.val($(this).find("[value=" + currentId + "]").index()); }); $(dropdown).val(currentId).trigger("change"); }; hack(); }); </script>

わざわざhack変数にいれてるのは、特に意味ないです。テスト目的なので気にしないでね!長々とMVCとは関係ないことを書きましたが、要はJavaScriptとHTML、DOM操作、CSSを理解してると、ASP.NETもいろいろカスタムなレンダリングを気軽に実装できるよっていう話なのと、ACTをハックすることでちょっと勝てた気になれたので、調子にのってエントリしてみました。

今回の一式もダウンロード出来るようにしておきます。興味があればどうぞ。

だた、注意点があります。VS2010でASP.NET 4をターゲットにして作ってるのに、ACTは4.0じゃなくて3.5向けのものを使ってます。理由はACT4のAccordionPaneがMasterPageを使ってる時に、id属性を正しく吐き出してくれないからです。3.5だと問題ないので、4.0でなんかおかしくなったんじゃないかな。気をつけてね。

2010年7月6日火曜日

DeserializingModelBinder

モダンチョキチョキズを知ってるのはどのくらい少数派なのかが気になる今日この頃。

ASP.NET MVC 2 Futuresに含まれているHtml.SerializeとDeserializeAttributeをクラスのプロパティに対して適用するのにお悩みな方へ。DeserializeModelBinder自体がなぜかDeserializeAttributeクラスのprivate sealedクラスと定義されてしまっているので、全く同じものを以下のように定義することで、ModelBinderAttributeを指定して比較的簡単に出来るようです。

  public class DeserializingModelBinder : IModelBinder
  {

    private readonly SerializationMode _mode;

    public DeserializingModelBinder() : this(SerializationMode.Plaintext) { }
    public DeserializingModelBinder(SerializationMode mode)
    {
      _mode = mode;
    }

    public object BindModel(ControllerContext controllerContext, 
ModelBindingContext bindingContext) { if (bindingContext == null) { throw new ArgumentNullException("bindingContext"); } var vpResult = bindingContext.ValueProvider
.GetValue(bindingContext.ModelName); if (vpResult == null) { // nothing found return null; } MvcSerializer serializer = new MvcSerializer(); string serializedValue = (string)vpResult.ConvertTo(typeof(string)); return serializer.Deserialize(serializedValue, _mode); } }

↑これはソースからコピペです。MvcSerializerが使えなかったらどうしようかと思いましたが、こちらは平気ですね。

  public class Division
  {
    public string Name { get; set; }
    public Person Boss { get; set; }
    public People People { get; set; }
  }

  [Serializable]
  [ModelBinder(typeof(DeserializingModelBinder))]
  public class People : List<Person>
  {}

  [Serializable]
  public class Person
  {
    public string Name { get; set; }
    public DateTime MemorialDay { get; set; }
  }

↑このようなモデルクラスたちを定義してみました。あえてPeopleクラスを定義しているのはModelBinderAttributeがプロパティに指定できないからです。DeserializeAttributeにいたってはParameterにしか指定できないし、ModelMetadataProviderらへンに手を入れる必要がある気がしなくもなく(たぶんメタデータを見てModelBinderを切り替えるような仕組みでしょうか)、難しそうだったので使っていません。

このようにクラスを定義した上で、ModelBinderAttributeでModelBinderを指定する方法が比較的簡単でスマート(?)じゃないかと思います。こうしておくとアクションでは何も意識する必要なく以下のようにアクションパラメータを生成してくれるようになります。

  public ActionResult Division()
  {
    var model = new Division
    {
      Name = "ブチャラティチーム",
      Boss = new Person { Name = "ブローノ・ブチャラティ", 
MemorialDay = new DateTime(2010, 1, 1) }, People = new People { new Person {Name = "ジョルノ・ジョバァーナ",
MemorialDay = new DateTime(2010, 2, 1)}, new Person {Name = "レオーネ・アバッキオ",
MemorialDay = new DateTime(2010, 3, 1)}, new Person {Name = "グイード・ミスタ",
MemorialDay = new DateTime(2010, 4, 1)}, new Person {Name = "ナランチャ・ギルガ",
MemorialDay = new DateTime(2010, 5, 1)}, new Person {Name = "パンナコッタ・フーゴ",
MemorialDay = new DateTime(2010, 6, 1)} } }; return View(model); } [HttpPost] public ActionResult Division(Division model) { return View(model); }

Viewは以下のようにシンプルです。

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcApplication1.Models.Division>" %>
<%@ Import Namespace="Microsoft.Web.Mvc" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
  Division
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Division</h2>

  <% using(Html.BeginForm("Division","Home")) { %>
    <%= Html.EditorFor(m=>m.Name) %>
    <h3>Boss</h3>
    <%= Html.EditorFor(m=>m.Boss) %>

    <h3>People</h3>
    <% foreach (var person in Model.People) { %>
      <%= Html.DisplayFor(m=>person) %>
    <% } %>

    <%= Html.Serialize("People",Model.People) %>
    <input type="submit" value="送信" />
  <% } %>
</asp:Content>

これを実行するとこのようにきちんと復元してくれます。

serialize1 serialize2 serialize3

@jsakamotoさん、いかがでしょうか?

2010年7月4日日曜日

Razorのポテンシャル

Introducing “Razor” – a new view engine for ASP.NET - ScottGu's Blog

↑これ読みました?

Razor View Syntax

↑これも。

これね、よくよく考えたらかなり凄いことに取り組んでるんだと思います。そもそもASP.NET MVCはASP.NETのフレームワークにのっかったものですよね。それはどういう事かというと

  • HttpApplicationのパイプラインで処理
  • HttpContextで現在のリクエストコンテキストに関する全ての情報にアクセス可能
  • System.Web.UI.PageがIHttpHandlerの実装としてPageパイプラインを処理しつつレンダリング

ですね。ASP.NET MVCのViewでは、このフレームワーク(Pageに関する部分)の使い方で変わった部分はほとんどないんですが、構造上使われなくなったものといえばコントロールツリーの構築とポストバックです。コントロールツリーに関しては「runat="server"なコントロールを使ってる場合には作られるじゃないか」と言われればそうなんですが、そこはPageクラスがそうだからで、Viewの性質として必須な機能じゃないのでWebFormとの対比という意味では使ってないと言うことにしましょう。ポストバックですが、これは特にMVC2になってから大きく変化のある部分で例えば以下の単純なViewでもIsPostBackはtrueになりません。

<%@ Page Language="C#" 
MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage" %> <script runat="server"> void Page_Load() { if(IsPostBack) { // PostBack eventはいずこ?
// ここには決して入ってこない } } </script> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <form runat="server"> <asp:Login ID="Login1" runat="server"> </asp:Login> </form> </asp:Content>

Viewのレンダリングの仕様が変更になってるのでWebFormViewにはイベントがイベントとして認識できない形になったから(TextWriter渡しのRender呼び出し)。ようはControllerに対するPOST/PUT/DELETE/GETのHttp MethodがViewに影響を及ぼすことを是としない、という意志の表れなんじゃないか~、なんてな。

話がずれましたがRazorはこのPageクラスに依存しないViewEngineとして造られてるので、Page Pipeline(イベント)は処理されない、コントロールツリーも構築されないという事になって、ASPX構文解析→C#生成の部分と、Razorの準備コスト(テンプレートエンジンとしてのコスト)が同程度だとしても、処理コストは低くなるのでよりスケールするフレームワークになるんじゃないかと思います。

Pageクラス(WebForms)におけるPostBackという発明はPage Controllerの素晴らしい実装だと思いますが、MVCとなればControllerは役割の違うものとして分離されてるので、PostBackは不要だし、それを実装してるPageクラスはリッチすぎるでしょう。DataSetからRepositoryへのスタイルの変化も同じような考え方からきてるんじゃないでしょうかね(メモリバウンドよりCPUバウンド的な)。Pageクラス、Page Pipelineからの脱却。凄くないですか?

と、なんの根拠もないですが、妄想したりしてます。

2010年7月3日土曜日

ふぉー!フォー!デレシシシ。

なんかね~、そっけない箱がね~、あったんですよ。

IMG_0005


でも、開けるとピカピカな箱なんですよ。

IMG_0006


長かった。オンラインショップで予約した負け組で始まった今回の機種変。サイトダウンにめげずF5アタックを繰り返すも当日予約は途中で断念。翌朝7:30にはすんなり予約できたから、これは当日入手期待大だと妄想。それまでiPhone 3GにiOS4を入れて気分だけでも味わってやろうとしたら信じられないくらいパフォーマンス悪くてなんどもたたき壊してやろうかと思う辛い日々。だけど発売日を過ぎてもなんの連絡も無く。ちなみに受付番号下6桁は818XXX。一体全体この放置プレーはなんだ。そんなこんなで6/30にメールが来た。遅すぎるし放置しすぎ。遅れております、のメール1つで全然違うのになぜ放置。まぁ、いいか。

で、箱。長かった。

さて、アクティベーションしようかとしたところ、9:00~19:00が受付時間らしく何も出来ず。敗北感。仕事変えようかと本気で思った。

IMG_0009

もろもろ設定完了して使ってみると3Gとは比べものにならないくらいのパフォーマンスで操作が快適。さすがですぜ!