How to display data based on Selected date in MVC4?

Question

Hi   I want to return a list to view using json. 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

 

                       

 

I want same as like which is mentioned in the above image . That is if i select the From Date and To Date and Click the search button it  want to display the fields based on selection.

 

 My View Model

 

 

public string EmployeeName { get; set; }
public string CustomerName { get; set; } 

public string POVisit { get; set; }

public string ContactPerson { get; set; } 

public Nullable<System.DateTime> NextAppointmnet { get; set; }
public string Description { get; set; }
public DateTime FromDate { get; set; }
public DateTime ToDate { get; set; }

 

 

My Controller

 

public ActionResult DailyVisitReport()
{
return View();
}

public JsonResult GetDatesfromFromDateToDate(string fromdate, string Todate,VisitorsViewModel vvm)
{
DateTime fromdt = Convert.ToDateTime(fromdate);
DateTime todt = Convert.ToDateTime(Todate);

List<View_VisitorsForm> VisitEntry = (from v in db.View_VisitorsForm where v.VisitingDate <= fromdt && v.VisitingDate >=todt select v).ToList();

 

return Json(VisitEntry,JsonRequestBehavior.AllowGet);

}

 

Here i got the From Date and To Date Value and list the data using query as per FromDate and ToDate Criteria . Now my issue i donno how to return  these list of data to view from Controller 

 

 

My 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" />

 

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>

<script type="text/javascript">

$(document).ready(function () {
$("#Button1").click(function () {
debugger;
var cardetails = { fromdate: $("#FromDate").val(), Todate: $("#ToDate").val() };
$.ajax(

'@Url.Action("GetDatesfromFromDateToDate", "Report")', {
type: "POST",
data: JSON.stringify(cardetails),
dataType: "json",
contentType: "application/json",
error: function (ex) {
alert('Failed to retrieve states.' + ex);
},
beforeSend: function () {
},
success: function (data) {
}
});
});
});


</script>

 

 

Please any one tell me the solution to resolve this issue . I tried my level best to explain my issue .please any one understand and give me the solution..

 

Advance Thanks..