日期选择器信息更改后刷新页面

Question

当我在两个日期选择器上更改日期时，我在刷新页面时遇到了这个问题，就像这里一样。

@model AtcWebReports.Controllers.MczirCasesModel
<h2>Case Entries</h2>
<div id="dates">
    <label id="StartDate" style="width: 200px">Start Date: @Html.EditorFor(model => model.StartDate)</label>
    <label id="EndDate" style="width: 200px">End Date: @Html.EditorFor(model => model.EndDate)</label>
    <label id="showDone" style="width: 200px">Show Done: @Html.CheckBoxFor(model => model.ShowDone)</label>
</div>

型号：

public class MczirCasesModel
{
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime? StartDate { get; set; }

    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime? EndDate { get; set; }

    public bool ShowDone { get; set; }

    public List<MczirCase> CasesAddedToday;
    public List<MczirCaseQt> ProductsQty;
}

objective 是 post StartDate 和 EndDate 然后根据这些值刷新页面，更新 Model。

这是当前唯一的控制器方法：

public ViewResult MczirCasesResult(DateTime start, DateTime end)
    {
        MczirCasesModel model = new MczirCasesModel();

        model.StartDate = start;
        model.EndDate = end;

        var tmpCases = (from cs in db.View_ATC_MczirIn
                        //where cs.InDate >= StartDate
                        select cs).ToList();

        var cases = from cs in tmpCases
                    group cs by new { cs.CaseNumber, cs.PanNumber, cs.DueDate, cs.DaysUntilDue, cs.ShipDate, cs.DaysUntilShip, cs.IsRushCase } into g
                    select new MczirCase {
                        CaseNumber = g.Key.CaseNumber,

                        Products = String.Join(", ", g.Select(i => i.ProductID).Distinct().Select(b => b +
                            " (" + g.Where(c => c.ProductID == b).Sum(d => d.Quantity) + ")")), // idk... works tho

                        Quantity = g.Sum(c => c.Quantity),
                        PanNumber = g.Key.PanNumber,
                        DueDate = g.Key.DueDate,
                        DaysUntilDue = g.Key.DaysUntilDue,
                        ShipDate = g.Key.ShipDate,
                        DaysUntilShip = g.Key.DaysUntilShip,
                        IsRushCase = g.Key.IsRushCase,
                    };

        var productQuantities = from cs in tmpCases
                                group cs by cs.ProductID into g
                                select new MczirCaseQt
                                {
                                    ProductID = g.Key,
                                    Qt = g.Sum(a => a.Quantity)
                                };

        model.CasesAddedToday = cases.ToList();
        model.ProductsQty = productQuantities.ToList();

        return View("MczirCases", model);//, cases.ToList());
    }

我选择使用 EditorFor，这样我就可以在屏幕上显示日期时间选择器。现在我想在其中一个字段发生更改时使用新的 Model.StartDate 和 Model.EndDate 更新我的页面。有任何想法吗？我对桌面应用程序有很好的经验。但网络是未知领域。

编辑：好的。我认为这个 jquery 代码可能对我有帮助：

<script type="text/javascript">
$(document).change(function () {
    var selectedStart = new Date($('#StartDate').val()).toJSON();
    var selectedEnd = new Date($('#EndDate').val()).toJSON();

    $.ajax({
        type: "POST",
        url: "/Mczir/UpdateFilters",
        data: { dateStart: selectedStart, dateEnd: selectedEnd },
        success: function () {
            //alert('success');
        },
        error: function (err, result) {
            //alert("not working");
        }
    });
});

它实际上调用了UpdateFilters方法，但我仍然无法刷新页面：

[HttpPost]
    public ActionResult UpdateFilters(string dateStart, string dateEnd)
    {
        DateTime start = DateTime.ParseExact(dateStart.Substring(0,10), "yyyy-MM-dd", CultureInfo.InvariantCulture);
        DateTime end = DateTime.ParseExact(dateEnd.Substring(0, 10), "yyyy-MM-dd", CultureInfo.InvariantCulture);
        return MczirCasesResult(start, end);
    }

Answer 1

我通过在脚本上传递正确的参数解决了这个问题。另外，我将我的重要内容更改为部分视图。

脚本最终看起来像这样：

<script type="text/javascript">
    $(document).change(function () {
        var selectedStart = new Date($('#StartDate').val()).toJSON();
        var selectedEnd = new Date($('#EndDate').val()).toJSON();
        var selectedShow = $('#ShowDone').is(":checked");

        $("#casesDiv").load('@Url.Action("UpdateFilters", "Mczir", null)', { dateStart: selectedStart, dateEnd: selectedEnd, done: selectedShow }, function (data) {});
    });
</script>

日期选择器信息更改后刷新页面

Refresh page upon datepicker info changed

asp.net

asp.net-mvc

jquery

razor