表单提交有两个按钮

Question

我正在使用Razor Pages。我有一个表格，可以让你买或卖。我需要根据用户是购买还是销售来更改OrderPlacement模型中OrderType字段的值。我是用javascript完成的。

<input type="hidden" asp-for="@Model.OrderPlacement.OrderType" />
<input class="btn-primary" type="button" value="Buy" asp-page-handler="Buy" onclick="SubmitBuyOrder();" />
<input class="btn-primary" type="button" value="Sell" asp-page-handler="Sell" onclick="SubmitSellOrder();" />

这是我的JavaScript:

function SubmitSellOrder() {
document.getElementById('OrderPlacement_OrderType').value = 'Sell';
document.getElementById('OrderForm').submit();
}
function SubmitBuyOrder() {
document.getElementById('OrderPlacement_OrderType').value = 'Buy';
document.getElementById('OrderForm').submit();
}

下面是我的后端方法:

public async Task<IActionResult> OnPostBuyAsync()
{
OrderPlacementResponse response = new OrderPlacementResponse();
try
{
if (!ModelState.IsValid)
return Page(); //Display User Errors
else
{
//Do Some Stuff
}

}
catch (Exception ex)
{
//TODO: Log Errors
//TODO: Redirect to Error Page
return RedirectToPage("/Error"); //show errors
}
}

public async Task<IActionResult> OnPostSellAsync()
{
OrderPlacementResponse response = new OrderPlacementResponse();
try
{
if (!ModelState.IsValid)
return Page(); //Display User Errors
else
{
//Do Some Stuff
}

}
catch (Exception ex)
{
//TODO: Log Errors
//TODO: Redirect to Error Page
return RedirectToPage("/Error"); //show errors
}
}

后端方法没有被命中。但是我看到javascript方法被击中。

我尝试使用常规方法，让按钮直接提交到type="submit"。但是我仍然需要根据按下的按钮更改OrderType，所以我仍然需要类型保持为"button"。和onclick调用javascript方法。

同样，我不能在后端设置这个值(OrderType)，因为在击中后端方法之前有验证运行。

我现有的代码有什么问题，它不会提交?

Answer 1

下面是你可以遵循的工作演示:

视图

@page
@model IndexModel
<form id="OrderForm" method="post">
<input type="hidden" asp-for="@Model.OrderPlacement.OrderType" />
<input class="btn-primary" type="submit" value="Buy" asp-page-handler="Buy" 
onclick="SubmitBuyOrder(event)" />
<input class="btn-primary" type="submit" value="Sell" asp-page-handler="Sell"
onclick="SubmitSellOrder(event);" />
</form>
@section Scripts
{
<script>
function SubmitSellOrder(e) { 
e.preventDefault();
document.getElementById('OrderPlacement_OrderType').value = 'Sell';
var url = document.activeElement.getAttribute("formaction");
document.getElementById('OrderForm').action=url;
document.getElementById('OrderForm').submit(); 
}
function SubmitBuyOrder(e) {
e.preventDefault();
document.getElementById('OrderPlacement_OrderType').value = 'Buy'; 
var url = document.activeElement.getAttribute("formaction");
document.getElementById('OrderForm').action=url;
document.getElementById('OrderForm').submit(); 
}
</script>
}

确保你的后端包含[BindProperty]属性:

[BindProperty]
public OrderPlacementResponse OrderPlacement { get; set; }

---

除此之外，你还可以像下面这样组合成一个函数:

@page
@model IndexModel
<form id="OrderForm" method="post">
<input type="hidden" asp-for="@Model.OrderPlacement.OrderType" />
<input class="btn-primary" type="submit" value="Buy" asp-page-handler="Buy"  />
<input class="btn-primary" type="submit" value="Sell" asp-page-handler="Sell"  />
</form>
@section Scripts
{
<script>
$("#OrderForm").on("submit",function(e){
e.preventDefault();
var orderType= $(this).find("input[type=submit]:focus").val();
document.getElementById('OrderPlacement_OrderType').value = orderType;
var url = document.activeElement.getAttribute("formaction");
document.getElementById('OrderForm').action=url;
document.getElementById('OrderForm').submit();
})
</script>
}