Master ASP.NET Core 2.1 : Instructor-led online course conducted by Bipin Joshi. Next batch starting from 30 December 2018. Limited seats. More details are available here.

Handling Multiple Submit Buttons in Razor Pages

Razor Pages in ASP.NET Core allow you to build page focused web applications using simple page based programming model. If you worked with Razor Pages before you are probably aware that by default you can handle requests using methods such as OnGet(), OnPost(), OnPut(), and OnDelete(). This means a form POSTed to the server needs to be handled using only one action - OnPost(). At times, however, you need to have multiple actions to deal with the same HTTP verb. A common scenario is when you have multiple submit buttons on a form.

Consider the following example that shows such a form.

As you can see, the Index.cshtml page has three submit buttons housed inside a form. And you want to handle each button different. By default, clicking on any of these three buttons will trigger OnPost() action. How to wire three different handlers instead of the default handler? To accomplish this you need to use the asp-page-handler attribute of the tag helpers. Have a look at the following mark that shows the above form :

<form method="post">
    <h2>What kind of yoga classes you are looking for?</h2>
    <input type="submit" 
value="Basic Yoga Postures" 
asp-page-handler="YogaPostures" asp-route-sessioncount="20" />
    <br />
    <input type="submit" 
value="Kriya and Meditation" 
asp-page-handler="Meditation" asp-route-sessioncount="10" />
    <br />
    <input type="submit" 
value="Restorative Yoga" 
asp-page-handler="RestorativeYoga" asp-route-sessioncount="15" />
</form>

Notice the code shown in bold letters. The input elements have asp-page-handler attribute set to certain values. This attribute decides the action from the page model that will be handling the form submission. The asp-page-handler attribute basically emits formaction HTML attribute in the browser. Also notice that the input elements also have asp-route-sessioncount attribute. This attribute sets a route value that is then supplied to the corresponding handler method. Specifying asp-route-* is, of course, optional. Form fields are made available to the handler methods through model binding as usual (also see my earlier article here).

Ok. So far so good. Now it's time to write those handler actions as mentioned in the asp-page-handler attributes. Open the page model class (Index.cshtml.cs) and write the following actions into it :

public void OnPostYogaPostures(int sessionCount)
{
    //do your work here

    ViewData["message"] = $"Your request for 
{sessionCount} sessions in Yoga Postures 
is being processed.";
}

public void OnPostMeditation(int sessionCount)
{
    //do your work here

    ViewData["message"] = $"Your request for 
{sessionCount} sessions in Kriya and Meditation 
is being processed.";
}


public void OnPostRestorativeYoga(int sessionCount)
{
    //do your work here

    ViewData["message"] = $"Your request for 
{sessionCount} sessions in Restorative Yoga 
is being processed.";
}

Notice the action naming convention. Since we want to handle POST requests we prepend all the action names (asp-page-handler name) with "OnPost". Thus we have OnPostYogaPostures, OnPostMeditation, OnPostRestorativeYoga. Also notice that all the handlers have sessionCount parameter. This parameter will come from the asp-route-sessioncount attribute we assigned earlier.

Set a breakpoint in each of these methods and run the application. You will find that clicking on a button takes the control to the corresponding page handler.

That's it for now! Keep coding !!


Bipin Joshi is a software consultant, trainer, author, yoga mentor, and spiritual guide having 23+ years of experience in software development, consulting, and training. He conducts instructor-led online training courses in ASP.NET Core, ASP.NET MVC, and Design Patterns for individuals and small groups. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 08 January 2018


Tags : ASP.NET ASP.NET Core MVC C# Visual Studio


Subscribe to our newsletter

Get monthly email updates about new articles, tutorials, code samples, and how-tos getting added to our knowledge base.