iPentec.com  /  Doc  /  C#  /  ASP.NET

目次

URLパラメーターを利用して DropDownListの選択要素を保持する - ASP.NET

URLパラメーターを利用して DropDownListの選択要素を保持する場合のコードについて紹介します。

プログラム

UI

下図のUIを準備します。


aspxファイルのコードは下記になります。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DropDownListStateKeepDemo.Default" %>

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem>ペンギン</asp:ListItem>
        <asp:ListItem>ラクダ</asp:ListItem>
        <asp:ListItem>くじら</asp:ListItem>
        <asp:ListItem>しろくま</asp:ListItem>
        <asp:ListItem>あひる</asp:ListItem>
      </asp:DropDownList>
      <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br />
      <asp:HyperLink ID="HyperLink1" runat="server">HyperLink</asp:HyperLink>
    </div>
    </form>
</body>
</html>

コード(オーソドックスな実装)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DropDownListStateKeepDemo
{
  public partial class Default : System.Web.UI.Page
  {
    public enum ItemType
    {
      Penguin, Camel, Whale, WhiteBear, Duck
    }

    private ItemType currentSelect;

    protected void Page_Load(object sender, EventArgs e)
    {
      string selectItem = Request.QueryString["selItem"];

      switch (selectItem) {
        case "penguin":
          currentSelect = ItemType.Penguin;
          if (IsPostBack == false) DropDownList1.SelectedValue = "ペンギン";
        break;
        case "camel":
          currentSelect = ItemType.Camel;
         if (IsPostBack == false) DropDownList1.SelectedValue = "ラクダ";
         break;
        case "whale":
          currentSelect = ItemType.Whale;
          if (IsPostBack == false) DropDownList1.SelectedValue = "くじら";
          break;
        case "whitebear":
          currentSelect = ItemType.WhiteBear;
            if (IsPostBack == false) DropDownList1.SelectedValue = "しろくま";
        break;
        case "duck":
          currentSelect = ItemType.Duck;
           if (IsPostBack == false) DropDownList1.SelectedValue = "あひる";
         break;
        default:
          currentSelect = ItemType.Penguin;
           if (IsPostBack == false) DropDownList1.SelectedValue = "ペンギン";
         break;

      }

      string paramstr="";

      switch (currentSelect) {
        case ItemType.Penguin:
          paramstr = "selItem=penguin";
          HyperLink1.Text = "ペンギン Update";
          break;
        case ItemType.Camel:
          paramstr = "selItem=camel";
          HyperLink1.Text = "ラクダ Update";
          break;
        case ItemType.Whale:
          paramstr = "selItem=whale";
          HyperLink1.Text = "くじら Update";
          break;
        case ItemType.WhiteBear:
          paramstr = "selItem=whitebear";
          HyperLink1.Text = "しろくま Update";
          break;
        case ItemType.Duck:
          paramstr = "selItem=duck";
          HyperLink1.Text = "あひる Update";
          break;
      }

      HyperLink1.NavigateUrl = "default.aspx?" + paramstr + "&mode=update";
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
      string paramstr="";
      switch (DropDownList1.SelectedValue) {
        case "ペンギン":
          paramstr = "selItem=penguin";
          break;
        case "ラクダ":
          paramstr = "selItem=camel";
          break;
        case "くじら":
          paramstr = "selItem=whale";
          break;
        case "しろくま":
          paramstr = "selItem=whitebear";
          break;
        case "あひる":
          paramstr = "selItem=duck";
          break;
      }     



      Response.Redirect("default.aspx?" + paramstr);
    }
  }
}

解説

URLパラメータを取得し、パラメータに設定された要素をドロップダウンリストの選択項目として設定します。また、下部のハイパーリンクはパラメータに設定され、ドロップダウンリストで選択された要素のテキストを表示します。ボタンクリックの際は、URLパラメータを追加してページ遷移する動作とします。
ボタンのクリックイベント実行までドロップダウンリストの値が変更されないようにする必要があるため、Page_Loadでのドロップダウンリスト設定部分はIsPostBackがfalseのときのみ設定する動作としています。

実行結果

プロジェクトを実行します。Webブラウザが起動し、下図のウィンドウが表示されます。


ドロップダウンリストを開きます。一覧から要素を選択します。


"くじら"を選択しました。選択後[Button]をクリックします。

ページ遷移します。パラメーターに"whale"が追加され、下部のハイパーリンクも"くじら Update"に変わっています。


ドロップダウンリストを"しろくま"に変更します。変更後[Button]をクリックします。


ページ遷移します。パラメーターに"whitebear"が追加され、下部のハイパーリンクも"しろくま Update"に変わります。

重複を減らした実装

上記の実装コードで問題なく動作しますが、項目の追加などの場合、処理を変更する部分が大きくなります。下記のコードでは、項目の追加等でのメンテナンスをしやすくしたコードを紹介します。

修正コード

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DropDownListStateKeepDemo
{
  public partial class DefaultNew : System.Web.UI.Page
  {
    public enum ItemType
    {
      Penguin, Camel, Whale, WhiteBear, Duck
    }

    public class DropDownListItem
    {
      public ItemType type;
      public string URLParam;
      public string UIValue;
    }

    private DropDownListItem currentSelect;

    protected void Page_Load(object sender, EventArgs e)
    {  
      List<DropDownListItem> iteminfoList = new List<DropDownListItem>();

      DropDownListItem ddli = new DropDownListItem();
      ddli.type = ItemType.Penguin;
      ddli.UIValue = "ペンギン";
      ddli.URLParam="penguin";
      iteminfoList.Add(ddli);

      ddli = new DropDownListItem();
      ddli.type = ItemType.Camel;
      ddli.UIValue = "ラクダ";
      ddli.URLParam = "camel";
      iteminfoList.Add(ddli);

      ddli = new DropDownListItem();
      ddli.type = ItemType.Whale;
      ddli.UIValue = "くじら";
      ddli.URLParam = "whale";
      iteminfoList.Add(ddli);

      ddli = new DropDownListItem();
      ddli.type = ItemType.WhiteBear;
      ddli.UIValue = "しろくま";
      ddli.URLParam = "whitebear";
      iteminfoList.Add(ddli);

      ddli = new DropDownListItem();
      ddli.type = ItemType.Duck;
      ddli.UIValue = "あひる";
      ddli.URLParam = "duck";
      iteminfoList.Add(ddli);

      string selectItem = Request.QueryString["selItem"];

      currentSelect = iteminfoList[0];

      foreach (DropDownListItem di in iteminfoList) {
        if (IsPostBack == false){
          if (di.URLParam == selectItem) {
            DropDownList1.SelectedValue = di.UIValue;
            currentSelect = di;
            break;
          }
        }else{
          if (di.UIValue == DropDownList1.SelectedValue) {
            currentSelect = di;
          }
        }
      }

      HyperLink1.Text = currentSelect.UIValue + " Update";
      HyperLink1.NavigateUrl = "default.aspx?selItem=" + currentSelect.URLParam + "&mode=update";
      
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
      Response.Redirect("default.aspx?selItem=" + currentSelect.URLParam);
    }
  }
}
著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2024-01-06
作成日: 2015-06-28
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.