How to display data based on Selected date in MVC4?

Sneha K

10y2.2k.NET

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 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 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" })

My j query code

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..

9 Replies

Know the answer? Post it — somebody with the same question will find it here.

Bharath Peggem10y ago
Sneha, please try to understand the code. please look into that. am passing String parameters your passing datatime parameters.

Don't worry we will workout.
Do one thing remove $(document).ready function code it will work

Thanks,
Bharath Peggem
Sneha K10y ago
Bharath i tried as per which is mentioned in the project and check by inspect the element by debugger . it coming upto $.ajax( and directly coming to close bracket and showing fail operation . i checked the error in network. it showing some error the error is mentioned below.

The parameters dictionary contains a null entry for parameter 'toDate' of non-nullable type 'System.DateTime' for method 'System.Web.Mvc.ActionResult GetDatesfromFromDateToDate(System.DateTime, System.DateTime)' in 'Sample_Customer.Controllers.ReportController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Parameter name: parameters

My j query code

$('#Button1').click(function () {
alert("hhh");
$.ajax(
'@Url.Action("GetDatesfromFromDateToDate", "Report")', {
type: "GET",
dataType: "json",
async: false,
data: {
fromDate: $("#FromDate").val(), toDate: $("#ToDate").val()
},
error: function (ex) {
alert('Failed to retrieve Email.' + ex);
},
beforeSend: function () {
},
success: function (data) {

var div = $("#visitors");
div.empty();
div.html(data);
}
});
});

Now what to do??
Sneha K10y ago
ok bharath lets i have a try
Bharath Peggem10y ago
Sneha,
Please check test file, download and use the code it will work

Thanks,
Bharath Peggem
Sneha K10y ago
Bharath i wrote same as like which you mention but it showing error

@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" })

if i select the from date and todate and click the button it is not working it showing error the error which is mentioned in the below image. please have a check
Sneha K10y ago
ok i have a try Bharath . if i get any issue means i will tell you again
Bharath Peggem10y ago
Hi Sneha,

Try this code it will work.

In main View :

@model Sample_Customer.Models.VisitorsViewModel
....
@Html.LabelFor(m => m.FromDate)
@Html.TextBoxFor(m => m.FromDate, new { @class = "form-control datepicker"}) // its already type="text"
@Html.LabelFor(m => m.ToDate)
@Html.TextBoxFor(m => m.ToDate, new { @class = "form-control datepicker"})

JQuery:

$.ajax({
      url: '@Url.Action("_GeneralDetails", "Home")',
      method: 'GET',
      contentType: 'application/json; charset=utf-8',
      data: { fromDate: $("#FromDate").val(), toDate: $("#ToDate").val() },
      success: function (data) {
               var div = $("#partialrequestData");
               div.empty();
             div.html(data);
      }
});

Thanks,
Bharath Peggem

Sneha K10y ago

Yes Bharath Peggem i used partial view only but but j query code is not working can you find that mistake.

My Controller

public ActionResult DailyVisitReport()

{

return View();

}

public PartialViewResult GetDatesfromFromDateToDate(DateTime fromDate, DateTime toDate)

{

List model = (from v in db.View_VisitorsForm

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

select v).ToList();

return PartialView("_Visitors", model);

}

My Main view

@model Sample_Customer.Models.VisitorsViewModel

....

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

@Html.TextBoxFor(m => m.FromDate, new { @class = "form-control datepicker"}) // its already type="text"

@Html.LabelFor(m => m.ToDate)

@Html.TextBoxFor(m => m.ToDate, new { @class = "form-control datepicker"})

.... // all table headings

My j - query coding

the j query code which is in bold is not working it wont going to controller. can any one check this code

Bharath Peggem10y ago

Hi Sneha,

i suggest you to keep the display data in Partial view, when you click button just call the display data partial view. this is the good thing and easy to display.

Thanks,

Bharath Peggem