Manage Multiple Buttons in MVC 4

In Asp.Net MVC, we have controllers, views and model architecture which are free from server side controls which really helps application to runs faster than web form application whom have the series of server controls. Here we have to choose our engine and In this post I choose Razor engine. 

Many developers now a days ask questions on Asp.net forum about "How to manage the multiple button post functionality and perform different variety of functionality upon each button click". In web form, this is quite easy for any person but in MVC you have to declare the multiple partial views to fix this need.

But instead of going to use partial view approach, we have another approach is also present known as "Client-side approach" in which we create a JavaScript functionality with a parameter named like "buttonType" and in this function we actual redirect the request to controller/method-name/parameter value.

@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
    
    function PerformFunctionalityByValue(buttonType) {
        var customerId = @Model.CustomerId;
        window.location.href = "/Home/PerformFunctionalityByValue?id=" + 
               customerId + "&type=" + buttonType;
    }

    function BackToDefault() {
        window.location.href = '/Home/Index/';
    }
    
</script>

<fieldset>
        <legend>@ViewBag.Title</legend>

            <div class="controls">
                <input type="button" value="Button A" class="btn btn-primary" 
                    onclick=" return PerformFunctionalityByValue('ButtonA'); " 
                    style="width: 430px;" />
            </div>

            <div class="controls">
                <input type="button" value="Button B" class="btn btn-primary" 
                    onclick=" return PerformFunctionalityByValue('ButtonB'); " 
                    style="width: 430px;" />
            </div>

            <div class="controls">
                <input type="button" value="Button C" class="btn btn-primary" 
                    onclick=" return PerformFunctionalityByValue('ButtonC'); " 
                    style="width: 430px;" />
            </div>

            <div class="controls">
                <input type="button" value="Back to Home page" class="btn btn-primary" 
                    onclick=" return BackToDefault(); " style="width: 430px;" />
            </div>

</fieldset>

In controller method, we create different regions with respect to parameter value and performs the desire functionality in it.

public ActionResult PerformFunctionalityByValue(long id = 0, string type = "")
{
    if (type == "ButtonA")
    {
        // Perform the Button A functionality there
        // And redirect to your specific view or skip this line
    }
    else if (type == "ButtonB")
    {
        // Perform the Button B functionality there
        // And redirect to your specific view or skip this line
    }
    else if (type == "ButtonC")
    {
        // Perform the Button C functionality there
        // And redirect to your specific view or skip this line
    }

    return RedirectToAction("Index", "Home");
}

That's the fastest and easiest approach instead of creating the multiple partial views. Hope this will help you to understand the flow and logic. Stay tuned!