Refresh page upon datepicker info changed

Question

I have this problem refreshing my page when I change dates on two datepickers, like here.

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

Model:

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

The objective is to post the StartDate and EndDate and then refresh the page considering those values, with the Model updated.

This is the only current controller method:

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

I chose to use the EditorFor so I can show a date time picker on the screen. Now I want to update my page with the new Model.StartDate and Model.EndDate whenever one of those fields are changed. Any ideas? I have good experience with Desktop applications. But web is unchartered area.

Edit: Ok. I think this jquery code might help me:

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

It actually calls the UpdateFilters method, but I still cannot make it to refresh the page:

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

What do you mean _"update my page"_? Do you mean if you change the `StartDate` to want to change the `EndDate` (e.g. so the `EndDate` is not less than the `StartDate`)? — , Mar 17 '15 at 23:20
No. I will update it to be clearer. I want it to POST the start and end date, and refresh the page taking those info in account. — Alexandre Severino, Mar 17 '15 at 23:21
So what is the problem your having? What are your controller methods? — , Mar 17 '15 at 23:22
Not really clear what your trying to do here. You view does not have a form or a submit button to submit the form and your controller does not have a method to post to and the GET method does not accept any parameters. Are you wanting to update the view to show a new collection of `MczirCase` and `MczirCaseQt` based on the selected dates? — , Mar 18 '15 at 00:06
Yes. It does not have a post method because I don't have any idea of how to do it. And I read here: http://www.codeproject.com/Articles/426765/post-and-get-in-MVC-Razor-JQuery that I don't really need an HTML "submit" or anything like that. — Alexandre Severino, Mar 18 '15 at 00:07
Your best option is ajax (you don't really need a form unless you want client side validation), but you need a method that accepts the parameters you want to post. Then return a partial view containing your filtered list and update the DOM. — , Mar 18 '15 at 00:10
My ajax works, but I still can't refresh the view using new start and end dates. — Alexandre Severino, Mar 18 '15 at 16:48
This [answer](http://stackoverflow.com/a/19410973/2030565) is pretty close to what you are trying to do here. Your attempt is close but you do not reference the server response in your success handlers. — Jasen, Mar 18 '15 at 17:22

score 1 · Accepted Answer · answered Mar 18 '15 at 21:39

I solved it by passing the right parameters on the script. Also, I changed my important stuff to a partial view.

The script ended up looking like this:

<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

1 Answers1