How to pass date value to controller? asp.net mvc

Question

This is the html coding and the javascript code. I'am trying to pass date value to controller but had no idea how to do it since im still new to c# and asp.net. i need some help and examples for me to do it

here is the example of li list i need to pass data to controller.

http://cssdeck.com/labs/li7ltd8g

                        function getDates(daterangetype) {
                            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                            var dates = {};
                            var today = new Date();

                            if (daterangetype === 'today') {
                                dates.todate = null;
                                dates.fromdate = today.getDate() + ' ' + months[today.getMonth()] + ' ' + today.getFullYear();

                                return dates;
                            }

                            if (daterangetype === 'yesterday') {
                                var fromdate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
                                dates.todate = null;

                                dates.fromdate = fromdate.getDate() + ' ' + months[fromdate.getMonth()] + ' ' + fromdate.getFullYear();

                                return dates;
                            }

                            if (daterangetype === 'last7Days') {
                                var todate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
                                var fromdate = new Date(todate.getFullYear(), todate.getMonth(), todate.getDate() - 6);

                                dates.todate = todate.getDate() + ' ' + months[todate.getMonth()] + ' ' + todate.getFullYear();
                                dates.fromdate = fromdate.getDate() + ' ' + months[fromdate.getMonth()] + ' ' + fromdate.getFullYear();

                                return dates;
                            }

                            if (daterangetype === 'last14Days') {
                                var todate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
                                var fromdate = new Date(todate.getFullYear(), todate.getMonth(), todate.getDate() - 13);

                                dates.todate = todate.getDate() + ' ' + months[todate.getMonth()] + ' ' + todate.getFullYear();
                                dates.fromdate = fromdate.getDate() + ' ' + months[fromdate.getMonth()] + ' ' + fromdate.getFullYear();

                                return dates;
                            }

                            if (daterangetype === 'last30Days') {
                                var todate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
                                var fromdate = new Date(todate.getFullYear(), todate.getMonth(), todate.getDate() - 29);

                                dates.todate = todate.getDate() + ' ' + months[todate.getMonth()] + ' ' + todate.getFullYear();
                                dates.fromdate = fromdate.getDate() + ' ' + months[fromdate.getMonth()] + ' ' + fromdate.getFullYear();

                                return dates;
                            }

                            if (daterangetype === 'allTime') {
                                var fromdate = new Date(2012, 0, 1);

                                dates.todate = today.getDate() + ' ' + months[today.getMonth()] + ' ' + today.getFullYear();
                                dates.fromdate = fromdate.getDate() + ' ' + months[fromdate.getMonth()] + ' ' + fromdate.getFullYear();

                                return dates;
                            }

                            if (daterangetype === 'thisMonth') {
                                var fromdate = new Date(today.getFullYear(), today.getMonth(), 1);

                                dates.todate = today.getDate() + ' ' + months[today.getMonth()] + ' ' + today.getFullYear();
                                dates.fromdate = fromdate.getDate() + ' ' + months[fromdate.getMonth()] + ' ' + fromdate.getFullYear();

                                return dates;
                            }

                            if (daterangetype === 'lastMonth') {
                                var fromdate = new Date(today.getFullYear(), today.getMonth() - 1, 1);

                                var temp = new Date(today.getFullYear(), today.getMonth(), 1);
                                var todate = new Date(temp.getFullYear(), temp.getMonth(), temp.getDate() - 1);

                                dates.todate = todate.getDate() + ' ' + months[todate.getMonth()] + ' ' + todate.getFullYear();
                                dates.fromdate = fromdate.getDate() + ' ' + months[fromdate.getMonth()] + ' ' + fromdate.getFullYear();

                                return dates;
                            }

                            if (daterangetype === 'thisWeek') {
                                if (today.getDay() == 0) {
                                    var temp = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6);
                                } else {
                                    var temp = new Date(today.getFullYear(), today.getMonth(), today.getDate() - today.getDay() + 1);
                                }

                                dates.fromdate = temp.getDate() + ' ' + months[temp.getMonth()] + ' ' + temp.getFullYear();
                                dates.todate = today.getDate() + ' ' + months[today.getMonth()] + ' ' + today.getFullYear();

                                return dates;
                            }


                            if (daterangetype === 'lastWeek') {
                                if (today.getDay() == 0) {
                                    var temp1 = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
                                } else {
                                    var temp1 = new Date(today.getFullYear(), today.getMonth(), today.getDate() - today.getDay());
                                }

                                var temp2 = new Date(temp1.getFullYear(), temp1.getMonth(), temp1.getDate() - 6);

                                dates.fromdate = temp2.getDate() + ' ' + months[temp2.getMonth()] + ' ' + temp2.getFullYear();
                                dates.todate = temp1.getDate() + ' ' + months[temp1.getMonth()] + ' ' + temp1.getFullYear();

                                return dates;
                            }
                            if (daterangetype === 'custom') {
                                var temp1 = $("#todate").datepicker('getDate');
                                var temp2 = $("#fromdate").datepicker('getDate');

                                dates.fromdate = temp2.getDate() + ' ' + months[temp2.getMonth()] + ' ' + temp2.getFullYear();
                                dates.todate = temp1.getDate() + ' ' + months[temp1.getMonth()] + ' ' + temp1.getFullYear();

                                return dates;
                            }
                        }

How to pass the date parameter to controller? i really had no idea. might need help though.

 <div style="float:right; margin-right:200px; width:60px;margin-top:0px; z-index:100; padding-bottom:2px;">
                               <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                               <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
                               <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
                           <body>
                               <div id="datebox" class="wrapper-dropdown" tabindex="1">
                                   <div id="select-container">
                                       <span class="daterangetype">Custom</span>
                                       <span class="daterange">            
                                               <span class="fromdate">
                                                   25 Apr 2015
                                               </span>                                                                                         
                                           </span>
                                           <span class="todate">
                                               - 28 Apr 2015
                                           </span>
                                   </div>
                                   <ul class="dropdown">
                                       <li data-daterangetype="custom" id="custom">
                                           <a href="#">Custom</a>
                                           <span class="datepicker-wrapper">
                                               <input type="text" id="fromdate" class="datepicker" /> -
                                               <input type="text" id="todate" class="datepicker" />
                                           </span>
                                       </li>
                                       <li data-daterangetype="today" selected="selected"><a href="#">Today</a></li>
                                       <li data-daterangetype="yesterday"><a href="#">Yesterday</a></li>
                                       <li data-daterangetype="thisWeek"><a href="#">This Week</a></li>
                                       <li data-daterangetype="last7Days"><a href="#">Last 7 Days</a></li>
                                       <li data-daterangetype="lastWeek"><a href="#">Last Week</a></li>
                                       <li data-daterangetype="thisMonth"><a href="#">This Month</a></li>
                                       <li data-daterangetype="last30Days"><a href="#">Last 30 Days</a></li>
                                       <li data-daterangetype="lastMonth"><a href="#">Last Month</a></li>
                                       <li data-daterangetype="allTime"><a href="#">All Time</a></li>
                                       <li><button class="button" id="apply">Apply</button></li>
                                   </ul>
                               </div>
                           </body>
                           </div>

You can use ajax to do that, for instance with the helping of jQuery — Agung Setiawan, Apr 30 '15 at 09:45

score 4 · Answer 1 · answered Apr 30 '15 at 09:46

Using the JavaScript Methode .toUTCString()

An Controller Example:

public ActionResult GetMyTime(DateTime myTime)
{
    return View();
}

An View Example:

$.post('/myController/GetMyTime', { myTime: myJSTimeVar.toUTCString()
}, function (result) {
    callback(result); 
});

score 0 · Answer 2 · edited May 23 '17 at 12:06

You can use jquery-ajax function. By creating a funcion in javascript call action method via ajax and also send the parameter which get the action method.

Here is sample code.

function AjaxCall(localdatevariable) {
    $.ajax({
        url: '@Url.Action("HomeController","test")',
        data: {dateparm: localdatevariable},
        type: 'POST',
        success: function(data) {
            process(data);
        }
    });
}

And in contoller create a method to get this request.

[HttpPost]
public ActionResult test(string dateparm)
{
    return Content("It works");
}

I think you learn the Jquery/javascript to work on MVC too.

http://www.codeproject.com/Articles/41828/JQuery-AJAX-with-ASP-NET-MVC

Make an AJAX request using $.ajax in MVC 4

Making a Simple Ajax call to controller in asp.net mvc

How to pass date value to controller? asp.net mvc

2 Answers2