複数送信ボタン処理方法

ASP.NET MVC フレームワークにおける複数送信ボタンの処理方法 (C#、HTML、ASP.NET MVC)

ASP.NET MVC フレームワークでフォームに複数送信ボタンを設置し、それぞれ押下されたボタンによって異なる処理を実行したい場合、いくつかの方法があります。ここでは、代表的な 2 つの方法を紹介します。

方法 1: 同じ名前を持つ送信ボタンと Action メソッドのパラメータ

この方法は、送信ボタンに同じ名前を持たせ、value 属性でボタンの表示テキストを分けることで実現します。また、コントローラー側では HttpPost 属性を持つアクションメソッドで、string 型のパラメータを用意し、送信ボタンの value 属性の内容を受け取ります。

Razor ビュー (.cshtml)

<form method="post">
  <input type="submit" name="command" value="保存">
  <input type="submit" name="command" value="保存して次へ">
</form>

C# コントローラ

public class MyController : Controller
{
  [HttpPost]
  public ActionResult Submit(string command)
  {
    if (command == "保存")
    {
      // 保存処理
    }
    else if (command == "保存して次へ")
    {
      // 保存して次へ処理
    }
    return View(); // 処理結果に応じてビューを返却
  }
}

方法 2: 個別のアクションメソッドを持つ送信ボタン

送信ボタンごとに個別のアクションメソッドを用意し、formaction 属性を使って送信先の URL を指定する方法です。この場合、送信ボタンの名前は異なっていても構いません。

<form method="post">
  <input type="submit" value="保存" formaction="@Url.Action("Save")">
  <input type="submit" value="保存して次へ" formaction="@Url.Action("SaveAndNext")">
</form>

public class MyController : Controller
{
  [HttpPost]
  public ActionResult Save()
  {
    // 保存処理
    return View();
  }

  [HttpPost]
  public ActionResult SaveAndNext()
  {
    // 保存して次へ処理
    return View();
  }
}

どちらの方法を選択するかは、処理の複雑さや可読性などを考慮して決めます。

注意点

• formaction 属性を使用する場合、URL 生成ヘルパー (@Url.Action) を使って正しい URL を生成するようにしましょう。
• 送信ボタンの value 属性の内容は、必ずしも表示テキストと同じにする必要はありません。処理ロジックに合った値を設定しましょう。

ASP.NET MVCにおける複数送信ボタン処理のコード解説

同じ名前の送信ボタンとアクションメソッドのパラメータ

考え方

• コントローラー側では、string 型のパラメータで value の値を受け取り、分岐処理を行います。
• 各ボタンの value 属性で、どのボタンが押されたのかを区別します。
• 複数の送信ボタンに同じ名前 (name="command") を付けます。

<form method="post">
  <input type="submit" name="command" value="保存">
  <input type="submit" name="command" value="保存して次へ">
</form>

• value="保存"、value="保存して次へ"
  各ボタンの値を指定し、コントローラー側でどのボタンが押されたか判別します。
• name="command"
  複数の送信ボタンに共通の名前を付けます。

public class MyController : Controller
{
  [HttpPost]
  public ActionResult Submit(string command)
  {
    if (command == "保存")
    {
      // 保存処理
    }
    else if (command == "保存して次へ")
    {
      // 保存して次へ処理
    }
    return View();
  }
}

• if 文
  command の値によって処理を分岐します。
• string command
  ビューから送信された command の値を受け取るパラメータです。
• [HttpPost]
  HTTP POST メソッドで送信されたリクエストを処理するアクションメソッドであることを示します。

解説

このコードでは、2つの送信ボタンがどちらも command という名前で送信されます。コントローラー側では、command の値が "保存" か "保存して次へ" かによって、実行する処理を切り替えています。

• 各送信ボタンに異なる formaction 属性を指定し、それぞれ異なるアクションメソッドに送信します。

<form method="post">
  <input type="submit" value="保存" formaction="@Url.Action("Save")">
  <input type="submit" value="保存して次へ" formaction="@Url.Action("SaveAndNext")">
</form>

• formaction="@Url.Action("SaveAndNext")"
  このボタンが押されたときに SaveAndNext アクションメソッドに送信されます。

public class MyController : Controller
{
  [HttpPost]
  public ActionResult Save()
  {
    // 保存処理
    return View();
  }

  [HttpPost]
  public ActionResult SaveAndNext()
  {
    // 保存して次へ処理
    return View();
  }
}

• SaveAndNext アクションメソッド
  "保存して次へ" ボタンが押されたときに呼び出されます。

このコードでは、各送信ボタンがそれぞれ異なるアクションメソッドに送信されるため、コントローラー側でボタンを判別する必要がありません。

ASP.NET MVC で複数の送信ボタンを処理する方法は、主に上記2つの方法があります。どちらの方法を選択するかは、処理の複雑さや可読性などを考慮して決定します。

どちらの方法を選ぶべきか？

• 処理が複雑で、ボタンの種類が多い場合
  個別のアクションメソッドを持つ送信ボタンを使う方法がわかりやすいです。
• 処理がシンプルで、ボタンの種類が少ない場合
  同じ名前の送信ボタンとアクションメソッドのパラメータを使う方法が簡単です。

• formaction 属性を使う場合、@Url.Action ヘルパーを使って正しい URL を生成する必要があります。
• value 属性には、処理に関係する任意の値を設定できます。

• カスタム属性
  カスタム属性を使って、より柔軟な処理を実現することもできます。
• JavaScript による処理
  JavaScript を利用して、どのボタンがクリックされたか判定し、特定の処理を実行することも可能です。

JavaScript を利用した処理

• JavaScript を使用して、どのボタンがクリックされたかを検知し、サーバーサイドに適切なリクエストを送信します。

メリット

• Ajax を利用して非同期通信を実現できる
• サーバーサイドの処理を減らすことができる
• より柔軟な制御が可能

• ブラウザの互換性などを考慮する必要がある
• JavaScript の知識が必要

実装例

<form id="myForm">
  <input type="button" value="保存" onclick="submitForm('save')">
  <input type="button" value="保存して次へ" onclick="submitForm('saveAndNext')">
</form>

<script>
function submitForm(action) {
  // フォームにhiddenフィールドを追加して、アクション名を渡す
  var hiddenField = document.createElement('input');
  hiddenField.type = 'hidden';
  hiddenField.name = 'action';
  hiddenField.value = action;
  document.getElementById('myForm').appendChild(hiddenField);

  // フォームを送信
  document.getElementById('myForm').submit();
}
</script>

public class MyController : Controller
{
  [HttpPost]
  public ActionResult Submit(string action)
  {
    if (action == "save")
    {
      // 保存処理
    }
    else if (action == "saveAndNext")
    {
      // 保存して次へ処理
    }
    return View();
  }
}

カスタム属性の利用

• カスタム属性を作成し、アクションメソッドに適用することで、どのボタンが押されたかを判断します。

• 複雑なロジックをカプセル化できる
• コードの可読性が向上する

• 学習コストがかかる
• カスタム属性の作成が必要

[AttributeUsage(AttributeTargets.Method)]
public class ButtonAttribute : Attribute
{
  public string ButtonName { get; set; }
}

public class MyController : Controller
{
  [HttpPost]
  [Button(ButtonName = "save")]
  public ActionResult Save()
  {
    // 保存処理
    return View();
  }

  [HttpPost]
  [Button(ButtonName = "saveAndNext")]
  public ActionResult SaveAndNext()
  {
    // 保存して次へ処理
    return View();
  }
}

jQuery の利用

• jQuery を使用して、イベントハンドラーを登録し、クリックされたボタンを特定します。

• クロスブラウザ対応が容易
• jQuery の豊富な機能を活用できる

• jQuery の知識が必要

• モデルバインディング
  複雑なフォームの場合、モデルバインディングを利用すると、フォームのデータをモデルに自動的にマッピングすることができます。
• Ajax ヘルパー
  Ajax を利用して非同期通信を実現したい場合、Ajax ヘルパーを利用すると便利です。

• jQuery に慣れている場合
  jQuery を利用する方法が効率的です。
• コードの可読性を高めたい場合
  カスタム属性を利用する方法がおすすめです。
• 柔軟な制御が必要な場合
  JavaScript を利用した方法が適しています。

選択のポイント

• パフォーマンス
  パフォーマンスを重視する場合は、JavaScript を利用して非同期通信を実現する方法が効果的です。
• 可読性
  コードの可読性を重視する場合は、カスタム属性やJavaScript を利用する方法がおすすめです。
• 処理の複雑さ
  処理が単純な場合はシンプルな方法、複雑な場合は柔軟な方法を選びましょう。

ASP.NET MVC で複数の送信ボタンを処理する方法には、様々な選択肢があります。ご自身のアプリケーションの要件に合わせて、最適な方法を選択してください。

• 新しいバージョンの ASP.NET MVC では、より便利な機能が追加されている場合があります。
• 上記以外にも、様々な方法で複数の送信ボタンを処理することができます。