Ajax Values to Controller Method
<p>I am trying to pass values to my controller, from my view using ajax.  I am relatively new to using ajax so I need some help figuring this out.</p>

<p><strong>Full Page</strong></p>

<pre><code>@model ALSummary.Models.MonthReport

@{
    ViewBag.Title = "Index";
}

&lt;h2&gt;&lt;strong&gt;Generate Monthly Report&lt;/strong&gt;&lt;/h2&gt;

&lt;br /&gt;
&lt;hr /&gt;

@Html.BeginForm("Generate", "MonthReports", FormMethod.Post, htmlAttributes: new { id = "GenerateForm" }){
&lt;div class="form-horizontal"&gt;
    &lt;div class="form-group"&gt;
        @Html.Label("Choose AC:", htmlAttributes: new { @class = "control-label col-md-2" })
        &lt;div class="col-md-10"&gt;
        @Html.DropDownList("AC", null, "-- Select AC --", htmlAttributes: new { id = "AC", @class = "form-control" })
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;div class="form-horizontal"&gt;
    &lt;div class="form-group"&gt;
        @Html.Label("Choose Month:", htmlAttributes: new { @class = "control-label col-md-2" })
        &lt;div class="col-md-10"&gt;
            @Html.DropDownList("Months", null, "-- Select Month --", htmlAttributes: new { id = "Month", @class = "form-control" })
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="form-horizontal"&gt;
    &lt;div class="form-group"&gt;
        @Html.Label("Year:", htmlAttributes: new { @class = "control-label col-md-2" })
        &lt;div class="col-md-10"&gt;
            @Html.DropDownList("Years", null, "-- Select Year --", htmlAttributes: new { id = "Year", @class = "form-control" })
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;br /&gt;

&lt;input type="submit" id="SendToController" class="btn btn-primary" value="Generate" /&gt;
}


&lt;script type="text/javascript"&gt;
    $('#SendToController').on('click', function() {
        sendToController();
        return false;
    });
    function sendToController(){
        var selectedAC = $('#AC').val();
        var selectedMonth = $('#Month').val();
        var chosenYear = $('#Year').val();
        $.ajax({
            url: @Url.Action("Generate", "MonthReports", null),
            data: { 'id' : selectedAC, 'monthValue' : selectedMonth, 'year' : chosenYear },
            type: 'GET',
            cache: false,
            success: function(data){},


        });
    }


&lt;/script&gt;
</code></pre>

<p>Error Message:</p>

<p><a href="https://i.stack.imgur.com/xR1aB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xR1aB.jpg" alt="enter image description here"></a></p>

<p>Here is where the red squiggly lines are happenning when I receive the error message:</p>

<p><a href="https://i.stack.imgur.com/VCAVt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VCAVt.jpg" alt="enter image description here"></a></p>