【Webフォーム】入力フォームまとめ

takachaa commented 7 years ago

リストボックス

・キーとバリューが同じ場合は、Valueは省略していい。・SelectionMode="Multiple"　は複数選択可能となる。・選択項目の有効/無効 Enabled = "True" ・選択されている　Selected = "False"

<asp:ListBox ID="ListBox1" runat="server"　SelectionMode="Multiple">
      <asp:ListItem Value="tomorrow">明日</asp:ListItem>
      <asp:ListItem Value="day after tommorow">明後日</asp:ListItem>
</asp:ListBox>

以下のようにすることでAutoPostbackを有効にすることができる。 ※おそらく他のドロップダウンリスト、チェックボックスリスト、ラジオボタンリストも同じく

<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple" AutoPostBack="True" onselectedindexchanged="ListBox1_SelectedIndexChanged">
      <asp:ListItem >aaa</asp:ListItem>
      <asp:ListItem >bbb</asp:ListItem>
      <asp:ListItem >ccc</asp:ListItem>
</asp:ListBox>

protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
{
            // 選択されたアイテムをラベルに表示
            Label1.Text = ListBox1.SelectedItem.Value + ":" + ListBox1.SelectedItem.Text;
}

ドロップダウンリスト

・キーとバリューが同じ場合は、Valueは省略していい。・選択項目の有効/無効 Enabled = "True" ・選択されている　Selected = "False"

<asp:DropDownList ID="DropDownList1" runat="server">
       <asp:ListItem Value="tommorow">明日</asp:ListItem>
       <asp:ListItem Value="day after tommorow">明後日</asp:ListItem>
</asp:DropDownList>

チェックボックスリスト

・キーとバリューが同じ場合は、Valueは省略していい。・選択項目の有効/無効 Enabled = "True" ・選択されている　Selected = "False"

<asp:CheckBoxList ID="CheckBoxList1" runat="server">
      <asp:ListItem Value="tommorow">明日</asp:ListItem>
      <asp:ListItem Selected="True" Value="day after tomorrow">明後日</asp:ListItem>
</asp:CheckBoxList>

ラジオボタンリスト

・キーとバリューが同じ場合は、Valueは省略していい。・選択項目の有効/無効 Enabled = "True" ・選択されている　Selected = "False"

<asp:RadioButtonList ID="RadioButtonList1" runat="server">
      <asp:ListItem Value="tomorrow">明日</asp:ListItem>
      <asp:ListItem Value="day after tommorow">明後日</asp:ListItem>
</asp:RadioButtonList>

フォーム送信時のバック側処理例

protected void Button1_Click(object sender, EventArgs e)
        {
            //メッセージ表示用ラベルに選択内容を出力していく
            Label1.Text = "<ul>";

            string selectedItemText = "";
            //複数選択のListBoxコントロールの選択項目の取得
            //ItemsプロパティからListItemを1つずつ取り出し、Selectedプロパティを確認
            foreach (ListItem item in ListBox1.Items)
            {
                //選択されていればTextプロパティを取得
                if (item.Selected)
                {
                    selectedItemText += item.Text + " ";
                }
            }
            //ListBoxコントロールの選択内容
            Label1.Text += string.Format("<li>ListBoxコントロールでは{0}が選択されています</li>"
                , selectedItemText);

            //DropDownListコントロールでは、
            //SelectedItemで選択されたListItemを
            //SelectedValueで選択されたListItemのValueプロパティを取得できる
            Label1.Text +=
                string.Format("<li>DropDownListコントロールでは、テキストが{0}、値が{1}のListItemが選択されています</li>",
                DropDownList1.SelectedItem.Text, DropDownList1.SelectedValue);

            string selectedCheckBoxText = "";

            //CheckBoxListコントロールは複数選択のListBoxコントロールと同様
            //ItemsプロパティからListItemを1つずつ取り出し、Selectedプロパティを確認
            foreach (ListItem item in CheckBoxList1.Items)
            {
                //選択されていればTextプロパティを取得
                if (item.Selected)
                {
                    selectedCheckBoxText += item.Text + " ";
                }
            }
            //CheckBoxListコントロールの選択内容
            Label1.Text += string.Format("<li>CheckBoxListコントロールでは{0}が選択されています</li>"
                , selectedCheckBoxText);

            //未選択の場合はSelectedItemプロパティがnullとなる
            if (RadioButtonList1.SelectedItem != null)
            {
                //RadioButtonListコントロールはDropDownListコントロールと同様
                //SelectedItemで選択されたListItemを
                //SelectedValueで選択されたListItemのValueプロパティを取得できる
                Label1.Text +=
                    string.Format("<li>RadioButtonListコントロールでは、テキストが{0}、値が{1}のListItemが選択されています</li>",
                    RadioButtonList1.SelectedItem.Text, RadioButtonList1.SelectedValue);
                Label1.Text += "</ul>";
            }
        }

takachaa commented 7 years ago

DropDownListの基本

以下のような方法で動的（ビハインドコード）からリストを構成できる。

参考 http://gomocool.net/gomokulog/?p=332

ドロップダウンリストを選択したらコードビハインドで値をとる

<form id="form1" runat="server">
        <div>
        </div>     
    <asp:DropDownList ID="DropDownList1" runat="server" onselectedindexchanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
</form>

public partial class WebForm8 : System.Web.UI.Page
    {

        List<Country> countries = new List<Country>();
        List<League> leagues = new List<League>();
        List<Team> teams = new List<Team>();

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                FillLists();
                //this.DropDownList1.DataSource = countries;
                //this.DropDownList1.DataBind();

                this.DropDownList1.DataSource = countries;
                this.DropDownList1.DataTextField = "Name";
                this.DropDownList1.DataValueField = "Id";
                this.DropDownList1.DataBind();

            }

        }

        private void FillLists()
        {
            // Adding some countries.
            countries.Add(new Country { Id = 1, Name = "England" });
            countries.Add(new Country { Id = 2, Name = "Sweden" });
            countries.Add(new Country { Id = 3, Name = "Spain" });
            // Adding some leagues with the Id of the country they belong to.
            leagues.Add(new League { Id = 1, Name = "Premier League", CountryId = 1 });
            leagues.Add(new League { Id = 2, Name = "Championship", CountryId = 1 });
            leagues.Add(new League { Id = 3, Name = "Superettan", CountryId = 2 });
            leagues.Add(new League { Id = 4, Name = "Allsvenskan", CountryId = 2 });
            // Adding some teams with the Id of the league they belong to.
            teams.Add(new Team { Id = 1, Name = "Manchester United", LeagueId = 1 });
            teams.Add(new Team { Id = 2, Name = "Arsenal", LeagueId = 1 });
            teams.Add(new Team { Id = 3, Name = "Crystal Palace", LeagueId = 2 });
            teams.Add(new Team { Id = 4, Name = "Watford", LeagueId = 2 });
            teams.Add(new Team { Id = 5, Name = "Hammarby", LeagueId = 3 });
        }

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            string code = DropDownList1.SelectedValue;
            Console.WriteLine(code);
        }

    }

takachaa commented 7 years ago

UpdatePanel と DropDownList の連携

例１

以下のようにすると、コードビハインドなしでドロップダウンリストの内容を変更すると、テキストボックスの内容が変更される。※AutoPostBackは有効にしてないと動かない

<form id="form1" runat="server">
        <!-- スクリプトマネージャー -->
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <!-- ドロップダウンリスト１とラベル１の定義 -->
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
            <asp:ListItem Value="1" Text="アイテム1" Selected="True"></asp:ListItem>
            <asp:ListItem Value="2" Text="アイテム2"></asp:ListItem>
            <asp:ListItem Value="3" Text="アイテム3"></asp:ListItem>
        </asp:DropDownList>

        <!-- ドロップダウンリスト１が変更された場合は、この部分のみ画面の再描画を行う -->
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <input id="Text1" type="text" value="<%= DropDownList1.SelectedItem.Value + ":" + DropDownList1.SelectedItem.Text %>" />
                <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
            </ContentTemplate>

        </asp:UpdatePanel>
    </div>
    </form>

上記でも一応動いた、しかしながら、以下を参考に最低限なリストボックスとアップデートパネルの連携は作成すること

参考 [ ASP.NET ] 同期ポストバックと非同期ポストバック（ AutoPostBack / UpdatePanel ） http://hensa40.cutegirl.jp/archives/1497

takachaa / .net-Framework