Unobtrusive ajax in Razor Pages to call different handler

Question

I have a partial view with two buttons. The buttons will call different handler and update the partial view with the result. I managed to set the handler in the form and call one of the handler.

<form method="post" data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data- ajax-update="#dvx-p1704">
   <div id="dvx-p001">
       <partial for="P001" name="Partials/_Partial01" />
   </div>
</form>

But how to I call different handler with the two buttons? I want to send the form in the call?

<div class="row">
  <div class="col-sm-6">
    <button type="submit" data-ajax="true" data-ajax-method="post" data-ajax-url="Groups/Update">Clean</button>
  </div>
  <div class="col-sm-6">
    <button type="submit" data-ajax="true" data-ajax-method="post" data-ajax-url="Groups/Clean">Update</button>
  </div>
</div>

Xinran Shen · Answer 1 · 2022-01-31T07:07:13.753

You can use this url:

<div class="row">
<form method="post" data-ajax-method="post" data-ajax="true" data-ajax-url="Privacy?handler=Index">
    <input asp-for="@Model.Test" />
    <button type="submit">Index</button>
</form> 
<form method="post" data-ajax-method="post" data-ajax="true" data-ajax-url="Privacy?handler=Privacy">
    <input asp-for="@Model.Test" />
    <button type="submit">Index</button>
</form>
</div>

==========================================

In ajax, We can set different onclick() methods for different buttons to submit the same form to different handlers, But unfortunately, I didn't find any similar method in Unobtrusive AJAX. So if you just want to post same form to two different handlers , you can use asp-page-handler attribute.

<form method="post">        
    <input asp-for="@Model.Test" />
    <button asp-page-handler="handlerA">handlerA</button>        
    <button asp-page-handler="handlerB">handlerB</button>
</form>

Thank you for your answer and suggestion. I want to post same form to two different handlers. It seems that Unobtrusive ajax only serialize and post the whole form if the data-ajax aliments are attached to the form. This will allow only one button in each form to be posted to the server. Correct me if I'm wrong here. I also noticed that the data-ajax elements can only be attached to forms or hyper links (a). — Stefan S, Jan 29 '22 at 10:57

Unobtrusive ajax in Razor Pages to call different handler

1 Answers1