ASP.NET MVCでボタン操作をもっと便利に！フォーム、JavaScript、Razor Pages駆使のテクニック

2024-06-22

HTML ボタンで ASP.NET MVC コントローラーとアクションメソッドを呼び出す方法

フォーム送信を使用する

これが最も一般的な方法です。以下の手順で行います。

ビューでフォームを作成し、action 属性と method 属性を設定します。 action 属性は、呼び出すアクションメソッドを指定します。 method 属性は、送信方法を指定します (通常は POST または GET)。
フォーム内にボタンを作成し、type 属性を submit に設定します。
ボタンがクリックされると、フォームが送信され、指定されたアクションメソッドが呼び出されます。

例:

<form action="<%= Url.Action("Index", "Home") %>" method="post">
  <input type="text" name="name" />
  <input type="submit" value="送信" />
</form>

上記のコードでは、Home コントローラーの Index アクションメソッドが呼び出されます。

JavaScript を使用して、ボタンクリック時に Ajax リクエストを発行し、アクションメソッドを呼び出すこともできます。以下の手順で行います。

ビューでボタンを作成し、onclick 属性に JavaScript コードを設定します。
JavaScript コード内で、Ajax リクエストを発行して、アクションメソッドを呼び出します。

<button onclick="myFunction()">送信</button>

<script>
function myFunction() {
  $.ajax({
    url: "@Url.Action("Index", "Home")",
    type: "POST",
    success: function(data) {
      // アクションメソッドからのレスポンスを処理
    }
  });
}
</script>

一般的に、フォーム送信を使用する方が簡単です。ただし、非同期処理が必要な場合は、JavaScript を使用する必要があります。

アクションメソッドにパラメーターを渡すには、フォームの入力フィールドまたはクエリ文字列を使用できます。
アクションメソッドからの結果をビューに表示するには、ViewBag または ViewData オブジェクトを使用できます。

HTML ボタンで ASP.NET MVC コントローラーとアクションメソッドを呼び出すサンプルコード

フォーム送信を使用する場合

@model MyViewModel

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
  <div class="form-group">
    @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label" })
    @Html.EditorFor(model => model.Name, htmlAttributes: new { @class = "form-control" })
  </div>

  <div class="form-group">
    <input type="submit" value="送信" class="btn btn-default" />
  </div>
}

コントローラー (HomeController.cs)

public class HomeController : Controller
{
  public ActionResult Index(MyViewModel model)
  {
    if (ModelState.IsValid)
    {
      // モデルを処理
      // ...

      return View("Result", model);
    }

    return View("Index", model);
  }

  public ActionResult Result(MyViewModel model)
  {
    return View(model);
  }
}

ビュー (Result.cshtml)

@model MyViewModel

<h1>送信完了</h1>

<p>名前: @Model.Name</p>

JavaScript を使用する場合

<button onclick="myFunction()">送信</button>

<script>
function myFunction() {
  $.ajax({
    url: "@Url.Action("Index", "Home")",
    type: "POST",
    data: { name: "山田太郎" }, // アクションメソッドにパラメーターを渡す
    success: function(data) {
      // アクションメソッドからのレスポンスを処理
      alert(data);
    }
  });
}
</script>

public class HomeController : Controller
{
  public ActionResult Index(string name)
  {
    return Content(name); // アクションメソッドからの結果を返す
  }
}

このサンプルコードは、基本的な動作のみを示しています。実際には、必要に応じて拡張することができます。

ファイルをアップロードするボタン
Ajax でデータを取得するボタン
ダイアログを表示するボタン

HTML ボタンで ASP.NET MVC コントローラーとアクションメソッドを呼び出すその他の方法

asp-controller と asp-action 属性を使用する

ASP.NET Core 2.1 以降では、asp-controller と asp-action 属性を使用して、HTML ボタンに直接コントローラーとアクションメソッドを指定できます。これは、従来の form 要素と @Url.Action ヘルパーを使用するよりも簡潔な方法です。

<button type="button" asp-controller="Home" asp-action="Index">送信</button>

data-* 属性を使用して、ボタンにコントローラーとアクションメソッドに関するデータを保存し、JavaScript でそのデータを使用して Ajax リクエストを発行することもできます。

<button type="button" data-controller="Home" data-action="Index">送信</button>

<script>
$(document).ready(function() {
  $("button").click(function() {
    var controller = $(this).data("controller");
    var action = $(this).data("action");

    $.ajax({
      url: "/" + controller + "/" + action,
      type: "POST",
      success: function(data) {
        // アクションメソッドからのレスポンスを処理
      }
    });
  });
});
</script>

独自の HTML ヘルパーを作成して、ボタンのレンダリングとアクションメソッドへの呼び出しをカプセル化することもできます。これは、より複雑なロジックが必要な場合に役立ちます。

public static class MyHtmlHelper
{
  public static IHtmlString MyButton(this HtmlHelper htmlHelper, string controller, string action)
  {
    var url = htmlHelper.Action(action, controller);
    var button = new TagBuilder("button");
    button.SetAttributeValue("type", "button");
    button.SetAttributeValue("onclick", "location.href = '" + url + "'");
    return button.ToString();
  }
}

@Html.MyButton("Home", "Index")

Razor Pages を使用する

ASP.NET Core Razor Pages を使用している場合は、ページモデルのハンドラーメソッドに直接ボタンのクリックイベントを処理させることができます。

@page "/index"

@model MyPageModel

<button type="button" onclick="handleClick()">送信</button>

<script>
function handleClick() {
  // アクションを実行
}
</script>

@functions {
  public void OnClick()
  {
    // アクションを実行
  }
}