您需要进行以下修改:
像这样设置按钮类型:<button id="button" type="button">Update</button>
代替<button id="button">Click Me</button>
Note:默认情况下按钮类型是提交,因此它总是发布附加表单POST
请求以便您重定向到该地址
页。
Output:
Update:虽然我认为你的errorMessage
标签看起来不错,但我通常使用 javascript 或 Jquery 标签幻灯片不同,如下是完整代码供您参考。请随意根据您的要求进行定制。
HTML:
<div>
<input type="text" class="text-danger float-right" style="border:none;font-size: smaller" id="errorMessage" readonly />
<form asp-action="EditItem">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="OrderQuantity" class="control-label"></label>
<input asp-for="OrderQuantity" id="txt" class="form-control" />
<span asp-validation-for="OrderQuantity" class="text-danger"></span>
</div>
<input type="hidden" id="orderId" name="orderId" value="123456" />
<input type="hidden" id="inventoryorderId" name="inventoryorderId" value="22222" />
<input type="hidden" id="inventoryId" name="inventoryId" value="3333" />
<button id="button" type="button">Update</button>
</form>
</div>
Javascript:
@section Scripts {
<script type="text/javascript">
$("#button").click(function () {
var orderedQuantity = $("#txt").val();
var orderId = $("#orderId").val();
var inventoryorderId = $("#inventoryorderId").val();
var inventoryId = $("#inventoryId").val();
var data = {
orderId: orderId,
inventoryorderId: inventoryorderId,
inventoryId: inventoryId,
orderedQuantity: orderedQuantity,
};
$.ajax({
type: 'POST',
url: '@Url.Action("EditItem", "Order")',
data: data,
dataType: "json",
success: function (data) {
console.log(data);
if (data.status === "NotAvailable") {
alert("NotAvailable");
$("#errorMessage").val("Enter a valid Quantity");
return false;
}
else {
alert("Else fired");
var url = '@Url.Action("Index", "Order")';
window.location.href = url;
}
},
error: function (error) {
alert("Alert");
}
});
});
</script>
}
希望这能解决您的问题。