HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLフォームに複数の送信ボタンを設置する方法【MVC VB.NETの実装例】

HTMLフォームで複数の送信ボタンを使う方法

HTMLフォームには、複数の送信（サブミット）ボタンを含めることができます。ポイントは、すべてのボタンに同じname属性と異なるvalue属性を設定することです。これにより、どのボタンがクリックされたのかをサーバー側で簡単に判別できます。

以下では、MVC VB.NETを使った具体的な実装例を紹介します。ビュー側には、同じ名前「cmd」を持つ3つのボタンを、それぞれ異なる値（Save・Update・Delete）で配置します。コントローラー側では、文字列型のパラメーター「cmd」を受け取り、その値を各ボタンのvalue属性の値と比較することで、実行する処理を振り分けます。

ビュー（multisubmit.aspx）のコード例

<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
<title>multiple submit button</title>
</head>
<body>
<div>
<% Using Html.BeginForm()%>
<%: Html.ValidationSummary(True) %>
<button type="submit" id="postback1" name="cmd" value="Save" >Save</button>
<button type="submit" id="postback2" name="cmd" value="Update">Update</button>
<button type="submit" id="postback3" name="cmd" value="Delete">Delete</button>
<%: Html.Encode(ViewData("msg"))%>
<% End Using%>
</div>
</body>
</html>

コントローラー（Test.controller）のコード例

Test.controller
Function multisubmit() As ActionResult
Return View()
End Function

<HttpPost()> _
Function multisubmit(ByVal cmd As String) As ActionResult
If (cmd = "Save") Then
ViewData("msg") = " SAVE"
ElseIf (cmd = "Update") Then
ViewData("msg") = "UPDATE"
ElseIf (cmd = "Delete") Then
ViewData("msg") = "DELETE"
End If
Return View()
End Function

動作の流れ

ユーザーがいずれかのボタンをクリックすると、フォームが送信され、押されたボタンのvalue属性の値がパラメーター「cmd」としてコントローラーのアクションメソッドに渡されます。アクションメソッド内では、この値が「Save」「Update」「Delete」のどれに該当するかを判定し、対応するメッセージをViewDataに格納してビューに表示します。

この手法を活用すれば、1つのフォームから保存・更新・削除といった複数の操作を、クリックされたボタンに応じて柔軟に切り替えて処理できるようになります。

  1. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali

  2. HTML DOMのForm submit()メソッドとは？構文と使い方を実例付きで解説

    HTML DOMのForm submit()メソッドは、フォームのデータをaction属性で指定されたアドレスへ送信するために使用されます。送信ボタンと同じ役割を果たし、フォームデータをプログラムから送信できるのが特徴です。また、このメソッドは引数（パラメータ）を一切受け取りません。 構文 Form submit()メソッドの構文は以下のとおりです。 formObject.submit() サンプルコード Form submit()メソッドの具体的な使用例を見てみましょう。 <!DOCTYPE html> <html> <head> <style>