Chandradev's Blog

In Asp.net MVC there are so many ways to implement the multiple submit button in single view.
I have already written one post using attribute-based solution

But there are still so many other approaches to do this task like

1. Using Multiple button with different Name
2. Using Multiple button with Same Name
3. using HTML 5 Foraction and Formmethod
4. using using Jquery Click event

Here I am going to show all the 4 approaches in single view and controller for sake of simplicity

Step 1: Create the Emp class in Model folder like this

namespace MultipleSave.Models
{
    public class Emp
    {
        public int Id { get; set; }
        public string EmpName { get; set; }
        public string EmpAddress { get; set; }
        public string  EmailId { get; set; }
    }
}

Step 2: Keep the all UI related code in Index view

@model MultipleSave.Models.Emp

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>


@using (Html.BeginForm("ProcessForm","Home",FormMethod.Post)) 
{
    <b>Method 1</b>
    @Html.AntiForgeryToken()

    @Html.EditorForModel()
    <br />
    <input type="submit" name="save" value="Save" />
    <input type="submit" name="cancel" value="Cancel" />
    <br />
    @ViewBag.msg

}
<br />

@using (Html.BeginForm("SaveData", "Home", FormMethod.Post))
{
    <b>Method 2</b>
    @Html.AntiForgeryToken()

    @Html.EditorForModel()
    <br />
    <input type="submit" name="submit" value="Save" />
    <input type="submit" name="submit" value="Cancel" />
    <br />
    @ViewBag.msg1

}

<br />

@using (Html.BeginForm())
{
    <b>Method 3 using HTML 5 Foraction and Formmethod</b>
    @Html.AntiForgeryToken()

    @Html.EditorForModel()
    <br />
    <input type="submit" name="save" value="Save"
           formaction="SaveForm" formmethod="post" />
    <input type="submit" name="cancel" value="Cancel"
                   formaction="CancelForm" formmethod="post" />
    <br />
    @ViewBag.msg2

}

<br />

@using (Html.BeginForm())
{
    <b>Method 4 using Jquery</b>
    @Html.AntiForgeryToken()

    
    <br />
    @Html.EditorForModel()
    <br />
    <input type="submit" id="save" value="Save" />
    <input type="submit" id="cancel" value="Cancel" /><br />
                @ViewBag.msg3

}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function () {

        $("#save").click(function () {
            $("form").attr("action", "/home/Saveform1");
        });

        $("#cancel").click(function () {
            $("form").attr("action", "/home/Cancelform1");
        });

    });
</script>

Step 3: Write the C# code in Home Controller like this

using MultipleSave.Models;
using System.Web.Mvc;

namespace MultipleSave.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        //Method 1 Multiple button with different Name
        [HttpPost]
        public ActionResult ProcessForm(Emp obj,string save,string cancel)
        {
            if(!string.IsNullOrEmpty(save))
            {
                ViewBag.msg = "Emp saved successfully";
            }
            if(!string.IsNullOrEmpty(cancel))
            {
                ViewBag.msg = "The operation was cancelled";
            }
            return View("Index", obj);
        }

        // Method 2 Multiple button with Same Name
        [HttpPost]
        public ActionResult SaveData(Emp obj, string submit)
        {
            switch (submit)
            {
                case "Save":
               ViewBag.msg1 = "Emp saved successfully";
                    break;
                case "Cancel":
                    ViewBag.msg = "The operation was cancelled";
                    break;
            }
            return View("Index", obj);
        }

        //Method 3: using HTML 5 features
        [HttpPost]
        public ActionResult SaveForm(Emp obj)
        {
            ViewBag.msg2 = "Emp saved successfully";
            return View("Index", obj);
        }

        //Method 3: using HTML 5 features
        [HttpPost]
        public ActionResult CancelForm(Emp obj)
        {
            ViewBag.msg2 = "The operation was cancelled";
            return View("Index", obj);
        }

        //Method 4: using Jquery
        [HttpPost]
        public ActionResult SaveForm1(Emp obj)
        {
            ViewBag.msg3 = "Emp saved successfully";
            return View("Index", obj);
        }

        //Method 4: using Jquery
        [HttpPost]
        public ActionResult CancelForm1(Emp obj)
        {
            ViewBag.msg3 = "The operation was cancelled";
            return View("Index", obj);
        }

    }
}

Summary:
Here we show that how to handle the multiple submit button in single view with so many ways.