Wednesday 3 December 2014

MVC4 Razor: Handling multiple submit buttons on the same View

Hi friends,in this article I will explain about Handling multiple submit buttons on the same View.
In previous articles I explained about Create Nested WebGrid with Expand/Collapse in ASP.NET MVC4WebGrid with inline editing, updating, cancel and delete the record using JSON AJAX, and How to create a CheckboxList in MVC4 Razor

In ASP.NET MVC we have requirements like there are multiple submit buttons on same form. As we are used to handle single button on same view, here we will see how to handle multiple submit buttons like Login, Reset and cancel buttons on same view with various methods.
Suppose we have one Login form with various submit buttons like below.


Model(Login.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcMultipleSubmitButtons.Models
{
    public class Login
    {
        public string userName { get; set; }
        public string password { get; set; }
    }
}

View(Home.cshtml):
@{
    ViewBag.Title = "Welcome to Home Page";
}

<h2>Welcome to Home Page</h2>

Note:The model and Home view is same for below two methods.

Handle Multiple Submit Buttons based on name value provided in submit Buttons:
Controller(HomeController.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMultipleSubmitButtons.Models;

namespace MvcMultipleSubmitButtons.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }
     
        [HttpPost]
        public ActionResult Index(Login model, string Command)
        {
            if (Command == "Login")
            {
                return RedirectToAction("Home");
            }
            else if (Command == "Reset")
            {
                ViewBag.msg = "You have Clicked Reset button";
                return View();
            }
            else if (Command == "Cancel")
            {
                ViewBag.msg = "You have Clicked Cancel Button";
                return View();
            }
            else
            {
                return View();
            }
          
        }
      
        public ActionResult Home()
        {
            return View();
        }
    }
}

View(Index.cshtml):
@model MvcMultipleSubmitButtons.Models.Login
@{
    ViewBag.Title = "Index";
}
<h2>
How to handle multiple submit buttons in MVC View</h2>
<h5 style="color:Red">@ViewBag.msg</h5>
@using (Html.BeginForm("Index", "Home",FormMethod.Post))
{
    <table>
        <tr>
            <td>
                UserName
            </td>
            <td>
                :
            </td>
            <td>@Html.TextBoxFor(m => m.userName)
            </td>
            <td>
                @Html.ValidationMessageFor(m => m.userName)
            </td>
        </tr>
        <tr>
            <td>
                Password
            </td>
            <td>
                :
            </td>
            <td>@Html.TextBoxFor(m => m.password)
            </td>
            <td>
                @Html.ValidationMessageFor(m => m.password)
            </td>
        </tr>
    </table>
    <br/>

        <div style="padding-left: 20px;">
      <input type="submit" value="Login" name="Command" title="Login" />
        <input type="submit" value="Reset" name="Command" title="Reset" />
        <input type="submit" value="Cancel" name="Command" title="Cancel" />
    </div>
}

Handle Multiple submit buttons using Request Parameter in Asp.net MVC 4 Razor:

Controller(HomeController.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMultipleSubmitButtons.Models;

namespace MvcMultipleSubmitButtons.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(Login model)
        {
            if (!string.IsNullOrEmpty(Request["Login"]))
            {
                return RedirectToAction("Home");
            }
            else if (!string.IsNullOrEmpty(Request["Reset"]))
            {
                ViewBag.msg = "You have Clicked Reset button";
                return View();
            }

            else if (!string.IsNullOrEmpty(Request["Cancel"]))
            {
                ViewBag.msg = "You have Clicked Cancel Button";
                return View();
            }
            else
            {
                return View();
            }
        }
      
        public ActionResult Home()
        {
            return View();
        }
    }
}

View(Index.cshtml):
@model MvcMultipleSubmitButtons.Models.Login
@{
    ViewBag.Title = "Index";
}
<h2>
How to handle multiple submit buttons in MVC View</h2>
<h5 style="color:Red">@ViewBag.msg</h5>
@using (Html.BeginForm("Index", "Home",FormMethod.Post))
{
    <table>
        <tr>
            <td>
                UserName
            </td>
            <td>
                :
            </td>
            <td>@Html.TextBoxFor(m => m.userName)
            </td>
            <td>
                @Html.ValidationMessageFor(m => m.userName)
            </td>
        </tr>
        <tr>
            <td>
                Password
            </td>
            <td>
                :
            </td>
            <td>@Html.TextBoxFor(m => m.password)
            </td>
            <td>
                @Html.ValidationMessageFor(m => m.password)
            </td>
        </tr>
    </table>
    <br/>

        <div style="padding-left: 20px;">
      <input type="submit" value="Login" name="Login" title="Login" />
        <input type="submit" value="Reset" name="Reset" title="Reset" />
        <input type="submit" value="Cancel" name="Cancel" title="Cancel" />
    </div>
}

The output of the above code as shown in the below figure.When you click on Login button then it will redirect to Home page.


When we click on Cancel button then it will displays "You have Clicked Cancel Button".


When we click on Reset button then it will displays "You have Clicked Reset Button".
You can download the code by clicking on the below Download image.

No comments:

Post a Comment

© 2012-2018 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.