ボタンいっぱいのフォーム

艦これ秋イベやってましたよ。なんとか丙で最終クリアできましたorz

で、フォーム内にたくさんボタンがある場合、駆け出しの僕は、どれを押したの？ってことで、当然悩みます(;´Д｀)

こーゆー場合は、ボタンにname属性とvalue属性をつけると、submitしたときデータに設定されるので、それで判断できるんですよね。

<button name="button1" value="">Button1</button>
<button name="button2" value="">Button2</button>
<button name="button3" value="">Button3</button>
<button name="button4" value="">Button4</button>

コントローラーのアクションメソッドはこんなコードになるです。

public ActionResult ManyButtons(string button1, string button2, string button3, string button4)
{
    if (button1 != null) // button1押されたよ;
    if (button2 != null) // button2押されたよ;
    if (button3 != null) // button3押されたよ;
    if (button4 != null) // button4押されたよ;
    return View();
}

コントローラーはかしこいので、ボタンのname,value属性をバインドしてくれるんですね(;・∀・)

デバッガーを調べると、ValueProviderってのが、そのあたりの仕事をしてくれるようです。

ボタン４個くらいなら、まだいいんですがね・・これが100個になると、えっ引数100個？ってことになっちゃいますよねorz

こんな場合は、ボタンのname属性を１つにして、value属性で違いを判断するってのがいいかもです。

<button name="button" value="1">Button1</button>
<button name="button" value="2">Button2</button>
<button name="button" value="3">Button3</button>
<button name="button" value="4">Button4</button>

そうすると、コントローラーのアクションメソッドはこんなコードになるです。

public ActionResult ManyButtons(string button)
{
    switch (button)
    {
        case "1": // button1押されたよ
            break;
        case "2": // button2押されたよ
            break;
        case "3": // button3押されたよ
            break;
        case "4": // button4押されたよ
            break;
    }
    return View();
}

ボタンの大量生産もできそうですね(;´Д｀)

// ボタン１００個つくるです！
for (int index = 0; index < 100; ++index)
{
    <button name="button" value="@(index)">Button@(index)</button>
}

まぁ、単純にボタンクリック＝submitって感じならこれでいいんですが、クリックイベント拾って何かしようと思うと、一工夫必要かも・・いや必要ですorz

ところで、ValueProviderがどこまでかしこいか、こんなコードで確かめてみました。

とあるモデル

using System.ComponentModel.DataAnnotations;

namespace Megsuritan.Models.ViewModels
{
    public class ManyButtons
    {
        public string button1 { get; set; }
        public string button2 { get; set; }
        public string button3 { get; set; }
        public string button4 { get; set; }
        [Display(Name = "押したボタンは")]
        public string pushedButton { get; set; }
    }
}

とあるView

@model Megsuritan.Models.ViewModels.ManyButtons

@{
    ViewBag.Title = "ManyButtons";
}
<h2>ManyButtons</h2>
@using (Html.BeginForm())
{
    <button class="btn btn-default" name="button1" value="buttonの1">ボタン1</button>
    <button class="btn btn-default" name="button2" value="buttonの2">ボタン2</button>
    <button class="btn btn-default" name="button3" value="buttonの3">ボタン3</button>
    <button class="btn btn-default" name="button4" value="buttonの4">ボタン4</button>
    <div class="from-control">
        @Html.DisplayNameFor(modelItem => Model.pushedButton) @Html.DisplayFor(modelItem => modelItem.pushedButton)
    </div>
}

とあるコントローラー

namespace Megsuritan.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult ManyButtons(ManyButtons model)
        {
            if (model.button1 != null) model.pushedButton = model.button1;
            if (model.button2 != null) model.pushedButton = model.button2;
            if (model.button3 != null) model.pushedButton = model.button3;
            if (model.button4 != null) model.pushedButton = model.button4;
            return View(model);
        }
    }
}

表示させます(｀・ω・´)

f:id:megusuritan:20171215003444j:plain