JQuery submit intervention doesn't add parameter required in Controller method

问题

I have 4 submit buttons on my View and in order for them to call the right method in the controller I added a JQuery POST function.

Dependant on what buttons I click in the View I want the Controller to calculate whatever operation was selected. The JQuery correctly links my View with the Controller (the debugger first stops in the JQuery, then in the controller), however it doesn't seem to pass the parameter operation (needed in CalculationValidation(Model, String) ). So it ends up reloading the View with a new Model (operation == null). What it should do is calculate the result dependant on the clicked operation and then reload the PartialView.

The JQuery does serialize the model correctly as the Model's properties Number1 and Number2 are filled from the View, but without the operation type. WIthout that I'm unable to calculate the result in the controller and load the PartialView with the updated model.

Question / Goal

How would I be able to load the PartialView with the Model.Result without reloading the full page after clicking the submit buttons?

Prehaps important: The result of filling in the input fields and then clicking a submit button returns the error alert from the JQuery script.

CalculationValidation.cshtml

@using MVCPluginTest.Models
@model MVCPluginTest.Models.CalculatorModel

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Validation master Page";
}

<div id="containter">
    <h2>Validation</h2>
    @*@using (Html.BeginForm("CalculationValidation", "Home", FormMethod.Post))*@
    @*@using (Html.BeginForm("CalculationValidation", "Home", FormMethod.Get, new { id = "ValidationForm" , name = "ValidationForm"} ))*@
    @using (Ajax.BeginForm("CalculationValidation", "Home", new AjaxOptions { HttpMethod = "POST" }, new { id = "ValidationForm", name = "ValidationForm" }))
    {
        <!--
        if (@ViewData.ModelState.IsValid)
        {
            <b>
                Number 1 : @ViewBag.Number1<br />
                Number 2 : @ViewBag.Number2<br />
                Result: @ViewBag.Result
            </b>
        } -->
        @Html.ValidationSummary(true)
        <fieldset>
            <p>@Html.LabelFor(model => model.Number1)</p>
            <p>@Html.EditorFor(model => model.Number1) @Html.ValidationMessageFor(model => model.Number1)</p>

            <p>@Html.LabelFor(model => model.Number2)</p>
            <p>@Html.EditorFor(model => model.Number2) @Html.ValidationMessageFor(model => model.Number2)</p>
        </fieldset>
            <p><input type="submit" value="+" name="operation" id="btn-plus" /></p>
            <p><input type="submit" value="-" name="operation" id="btn-minus" /></p>
            <p><input type="submit" value="*" name="operation" id="btn-multiply" /></p>
            <p><input type="submit" value="/" name="operation" id="btn-divide" /></p>
            @Html.ValidationMessageFor(model => model.OperationType)
            @Html.ValidationMessageFor(model => model.Result)

    }
</div>
<div id="dvCalculationResult">
    @{ Html.RenderPartial("CalculationPartial", @Model); }
</div>

LoadPartialCalc.js

$(document).ready(function () {
    $("#ValidationForm").submit(function (event) {
        event.preventDefault();

        $.ajax({
            //url: '@Url.Action("CalculationValidation", "Home")',
            url: "/Home/CalculationValidation",
            dataType: 'json',
            data: $("#ValidationForm").serialize(),
            type: 'POST',
            success: function (result) {
                $("#dvCalculationResult").html(result);
            },
            error: function (xhr) {
                alert("err");
            }
        });
    });
});

HomeController

public ActionResult CalculationValidation()
{
    return View(new CalculatorModel());
}
[HttpPost]
public ActionResult CalculationValidation(CalculatorModel valModel, string operation)
{
    var num1 = valModel.Number1;
    var num2 = valModel.Number2;
    if (operation == null)
    {
        ModelState.AddModelError("OperationType", "No operation type selected");
        return View(new CalculatorModel());
    }
    else
    {
        if (ModelState.IsValid)
        {
            switch (operation)
            {
                case "+":
                    valModel.Result = num1 + num2;
                    break;
                case "-":
                    if (ValidateNumbers(num1, num2, "-"))
                    {
                        valModel.Result = num1 - num2;
                    }
                    else
                    {
                        valModel.Result = 0;
                        ModelState.AddModelError("Result", "Minus can't be lower than 0");
                    }
                    break;
                case "*":
                    valModel.Result = num1 * num2;
                    break;
                case "/":
                    if (ValidateNumbers(num1, num2, "/"))
                    {
                        valModel.Result = num1 / num2;
                    }
                    else
                    {
                        valModel.Result = 0;
                        ModelState.AddModelError("Result", "Division not whole.");
                    }
                    break;
                default:
                    valModel.Result = 0;
                    break;
            }
        }
    }
    valModel.Result = num1 + num2;
    return PartialView("CalculationPartial", valModel);
}

CalculatorModel

public class CalculatorModel
{
    [Required(ErrorMessage = "Please enter a number.")]
    [Display(Name = "Number 1")]
    [RegularExpression(@"^[0-9]*$", ErrorMessage = "You can only enter numbers above 0.")]
    public double Number1
    {
        get;
        set;
    }
    [Required(ErrorMessage = "Please enter a number.")]
    [Display(Name = "Number 2")]
    [RegularExpression(@"^[0-9]*$", ErrorMessage = "You can only enter numbers above 0.")]
    public double Number2
    {
        get;
        set;
    }
    public string OperationType
    {
        get;
        set;
    }
    public double Result
    {
        get;
        set;
    }
}

CalculationPartial

@using MVCPluginTest.Models
@model MVCPluginTest.Models.CalculatorModel

<h2>Result</h2>
<p id="result">@Model.Result</p>

来源：https://stackoverflow.com/questions/39635605/jquery-submit-intervention-doesnt-add-parameter-required-in-controller-method