CODEWITHSUNDEEP
c#ajaxasp.net-mvcrazorrazor-pages
danelliott
danelliott

Reputation: 180

Razor Pages POST Multiple Forms w/ Model Binding

I have multiple forms on a single razor page that I want to be POSTed after one button is clicked. I tried using a javascript function that would .submit() both forms (put in the onclick= of the button), but only one form's values were actually passed to the OnPost() method serverside. Here's the relevant code from the .cshtml and the .cs files:

StudentMain.cshtml

<!--first form-->
<form class="login100-form" method="post">
    <span class="login100-form-title" style="padding-bottom: 38px">
          Student Information
    </span>
    <div class="wrap-input100">
        <input class="input100 has-val" type="text" name="name" value='@ViewData["name"]' readonly/>
        <span class="focus-input100" data-placeholder="Student Name"></span>
    </div>

    ...more divs/inputs as above

</form>

<!--second form-->
<form class="login100-form" method="post">
    <div class="wrap-input100">
        <select class="input100 select" name="eduplan" selectedval='@ViewData["eduplan"]'>
            <option disabled selected value style="display:none"/>
            <option>High School Diploma</option>
            <option>Technical Training</option>
            <option>Associate Degree</option>
            <option>Bachelor's Degree</option>
            <option>Advanced Degree</option>
            <option>Military</option>
            <option>Other</option>
        </select>
        <span class="focus-input100" data-placeholder="Education Plan"></span>
    </div>

    ...more divs/selects as above

    <div class="container-login100-form-btn">
        <div class="wrap-login100-form-btn">
        <div class="login100-form-bgbtn"></div>
            <button class="login100-form-btn" type="submit">
                Save
            </button>
        </div>
    </div>
</form>

StudentMain.cshtml.cs

public class StudentMain : PageModel
{
     public void OnPost(string eduplan, string college, string major, string careerpath, string ethnicity, string gender, string ncaa, string firstgen, string onlineinterest)
     {
          Database.SaveStudentData(eduplan, college, major, careerpath, ethnicity, gender, ncaa, firstgen, onlineinterest);
     }
}

So, what's the best way to go about doing this? How can I make sure that the values from both forms are passed to the OnPost() method simultaneously? Do I need to use AJAX in some capacity? Any help is appreciated.

Upvotes: 8

Views: 10408

Answers (1)

SmartE
SmartE

Reputation: 641

You can use different methods for different form POSTs by specifying the method's name as the value for the asp-page-handler tag helper on each form. More information can be found on this Youtube Video

UPDATE

For example, you have two POST methods in your Model class, namely: OnPostAdd and OnPostSubtract, the different forms to post to the different methods would look like this:

<form method="post" asp-page-handler="Add">
    <button type="submit">Add</button>
</form>

<form method="post" asp-page-handler="Subtract">
    <button type="submit">Subtract</button>
</form>

PS: It doesn't matter whether your method is named OnPostAdd or OnPostAddAsync, ASP.NET Core still expects your handler name to be Add as it automatically resolves prefixes like OnPost, OnGet etc, and suffixes like Async

Upvotes: 15

Related Questions