ASP.NET 徹底活用術(Part2)のホームへ戻る

■書籍をジャンル別に検索してDataList2列に表示

 

書籍の検索結果を1列で表示するとスペース効率がよくないので、DataList2列に表示するとともに以下の機能を追加します。

 

  表紙のイメージをクリックすると新規ウィンドウにイメージを拡大して表示する

  著者名をクリックすると新規ウィンドウに著者の書籍を表示する

  書籍のランク、評価、定価、製本、発刊日、出版社を表示する

 

DataGridDataListに置換したら、DataListRepeatColumnsプロパティに「2」、RepeatDirectionプロパティに「Horizontal」を設定して書籍を横方向に2列で表示するようにします。

 

<asp:DataList id="dlstBooks" runat="server"

  RepeatColumns="2"

  RepeatDirection="Horizontal"

  EnableViewState="False">

  ・・・

</asp:DataList>

 

DataListItemTemplateには、HTML<table>…</table>を追加して書籍の表紙、タイトル、著者、ランク、評価、定価、製本、発刊日、出版社をバインドします。

 

<ItemTemplate>

  <table>

  <tr>

    <td valign="top" width="80" >

      <a href='<%# Container.DataItem("LargeImage") %>' target="_blank">

        <asp:Image id="Image1" runat="server"

          ImageAlign="Left" ImageUrl='<%# Container.DataItem("SmallImage") %>' />

      </a>

    </td>

    <td valign="top">

      <asp:HyperLink runat="server"

        Text='<%# Container.DataItem("Title") %>' Target="_blank"

        NavigateUrl='<%# Container.DataItem("AmazonURL") %>' />

      ・・・

    </td>

  </tr>

  </table>

</ItemTemplate>

 

ブラウザを起動してWebページを表示したらRadioButtonListからジャンルをクリックします。DataListに検索結果が表示されます(4)DataListから書籍の表紙をクリックすると、新規ウィンドウが開いて表紙が拡大されて表示されます。書籍のタイトルをクリックすると、新規ウィンドウが開いてアマゾンのサイトが表示されます。著者のリンクをクリックすると新規ウィンドウに著者の書籍の上位(売上げ順)10件が表示されます。

 

4 検索した結果をDataList2列に表示

 

ASP.NET 徹底活用術(Part2)のホームへ戻る