send parameters to aspx webform codebehind method using ajax in asp.net mvc

Question

I'm developing asp.net mvc 5 web application. I want to send parameters to aspx web-form code-behind method using ajax in asp.net mvc

I have following aspx web page and relevant files

within that Incomplete_Prodcut.aspx.cs codebehind file I have webmethod which is

[WebMethod]    
public static string OnSubmit(string type, string category, string country, string subsidary, string dateHERE)
{
    return "it worked";
}

This is what I did upto now

.................
@using (Html.BeginForm())
{

    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <div class="form-group"></div>


    <div class="row">

        <div class="col-xs-6">
            <div class="form-group">
                @Html.LabelFor(m => m.Type, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownListFor(m => m.Type, Model.TypeList, "Select the type", new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Type, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
..............................

    <div class="row">
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="button" id="report"  value="Generate Report" class="btn btn-success submit" /> 
            </div>                      
        </div>
    </div>



}







@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")
         ................................


        <script type="text/javascript">

            $('#report').click(function () {

                var type = $('#Type');
                var category = $('#Category');
                var country = $('#Country');
                var subsidary = $('#Subsidary');
                var dateHERE = $('#Date');

                var dataValue = { type: type.val(), category: category.val(), country: country.val(), subsidary: subsidary.val(), dateHERE: dateHERE.val() };

            $.ajax({
                type: "POST",
                url: "/Report/Incomplete_Prodcut.aspx/OnSubmit",
                data: dataValue,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',

                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
                },
                success: function (result) {
                    alert("We returned: " + result);
                }
            });
        });


    </script>


}

but once I click "Generate Report" button Im getting following error

Internal Server Error