j -query is not working correctly?

Question

Hi my j query code is not working correctly.  I will explain my issue with eg.I have 2 fields FromDate ,ToDate and one button in my view. if i select the FromDate ,ToDate and click the button means it want to diaplay the data in the same view based Date Selection

 

Example Output

 

 

My Main View

                           

This is my main view if i select the From date and todate and click the ok button it have to list the data in the same view under From and to date the list of data is mentioned in the below image

 

 

 

I want to bring the output same as like which is mentioned in the above Example output. That is if i select the From Date and To Date and Click the ok button it need to display the particular fields from( View_Visitorsform)based on From Date and ToDate selection. This is my task . so i used partial view to get the list  of data .

 

 My controller Code 

 

public ActionResult DailyVisitReport()

{

return View();

}

public PartialViewResult GetDatesfromFromDateToDate(DateTime fromDate, DateTime toDate)

{

List<View_VisitorsForm> model = (from v in db.View_VisitorsForm

where v.VisitingDate >= fromDate && v.VisitingDate <= toDate

select v).ToList();

return PartialView("_Visitors", model);

}

 

My Main View

 

@Html.LabelFor(model => model.FromDate)

@Html.TextBoxFor(model => model.FromDate, new { @class = "form-control", type = "text" })

 

@Html.LabelFor(model => model.ToDate)
@Html.TextBoxFor(model => model.ToDate, new { @class = "form-control", type = "text" })

 

<input id="Button1" type="button" value="Ok" />

 

<table class ="table table-bordered table-striped">

<thead>

<tr>

<th style="color:#1a1ae9 ">Visiting Date</th>

<th style="color: #1a1ae9">Customer Name</th>

<th style="color: #1a1ae9">Employee</th>

<th style="color: #1a1ae9">Purpose of Visit</th>

<th style="color: #1a1ae9">Contact Person</th>

<th style="color: #1a1ae9">Description</th>

<th style="color: #1a1ae9">Next Appointment</th>

</tr>

</thead>

<tbody id="visitors">

</tbody>

</table>

 

My j query code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script type="text/javascript">
$(function () {
$("#FromDate").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,


});
$("#ToDate").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,

});
});
</script>

 

var url = '@Url.Action("GetDatesfromFromDateToDate", "Report")';

var table = $('#visitors');

$("#Button1").click(function () {

var data = { fromDate: $("#FromDate").val(), toDate: $("#ToDate").val() };

$.get(url, data, function(response) {

table.html(response);

}).fail(function() {

// oops

});

});

</script>

 

 

this j query code is ot working  i inspect the code in browser  it will come upto  $.get(url, data, function(response) { but it not enter into the loop. 

the error is in below image so any one please my j query code and give me correct solution 

 

 

My partial view

 

@foreach (var item in Model)

{

<tr>

<td>@Html.DisplayFor(m => item.VisitingDate)</td>

<td>@Html.DisplayFor(m=>item.Employee)</td>

<td>@Html.DisplayFor(m=>item.CustomerName)</td>

<td>@Html.DisplayFor(m=>item.POVisit)</td>

<td>@Html.DisplayFor(m=>item.ContactPerson)</td>

<td>@Html.DisplayFor(m=>item.Description)</td>

<td>@Html.DisplayFor(m=>item.NextAppointment)</td>

</tr>

}

 

 

 

Advance thanks..