Calling MVC view from jQuery Datepicker()

Question

How do I call/refresh a view from a jQuery Datepicker() setup in a layout view?

I have a Datepicker setup in my layout view as follows:

<header>
        <div class="float-left" id="CalenderView">
            <span class="datepicker">Date:
                <input type="text" id="datepicker" size="10"></span>
        </div>
</header>

Script in footer ....

    <script>
        $(function () {
            $("#datepicker").datepicker({
                dateFormat: 'mm-dd-yy',
                onSelect: function () {
                    var date = $("#datepicker").datepicker('getDate');
                    $.ajax({
                        type: 'POST',
                       data: { "date": date },
                        url: '/Home/Calender',
                        dataType: 'json',
                        success: function (response) {},
                        error: function (data) { }
                    });
                }
            });
        });
    </script>

In my HomeController ...

    public ActionResult Calender(String date)
    {
        var rev = new DashboardRevenue();
        rev.PPMRevenue = 1500;
        rev.ProductRev = 1000;
        if (Request.IsAjaxRequest())
        {
            return View("Dashboard",rev);
        }
        else
        {
            return View();
        }
    }

The return View statement in the controller is ignored. The original view is always rendered.

Andy T · Accepted Answer · 2014-04-15 15:29:11Z

1

The Request.IsAjaxRequest() looks at the "X-Requested-With" header and checks to see if the value is "XMLHttpRequest".

request.Headers["X-Requested-With"] == "XMLHttpRequest"

If it is not going into this if-statement, then the header value is most likely not being included. Using the developer tools in your browser or Fiddler, check what headers are being passed in.

Source for IsAjaxRequest.

answered Apr 15, 2014 at 15:29

Andy T

9,9315 gold badges56 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kenmeister Over a year ago

If I set a break on return View("Dashboard", rev); in the controller, it hits it. So the Request.IsAjaxRequest() is working. The return View(...) however, has no effect on what is displayed.

Andy T Over a year ago

In the success portion of your ajax callback, you are not doing anything with the response. You should have something like: function (response) { $('#myDashboard').html(response); }

Kenmeister Over a year ago

Thanks. But really I want to render the view in the controller with the view using the updated model. I just don't see how to do that in the function (response) {...}, I tried success: function (response) { $('/Home/Calendar').html(response); }. Maybe I should look at a different approach altogether.

Andy T Over a year ago

Your approach is correct. The action method would render the view and return it. In my example $('#myDashboard'), I am setting the HTML of a div with ID of myDashboard. In your example, you are using $('/Home/Calendar'), which is not correct. You'll need to use jQuery to find the element that is on your page where you want to place the returned HTML. /Home/Calendar is not correct.

Kenmeister Over a year ago

But I don't have a div to direct to - I have a MVC view I want to render - a different page altogether from where the datepicker is (the layout view). Thanks again for your replies.

|

Collectives™ on Stack Overflow

Calling MVC view from jQuery Datepicker()

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related