ページ

2011年11月25日金曜日

◆ASP.NET MVC Postデータを取得する

 

ポストページ表示用Actionメソッド

まずは、Post用のページを表示するためのActionメソッドを定義する。(ここではMyPostとした)

ちなみに、ActionメソッドはActionと入力しTab,Tabでコードスニペットを使うのが良さそうだ。

        public ActionResult MyPost()
{
return View();
}

次にこのメソッドの場所で右クリックして「ビューの追加」を選択。
2011-11-25 15h13_39


ポストページ表示用ビューサンプル


MyPost.aspx


<body>
<div>
<% using (Html.BeginForm())
{%>
<label>名前:</label>
<%: Html.TextBox("name","<初期値>") %>
<input type="submit" value="送信" />
<% } %>

</div>
</body>

ここではまず、HtmlヘルパークラスのBeginFormメソッドを使ってFormタグを展開している。
その中に、ラベル、テキストボックス、ボタンを配置。
テキストボックスにはこれもまたHtmlヘルパークラスのTextBoxメソッドを使用した。
これで表示される画面とソースは以下の通り。
2011-11-25 16h39_42


2011-11-25 16h40_48


ヘルパークラスを使っても、それほど便利という感じでもないが、最近ではRazor記法とかが出てきているようなのでそちらを使ったほうが良いのだろう。


ちなみに、これも最近の機能っぽいが、<%:  %> とするとHTMLエンコードまでやってくれるらしい。


なお、<% using (Html.BeginForm("MyPost", "HelloWorld", FormMethod.Post))とすることでactionとmethodを明示的に指定することも可能。


ポストされたデータを処理するアクションメソッド


基本的には入力画面を表示したアクションメソッドと同じメソッド名になるのだが、区別するためにこちらには[HttpPost]属性を付加する。(というかActionPostスニペットで展開させるとそうなる)
また、ポストされたデータを受け取るためにメソッドに引数を指定する。ここでは画面入力された「name」の値を取得するために(string name)としている。


入力値はRequestプロパティから参照できるHttpRequestオブジェクトからも取得できる(Request.Form(“name”))ので引数の指定は必須では無いようにも思うが、シグネチャが被るので1つは指定しないといけないだろう。


取得したポストデータは画面に渡すためにViewData["HelloName"]に入れておく。


このケースではアクションメソッドの名前と、結果を表示するためのビューの名前が異なるため、Viewメソッドにビューの名前を引数で与えている。


        [HttpPost]
public ActionResult MyPost(string name)
{
ViewData["HelloName"] = "Hello " + name;
return View("Result");
}

結果を表示するビュー


上記で設定されたViewDataを取ってきてそのまま表示するだけだ。


<body>
<div>
<%:ViewData["HelloName"]%>
</div>
</body>

◆ASP.NET ユーザーパラメータを受け取る

ユーザーパラメータを受け取るにはActionメソッドの引数に指定すれば良い。

        public ActionResult Index(string id)
{
ViewData["param1"] = "パラメータ1です。";
ViewData["id"] = String.Format("ユーザーパラメータは({0})です。",id);
return View();
}

<body>
<div>
Hello World !!<br/>
<%=Html.Encode(ViewData["param1"]) %><br />
<%=Html.Encode(ViewData["id"]) %><br />

</div>
</body>

2011-11-25 14h41_48


なお、パラメータを増やすにはGlobal.asaxのルーティング定義にパラメータを追加してあげれば良い。


image


image


image


2011-11-25 14h52_08

◆ASP.NET MVC コントローラーからビューにデータを渡す

コントローラー側は、ControllerベースクラスにViewDataプロパティが用意されている。
これは、ViewDataDictionaryクラスになっていて「Key」「Value」で値が設定できるので以下のようにKey名称を適当に決めて値をセットしてあげれば良い。

        public ActionResult Index()
{
ViewData["param1"] = "パラメータ1です。";
return View();
}

受け取り側のビューでも同様にViewData[“param1”]とやれば値が取ってこれる。
HTMLに埋め込むには<%=……%>コードブロックを使えば良さげ。(かつてのASPっぽい感じかな)


また、HTMLエンコードにはヘルパークラスが提供されていて、Html.Encode()メソッドが使える。


<body>
<div>
Hello World !!<br/>
<%=Html.Encode(ViewData["param1"]) %>
</div>
</body>

2011-11-25 14h17_12

◆ASP.NET MVC ルーティング

ルーティングはGlobal.asaxで定義されている。

    public class MvcApplication : System.Web.HttpApplication
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(
"Default", // ルート名
"{controller}/{action}/{id}", // パラメーター付きの URL
new { controller = "Home", action = "Index", id = UrlParameter.Optional } // パラメーターの既定値
);

}

protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();

RegisterRoutes(RouteTable.Routes);
}
}

RouteCollection型となっているので複数のルーティングを定義できるのだろう。
初期状態では”Default”というルーティングが定義されていて、
「コントローラー名/アクション名/パラメータ」でルーティングされるようだ。


ControllerにはHome、actionにはIndexが初期値として定義してあるので、例えば
「http://ホスト名/コントローラ名」でアクセスされたときにはIndexアクションが実行されてIndexページが返るという仕掛けなのだろう。

◆ASP.NET MVC でHelloWorld

 

以下のサイトを参考にしながら自分なりに勉強してみる。
連載:ASP.NET MVC入門 - @IT

新しいプロジェクトの作成

image

使っているVisualStudioのバージョンやインストールしているMVCモジュールのバージョンによってMVC2だったりMVC3だったりする。(ここではVisualStudio2010の素の状態を使っている)

デフォルトのフォルダ構成

2011-11-21 10h46_402011-11-21 10h49_26

コントローラークラスを作る

    1. 「ソリューションエクスプローラー」で「Controllers」フォルダを右クリックして「追加」「コントローラー」を選択。
      image
    2. 「コントローラーの追加」ダイアログで「コントローラー名」を指定する。
      xxxxControllerという名前にする必要がある。
      image
    3. 「Controllers」フォルダにコントローラーソースが追加される。
      image
      「AccountController」と「HomeController」はテンプレートが追加したもの。
    4. Viewを返す。
      デフォルトでActionResultオブジェクトを返すIndexメソッドが定義されるので、その中でとりあえずViewメソッドを呼んでやるとIndexメソッドに対応したIndex.aspxがブラウザに返るという仕組みのようだ。
      Viewメソッドは継承元のControllerクラスで定義されている。
      ActionResultは抽象クラスなので実際には、それを実装したViewResultオブジェクトを返している。

ビューを作る

Index.aspxを返すコントローラークラスが出来たので、あとはIndex.aspxの実体をViewとして作ってあげる。

    1. 追加された「HelloWorldController」クラスの「Index」メソッド上で右クリックして「ビューの追加」を選択する。
      2011-11-21 11h18_59
    2. 表示されたダイアログでオプションを全てOFFにした状態で「Index」ビューを追加する。
      2011-11-21 11h22_28
    3. 「Views」フォルダーに下にコントローラーと同名のフォルダが作られ、「Index.aspx」ページが追加される。
    4. デフォルトで以下のようなシンプルなHTMLの雛形が作られるので、とりあえず「Hello World!!」だけ追加してみた。
      <html xmlns="http://www.w3.org/1999/xhtml" >
      <head runat="server">
      <title>Index</title>
      </head>
      <body>
      <div>
      Hello World !!
      </div>
      </body>
      </html>

    5. コントローラーとViewの関係を簡単にまとめるとこんな感じだろうか。2011-11-25 11h25_02

動作確認



ここまでとりあえずF5キーを押して動作を確認すると、最初はひな形で作られた以下の画面が表示されるので、適切なドレスに変更する。
2011-11-25 11h59_56


今回の場合は、こんな感じになる。
2011-11-25 12h02_49

2011年11月13日日曜日

◆WPF バインディング2

<オブジェクトとのバインディング>

今度は、コントロール同士ではなくコードビハインド側で作成したオブジェクトとコントロールをバインドしてみる。

とりあえず、画面表示用に以下のXAMLを定義した。

<Window x:Class="BindingSample.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window2" Height="300" Width="300" Name="MyWindow">
<StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="名前:"/>
<TextBox Text="{Binding Name}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="住所:"/>
<TextBox Text="{Binding Address}" />
</StackPanel>
</StackPanel>
</Window>

image


バインドするエンティティのクラスはとりあえず以下のとおり。


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

あとはコードビハインドで、このクラスのインスタンスを作り、WindowのContextに設定してあげれば良い。


        public Window2()
{
InitializeComponent();

Person p = new Person { Name = "原 辰徳", Address = "相模原市1-1" };
this.MyWindow.DataContext = p;
}

バインド先のTextBoxは自分の親を直近から探していって最初に見つかったDataContextを使う。(包含継承というらしい)


image


コントロールの時と同様にコードだけでバインドすると以下のようになる。


        public Window2()
{
InitializeComponent();

Person p = new Person { Name = "原 辰徳", Address = "相模原市1-1" };
//this.MyWindow.DataContext = p;
var bindName = new Binding();
bindName.Path = new PropertyPath("Name");
bindName.Source = p;
txtName.SetBinding(TextBox.TextProperty, bindName);

var bindAddr = new Binding();
bindAddr.Path = new PropertyPath("Address");
bindAddr.Source = p;
txtAddr.SetBinding(TextBox.TextProperty, bindAddr);
}

9行目と14行目はDataContextを指定すれば不要になる。
また、Bindingクラスのコンストラクタ引数にPathを文字列で指定できるようなので8行目と13行目も省略できることになる。


        public Window2()
{
InitializeComponent();

Person p = new Person { Name = "原 辰徳", Address = "相模原市1-1" };
this.MyWindow.DataContext = p;
var bindName = new Binding("Name");
txtName.SetBinding(TextBox.TextProperty, bindName);

var bindAddr = new Binding("Address");
txtAddr.SetBinding(TextBox.TextProperty, bindAddr);
}

少し簡単になった。


ちなみに、バインドモードは指定しなければDefaultという値になり状況に応じてWPFが決めてくれるらしい。TextBoxの様に入力可能なコントロールとバインドした場合は双方向になるとのこと。
ただし、TextBoxは依存関係プロパティになっていて変更通知機能があるのでTextBoxの変更をDataContextに伝えることができるが、DataContextへの変更はそのままではTextBoxに伝わらないのだと。


一般的にはDataContextに指定されたCLRオブジェクトに対してはINotifyPropertyChangedインタフェースを実装することにより変更通知を行う必要がある。


とりあえずDataContextの値を確認する為にボタンを追加してソースを以下の様に変更した。


image


    public partial class Window2 : Window
{
Person p = new Person { Name = "原 辰徳", Address = "相模原市1-1" };
public Window2()
{
InitializeComponent();

this.MyWindow.DataContext = p;
var bindName = new Binding("Name");
txtName.SetBinding(TextBox.TextProperty, bindName);

var bindAddr = new Binding("Address");
txtAddr.SetBinding(TextBox.TextProperty, bindAddr);
}
//DataContextの値を確認
private void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show(p.Name + ":" + p.Address,"DataContextの確認");
}
//名前を長島に
private void Button_Click_1(object sender, RoutedEventArgs e)
{
p.Name = "長島茂雄";
}
}


これで確認してみると確かにDataContextへの変更はTextBoxに反映しないことが分かった。


DataContextに設定しているPersonクラスにINotifyPropertyChangedインタフェースを実装したのが以下のソース。
PropertyChangedイベントを発せさせれば良いだけだ。
(まったく決まりきった実装になるようだ)


    public class Person : INotifyPropertyChanged
{
private string _name;
private string _address;
public string Name
{
get
{
return _name;
}
set
{
if (_name == value)
{
return;
}
_name = value;
OnPropertyChanged("Name");
}
}
public string Address
{
get
{
return _address;
}
set
{
if (_address == value)
{
return;
}
_address = value;
OnPropertyChanged("Address");
}
}

public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
var d = PropertyChanged;
if (d != null)
{
d(this, new PropertyChangedEventArgs(propertyName));
}
}
}

確かにDataContextへの変更が即座にTextBoxへ反映されるようになる。


image

2011年11月6日日曜日

◆WPF バインディング

<コントロール同士のバインディング>

まずは、WPFのバインディングで最初の頃必ず出てきたテキストボックスとスライダーのバインディング。
スライダーを動かすと数値が変化し、数値を入力するとスライダーが動くというやつだ。(双方向のバインディング)

image

XAMLはこんな感じになる。

<Window x:Class="BindingSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<StackPanel>
<TextBox Name="myValue">0</TextBox>
<Slider Maximum="100" Minimum="0" Value="{Binding ElementName=myValue, Path=Text}" />
</StackPanel>
</Window>

スライダーのvalueプロパティにテキストボックスのTextプロパティをバインディングするには、
Value="{Binding ElementName=myValue, Path=Text}"
というようにバインドするコントロール名とプロパティ名を指定してあげる。
ちなみに、この{}で囲んだ書き方は「マークアップ拡張」と呼ばれるXAML独自の記法(多分)で、本来は以下のように書くべきもの。


        <Slider Maximum="100" Minimum="0">
<Slider.Value>
<Binding ElementName="myValue" Path="Text" />
</Slider.Value>
</Slider>


多分バインドは多用されることになるためシンタックスシュガー的に簡略記法を用意したのだろう。
ただし、私などは最初この省略形であるということが分からずにどうもピンと来なかった。
というか世の中のサンプルを見ていると様々な記法で書かれており(Pathというキーワードも省略できたり)、一体何が違うのかと混乱していた。
バージョンが上がって省略記法が用意されれば解りやすかったのだが、私のような素人にはちょっと取っ付きづらい部分だった。(最初から気が効きすぎていたというか)
また、上記TextBoxにはNameプロパティで名前を指定しているのだが、これもサンプルによってはx:nameと別のネームスペースを使っていたりして混乱した。
今回再勉強して分かったのは、この名前空間はXAML独自の名前空間らしいということ。WPFとして用意されていない要素、属性などはXAMLとして独自に拡張した機能をこの名前空間で提供しているらしい。
なのでnameプロパティにしてもWPFでもともと存在しているものについてはそれを使えばよいし、nameプロパティを持たないコントロールなどを参照したいときはx:nameで名前をつけてあげれば良い。


データバインドは必ずしも1対1でなくとも良いので、最初のサンプルに省略しない記法で書いたスライダーをもう一つ追加するとこんな感じになる。


<Window x:Class="BindingSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<StackPanel>
<TextBox Name="myValue">0</TextBox>
<Slider Maximum="100" Minimum="0" Value="{Binding ElementName=myValue, Path=Text}" />
<Slider Maximum="100" Minimum="0">
<Slider.Value>
<Binding ElementName="myValue" Path="Text" />
</Slider.Value>
</Slider>

</StackPanel>
</Window>


image


どちらのスライダーを動かしても双方張り付いて全く同じに動く。


ちなみに、このnameプロパティの値はは大文字と小文字が区別され、間違ったりしてもエラーにならないので注意が必要だ。


Bindオブジェクト(要素)はModeプロパティでバインド方向を、
image
UpdateSourceTriggerプロパティでそのタイミングも指定できるようになっている。
image


ここで、こんどはXAMLではなくコードでバインドするとどうなるか試してみた。
Sliderをもう一つ追加し名前を”mySlider”とした。


        <Slider Maximum="100" Minimum="0" Value="{Binding ElementName=myValue, Path=Text}" />
<Slider Maximum="100" Minimum="0">
<Slider.Value>
<Binding ElementName="myValue" Path="Text" />
</Slider.Value>
</Slider>
<Slider Name="mySlider" Maximum="100" Minimum="0" />



        public Window1()
{
InitializeComponent();

var bind = new Binding();
bind.ElementName = "myValue";
bind.Path = new PropertyPath("Text");

mySlider.SetBinding(Slider.ValueProperty, bind);
}


XAMLの省略していない方の記述を見ながらそのとおりにコーディングしていけばよいので、それほど難しくはない。XAMLが入れ子で表現している部分はSetBindingメソッドを使ってあげれば良いようだ。
SliderのプロパティはSlider自身が持っているxxxPropertyスタティックプロパティが使える。
PropertyPathクラスのコンストラクターで指定している引数(型の定義はobjectになっている)も本来はTextBox.TextPropertyなのだと思うがXAMLと同様に”Text”でも動作してくれる。
PropertyPathクラスは以下のような定義になっているので、
[TypeConverterAttribute(typeof(PropertyPathConverter))]
public sealed class PropertyPath
ここで指定されたPropertyPathConverterが文字列からTextPropertyへの変換をしているのかな・・・。


単純に考えれば、文字列を取るコンストラクターを用意すればよいだけに思えるのだが・・・。
そうか、こいつはコンパイル時に変換してくれるという事なのかも。


<自分自身や親要素とのバインド>


        <TextBox Height= "65"
Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window},
Path=Title}"
Width="{Binding RelativeSource={RelativeSource Self}, Path=Height }" />

バインドの対象を指定するのにはnameプロパティを参照する以外にも、このような指定もできる。


2行目では自分の親をたどってWindowコントロールを探し、そのタイトルプロパティとバインドしている。
はっきり言ってちょっと複雑・・・。
それほど使う機能でも無いのでこんなものだとメモしておけば良いか・・・。


4行目はWidthプロパティに対して自分自身のHeightプロパティをバインドしている。(結果的に正方形になる)


ココらへんは記法は面倒だが、当初に比べればだいぶインテリセンスが効いてくれるのですこしは楽になった。

◆Googleも殿様商売になってきたなぁ(いやーな感じ)

下の子がメールアドレスが欲しいというので登録してあげようと思ったのだが、いつも悩まされる認証確認の文字がいつもにも増して読めない。

image

いったい誰がこんな文字をまともに読めるのだろう。
都度パスワードをクリアしたくらいにして(仕方ないとはいえ)。

だんだん腹立たしく思えてきた。
しかもそのうち年齢制限がどうとかエラーになり始めた。

・・・・。

かなーり奮闘してやっと通ったと思ったらこんどは携帯で認証が必要なんだと。

image

以前はこんなのなかったのに・・・。
おれは携帯なんぞ持っていないっちゅーに。

たとえ持っていても教えたくはない!!

Google、いやーな感じぃ・・・・

驕れる者久しからず。

私が最近チェックした記事