Passing Date from View to Controller.

[Lavakesh]

The problem is I'm not able to pass the date selected by user from Kendo Date time picker in View to Controller using ajax call. Any help or input would be much appreciated. When I put the debugger, I found that control is just passing over it but not hitting the  Action method in the Home controller.

 

View

===================================================================================================================

<div class="chart-wrapper">
    @(Html.Kendo().Chart()
        .Name("chart")
        .Title("Power Output")
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
        .ChartArea(chartArea => chartArea
            .Background("transparent")
        )
        .SeriesDefaults(seriesDefaults =>
            seriesDefaults.Area().Line(line => line.Style(ChartAreaStyle.Smooth))
        )
        .Series(series =>
        {
            series.Area(ViewBag.Value).Name("Power");
        })
        .CategoryAxis(axis => axis
            .Date()
            .Categories(ViewBag.TimeStamp)
        )
        .ValueAxis(axis => axis
            .Numeric()
            .Labels(labels => labels.Format("{0}"))
            .AxisCrossingValue(-10)
            .Line(line => line.Visible(false))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}%")
            .Template("#= series.name #: #= value #")
        )
    )
    </div>
<div>
    <h4>Select Date</h4>
    <input id="datepicker"/>
    <script>
        $(document).ready(function() {
            function onChange() {
                debugger;
                var date = kendo.toString(this.value());
                $.post('/Home/Index', { "date": date }, function () {
                    alert("data is posted successfully");
                    window.location.reload(true);
                });
                //this.close();
            }
            $("#datepicker").kendoDatePicker({
                open: onChange,
                value: new Date()
            });

        })
    </script>
</div>

=========================================================================================================================

Controller

=========================================================================================================================

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using SparklineChart.Models;
using System.Net.Security;
using System.Security.Cryptography.X509Certificates;
using Newtonsoft.Json.Linq;

namespace SparklineChart.Controllers
{
    public class HomeController : Controller
    {
        private static Class1[] _download_serialized_json_data<ActualPower>(string url) where ActualPower : new()
        {
            //This is to temporarily to disable the SSL Certificate check.
            ServicePointManager.ServerCertificateValidationCallback = delegate (object s, X509Certificate certificate, X509Chain chain, SslPolicyErrors sslPolicyErrors)
            { return true; };

            using (var w = new WebClient())
            {
                var json_data = string.Empty;
                try 
                {
                    json_data = w.DownloadString(url);
                }
                catch (Exception ) { }
                return !string.IsNullOrEmpty(json_data) ? JsonConvert.DeserializeObject<Class1[]>(json_data) : new Class1[] { };

            }
        }

        [HttpGet]
        public ActionResult Index()
        {

            var url = "https://raise.tra.trafficmanager.net/apiv1/abb/raise/rest/measured/9fcecb42-7dfc-407e-bf31-a447f0650447/Actual%20Power";
            var actualPower = _download_serialized_json_data<ActualPower>(url);
            Dictionary<DateTime, decimal> power = new Dictionary<DateTime, decimal>();
            List<decimal> value = new List<decimal>();
            List<DateTime> timeStamp = new List<DateTime>();
            foreach (var item in actualPower)
            {
                power.Add(Convert.ToDateTime(item.timeStamp.localTimeStamp), Convert.ToDecimal(item.deviceData.value));
                value.Add(Convert.ToDecimal(item.deviceData.value));
                timeStamp.Add(Convert.ToDateTime(item.timeStamp.localTimeStamp));
            }
            ViewBag.Power = power;
            ViewBag.Value = value;
            ViewBag.TimeStamp = timeStamp;
            return View();
        }
        

        [HttpPost]
        public String Index(DateTime date)
        {
            if (date != null)
            return "Success";
            return "Failure";
            //return Content(Convert.ToString(date));
        }

        public ActionResult About()
        {
            return View();
        }


    }
}

[Georgi Krustev]

Hello Lavakesh,

As the ticket is related to DatePicker widget, I will update the forum product section.

With regards to the question, I would suggest you the following StackOverflow topic that discusses how to send JavaScript Date object to the server:

• http://stackoverflow.com/questions/3933245/asp-net-mvc-passing-json-datetime-to-controller-not-mapping-to-controller-para

Please note that this question is not related to UI for ASP.NET MVC by any means, but rather is general ASP.NET MVC knowledge.

Regards,
Georgi Krustev
Telerik