Question

I’ve created a working MVC page which brings back a set of data that displays a specific report (top customers by amount spent). I’m trying to add two jQuery datepicker textboxes that will allow users to bound that report by a start and end date. It’s currently working, in that I have an HTML anchor tag with a jQuery click event bound to it, that kicks off a handler. The handler tosses the start/end date to an HttpPost ActionResult method in my controller, and it gets the updated data set.

The problem is when I try to return the data to the view (rather than returning Content(“true”)), no data is returned, and the handler gives me my OnFailure message. Is it possible to pass data to the view this way, or do I need to re-write it with a using Html.BeginForm type of approach?

Thanks so much!

Here’s the code:
(in my view)

<script type="text/javascript">
$(document).ready(function () {
    $(".datepicker").datepicker();

    $('#submit').click(function () {
        SetDateHandler($('#startdate').val(), $('#enddate').val(), "company");
    });

    function SetDateHandler(bounddate1, bounddate2, datetype) {
        $.ajax({
            //url: '/Projects/TestArray',
            url: '@Url.RouteUrl("SetBoundingDate")',
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: OnComplete,
            data: JSON.stringify({ startdate: bounddate1, enddate:bounddate2, type: datetype }),
            traditional: true,
            type: "POST",
            error: OnFail
        });

        return false;
    }
    function OnComplete(result) {
        //indow.location.href = window.location.href;
        alert("yay!");
        return true;
    }
    function OnFail(result) {
        alert('Request Failed');
        return false;
    }

});
</script>

<h2>Top Companies by Total Price for Won Quotes</h2>

<div style="float:right; width: 350px; margin: 15px;">
    <span style="float:right; margin-right: 50px;">Start Date: <input class="datepicker" id="startdate" /></span>
    <br />
    <span style="float:right; margin-right: 50px;">End Date: <input class="datepicker" id="enddate" /></span>
    <br />
    <a href="#" id="submit">Submit</a>
</div>

Custom route:
routes.MapRoute(
name: “SetBoundingDate”,
url: “AjaxSetBoundingDate”,
defaults: new { controller = “Reports”, action = “SetBoundingDates” }
);

In my Reports controller:

[HttpPost]
public ActionResult SetBoundingDates(String startdate, String enddate, String type)
{
    Schedule.Models.Reports.TopCompaniesModel Companies = new Models.Reports.TopCompaniesModel();

    ActionResult view;

    if (type == "company")
    {
        view = TopCompaniesReport(startdate, enddate);
    }
    else
    {
        view = TopContactsReport(startdate, enddate);
    }
    //return View(view);
    return Content("true");
}

Again, if you’ve read this far, I get to the bottom of my Controller method with view filled correctly, but when I try to return View, it errors, and if I return Content(“true”), it works but nothing changes on the page.

Thanks!

Answer 1

Thanks again flem for trying to help. My approach was wrong, I eventually found I needed to switch to the razor postback method. It actually was a lot easier this way as well.

Here’s the way I did it:

    <div style="float:right; width: 550px; margin: 15px;">
        @using (Html.BeginForm(ViewContext.RouteData.GetRequiredString("action"), "Reports", FormMethod.Post, new { id = "TheForm" }))
        {
             <span style="float:right;">

                    <div style="margin-right: 50px;float:right;">Start Date: <input class="datepicker" name="startdate" id="startdate" /></div>
                    <div style="margin-right: 50px;float:right; margin-top: 5px; clear: both;">End Date: <input class="datepicker" name="enddate" id="enddate" /></div>

                    <input id="submit" name="submit" type="submit" value="Update" style="margin-top: 10px; clear: both;float:right;" />

             </span>
             <span style="float: left;">
                @Html.DropDownList("DateDdl", (SelectList)ViewBag.DateDropDown)
             </span>           

        }
    </div>

I actually like this way much better, because as you can see I’m passing it the current controller name to be posted back. This way, I put this functionality into a shared partial view, which I can reuse on any view within the reports area.

Hope this helps someone else!