如何根据MVC4中的选定日期显示数据?

时间:2016-04-01 09:10:42

标签: jquery html json ajax asp.net-mvc-4

您好我想返回一个列表来使用json查看。我将用例子解释我的问题。 在我看来,我有2个字段FromDate,ToDate和一个按钮。如果我选择FromDate,ToDate并单击按钮意味着它想在相同的视图中显示基于日期选择的数据

示例输出

Example Op

MyView

我想使输出与上面示例输出中提到的相同。也就是说,如果我选择From Date和To Date并单击搜索按钮,它将根据From Date和ToDate选项显示(View_Visitorsform)中的特定字段。特定字段表示我希望在视图中显示的某个字段。

我的视图模型

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; }

我的控制器

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

在这里,我获得了From Date和To Date Value,并根据FromDate和ToDate Criteria使用查询列出数据。现在我的问题我不知道如何从Controller

返回这些数据列表

我的观点

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

我的j查询代码

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

请任何人告诉我解决此问题的解决方案。我尽力解释我的问题。请任何人理解并给我解决方案..

0 个答案:

没有答案