ASP.NET標準コンポーネントによるサンプル
ASP.NET Webアプリの作成準備が整ったので、Index.aspxにASP.NET標準コンポーネントを使ってサンプル画面を作成してみましょう。
ASP.NET標準コンポーネントによる画面デザイン
図4 ASP.NET標準コンポーネントによる画面デザイン
今回のサンプルでは、場所の名前を入力して検索した結果のトップの場所についての画像を自動的に表示する仕組みを作成します。
そこで、画面上には検索キーワードを入れるTextBox、検索を実行するButton、結果を一覧表示するDataList、エラーを表示するLabelの各コントロールを配置します。
リスト1 Index.aspxの定義例
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Index.aspx.vb"
Inherits="CZ1209FourSquare.Index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CZ1209FourSquare</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="Keyword_TextBox" runat="server"></asp:TextBox>
<asp:Button ID="Serach_Button" runat="server" Text="検索" />
</div>
<div>
<asp:DataList ID="Photo_DataList" runat="server"
RepeatColumns="5" RepeatDirection="Horizontal">
<ItemTemplate>
<asp:Image ImageUrl='<%# Eval("Photo") %>' runat="server"
Width="125" Height="125" />
</ItemTemplate>
</asp:DataList>
</div>
<div>
<asp:Label ID="Error_Label" runat="server" ForeColor="Red" />
</div>
</form>
</body>
</html>
DataListコントロールの中には、Imageコントロールを配置しfoursquareから取得した画像URLを使って画像表示できるように定義します。
ASP.NET標準コンポーネントによる画面表示用コード例
この画面定義に対してfoursquareから取得した写真を表示するためのコードを作成します。
リスト2-1 Index.aspxのコード例（VB.NET）
Public Class Index
Inherits System.Web.UI.Page
Private WithEvents Model As New VenueModel
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
Handles Me.Load
If Not Me.IsPostBack Then
Me.Keyword_TextBox.Text = "日本マイクロソフト"
End If
End Sub
Protected Sub Search_Button_Click(sender As Object,
e As EventArgs) Handles Serach_Button.Click
Try
Dim item As TVenueItem
Dim photos As IEnumerable(Of TVenuePhoto)
Me.Error_Label.Text = String.Empty
item = Me.Model.Search(Me.Keyword_TextBox.Text)
photos = Me.Model.GetPhotos(item.VenueID)
Me.Photo_DataList.DataSource = photos
Me.Photo_DataList.DataBind()
Catch ex As Exception
Me.Error_Label.Text = ex.Message
End Try
End Sub
End Class
リスト2-2 Index.aspxのコード例（C#）
using System;
using System.Collections.Generic;
namespace CZ1209FourSquareCS
{
public partial class Index : System.Web.UI.Page
{
private VenueModel Model = new VenueModel();
protected void Page_Load(object sender, EventArgs e)
{
if (! this.IsPostBack) {
this.Keyword_TextBox.Text = "日本マイクロソフト";
}
}
protected void Search_Button_Click(object sender, EventArgs e)
{
try {
TVenueItem item;
IEnumerable<TVenuePhoto> photo;
this.Error_Label.Text = String.Empty;
item = this.Model.Search(this.Keyword_TextBox.Text);
photo = this.Model.GetPhotos(item.VenueID);
this.Photo_DataList.DataSource = photo;
this.Photo_DataList.DataBind();
}
catch (Exception ex)
{
this.Error_Label.Text = ex.Message;
}
}
}
}
Model.Searchメソッドを使ってキーワード検索を行い、その結果として得られたVenueIDを指定してModel.GetPhotosメソッドを実行し、VenueIDに紐付いた写真を取得してます。
取得した写真はDataListのDataSourceに指定し、最後にDataBindメソッドを実行して画面に表示しています。
ASP.NET標準コンポーネントによる実行結果
プログラムができ上がったら実行してみましょう。
［検索］ボタンをクリックして画像が表示できれば完成です。
図5 ASP.NET標準コンポーネントによる実行例
