I am looking for guidance on how to pass values from my view to my controller using ajax. As someone who is new to working with ajax, I would appreciate some assistance in understanding the process.
Full Page
@model ALSummary.Models.MonthReport
@{
ViewBag.Title = "Index";
}
<h2><strong>Generate Monthly Report</strong></h2>
<br />
<hr />
@Html.BeginForm("Generate", "MonthReports", FormMethod.Post, htmlAttributes: new { id = "GenerateForm" }){
<div class="form-horizontal">
<div class="form-group">
@Html.Label("Choose AC:", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("AC", null, "-- Select AC --", htmlAttributes: new { id = "AC", @class = "form-control" })
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
@Html.Label("Choose Month:", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("Months", null, "-- Select Month --", htmlAttributes: new { id = "Month", @class = "form-control" })
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
@Html.Label("Year:", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("Years", null, "-- Select Year --", htmlAttributes: new { id = "Year", @class = "form-control" })
</div>
</div>
</div>
<br />
<input type="submit" id="SendToController" class="btn btn-primary" value="Generate" />
}
<script type="text/javascript">
$('#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){},
});
}
</script>
Error Message:
https://i.stack.imgur.com/xR1aB.jpg
The red squiggly lines appear at this position when I encounter the error message: