ASP.NET MVCで複数の送信ボタンを処理するためのベストプラクティス

ASP.NET MVCフレームワークで複数の送信ボタンを処理する方法

ボタンの名前を使用する

これは最も簡単な方法です。各送信ボタンに異なる名前を割り当て、Action メソッドのパラメータとして使用します。

例:

@Html.BeginForm("Action", "Controller")
{
    <input type="submit" name="button1" value="Button 1" />
    <input type="submit" name="button2" value="Button 2" />
}

public ActionResult Action(string button)
{
    switch (button)
    {
        case "button1":
            // Button 1 が押されたときの処理
            break;
        case "button2":
            // Button 2 が押されたときの処理
            break;
    }

    return View();
}

ボタンの値を使用して、どのボタンが押されたかを判断することもできます。

@Html.BeginForm("Action", "Controller")
{
    <input type="submit" value="1" />
    <input type="submit" value="2" />
}

public ActionResult Action(int id)
{
    // id には、押されたボタンの値が格納されます。

    switch (id)
    {
        case 1:
            // Button 1 が押されたときの処理
            break;
        case 2:
            // Button 2 が押されたときの処理
            break;
    }

    return View();
}

カスタム属性を使用して、送信ボタンに独自の識別子を割り当てることもできます。

@Html.BeginForm("Action", "Controller")
{
    @Html.Button("button1", "Button 1")
    @Html.Button("button2", "Button 2")
}

public class ButtonAttribute : Attribute
{
    public string Name { get; set; }

    public ButtonAttribute(string name)
    {
        Name = name;
    }
}

public ActionResult Action(string button)
{
    // button には、カスタム属性の名前が格納されます。

    switch (button)
    {
        case "button1":
            // Button 1 が押されたときの処理
            break;
        case "button2":
            // Button 2 が押されたときの処理
            break;
    }

    return View();
}

public static class HtmlHelperExtensions
{
    public static MvcHtmlString Button(this HtmlHelper helper, string name, string value)
    {
        var button = new TagBuilder("input");
        button.Attributes.Add("type", "submit");
        button.Attributes.Add("name", name);
        button.Attributes.Add("value", value);

        var attribute = helper.ViewContext.ViewData.Get<ButtonAttribute>(name);
        if (attribute != null)
        {
            button.Attributes.Add("data-button-name", attribute.Name);
        }

        return MvcHtmlString.Create(button.ToString());
    }
}

JavaScriptを使用して、送信ボタンがクリックされたときの処理を記述することもできます。

@Html.BeginForm("Action", "Controller")
{
    <input type="submit" value="Button 1" onclick="button1Click()" />
    <input type="submit" value="Button 2" onclick="button2Click()" />
}

function button1Click() {
    // Button 1 が押されたときの処理
}

function button2Click() {
    // Button 2 が押されたときの処理
}

これらの方法のいずれを使用しても、ASP.NET MVCフレームワークで複数の送信ボタンを簡単に処理することができます。

• [ASP.NET MVC - Submit Button -

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(string button)
    {
        switch (button)
        {
            case "button1":
                // Button 1 が押されたときの処理
                break;
            case "button2":
                // Button 2 が押されたときの処理
                break;
        }

        return View();
    }
}

HTML

@Html.BeginForm("Index", "Home")
{
    <input type="submit" name="button1" value="Button 1" />
    <input type="submit" name="button2" value="Button 2" />
}

解説

このサンプルコードでは、HomeController に Index というアクションメソッドがあります。このメソッドは、GET メソッドと POST メソッドの両方に対応しています。

GET メソッドで呼び出されたときは、Index ビューがレンダリングされます。このビューには、2つの送信ボタンがあります。

POST メソッドで呼び出されたときは、送信されたボタンの名前が button パラメータに格納されます。このパラメータを使用して、どのボタンが押されたかを判断できます。

このサンプルコードは、ASP.NET MVC で複数の送信ボタンを処理する方法の基本的な例です。より複雑な処理を行う場合は、上記のその他の方法を参照してください。

複数の送信ボタンを処理するその他の方法

Action メソッドをオーバーロードして、各ボタンに対応する異なるメソッドを作成することができます。

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index1()
    {
        // Button 1 が押されたときの処理
    }

    [HttpPost]
    public ActionResult Index2()
    {
        // Button 2 が押されたときの処理
    }
}

@Html.BeginForm("Index", "Home")
{
    <input type="submit" name="button1" value="Button 1" />
    <input type="submit" name="button2" value="Button 2" />
}

ルーティングを使用して、異なる URL に送信ボタンをマッピングすることができます。

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.MapRoute(
            name: "Button1",
            url: "Home/Button1",
            defaults: new { controller = "Home", action = "Button1" }
        );

        routes.MapRoute(
            name: "Button2",
            url: "Home/Button2",
            defaults: new { controller = "Home", action = "Button2" }
        );
    }
}

<a href="@Url.Action("Button1", "Home")">Button 1</a>
<a href="@Url.Action("Button2", "Home")">Button 2</a>

Ajaxを使用して、送信ボタンをクリックしたときにサーバーに非同期リクエストを送信することができます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(function() {
    $("#button1").click(function() {
        $.ajax({
            url: "@Url.Action("Button1", "Home")",
            type: "POST",
            success: function(data) {
                // 処理
            }
        });
    });

    $("#button2").click(function() {
        $.ajax({
            url: "@Url.Action("Button2", "Home")",
            type: "POST",
            success: function(data) {
                // 処理
            }
        });
    });
});
</script>

<input type="button" id="button1" value="Button 1" />
<input type="button" id="button2" value="Button 2" />

• 簡単な処理の場合は、ボタンの名前や値を使用するのがおすすめです。
• より複雑な処理を行う場合は、Action メソッドのオーバーロードやルーティングを使用する