将日期时间传递给控制器答案

【问题标题】：Pass DateTime to Controller将日期时间传递给控制器
【发布时间】：2016-02-17 20:54:49
【问题描述】：

我想传递在控制器的 datetimepicker 中选择的 DateTime。

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<div class="container">
<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker();
        });
    </script>
</div>
</div>

控制器：

public class HomeController : Controller
{
    //
    // GET: /Home/

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

    public ActionResult GetData(DateTime dateTime)
    {
        return View();
    }
}

最好的方法是什么？使用阿贾克斯？怎么做才对？

 $.ajax({
    url: "/Home/GetData",
    type: "POST",
    dataType: "json",
    data: JSON.stringify(????),
    contentType: "application/json; charset=utf-8",
    success: function (result) { }, 
    failure: function (r, e, s) { alert(e); } 
 });

【问题讨论】：

你想什么时候发送数据？
当 span 关闭时，在控制器中发送日期时间可能会更好。

标签： jquery ajax twitter-bootstrap asp.net-mvc-4 bootstrap-datetimepicker

【解决方案1】：

我不喜欢你将所有这些 JS 和 CSS 放在页面上的方式。无论如何这应该可以。

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $('#datetimepicker1').datetimepicker({useCurrent: false});
            $('#datetimepicker1').on("dp.change",function(e){
                $.ajax({
                    url: "/Home/GetData",
                    type: "POST",
                    data: {nameOfVar: $('#datetimepicker1').data('DateTimePicker').date().format('YYYY-MM-DD HH:mm')},
                    contentType: "application/json",
                    success: function(result){ alert('Done') }, 
                    error: function(r,e,s){ alert(e) } 
                });
            });
        </script>
    </div>
</div>

【讨论】：

我得到“加载资源失败：服务器响应状态为 500（内部服务器错误）”。
您期望哪种类型的变量？确定 json？
public ActionResult GetData(string dateTime) get's null。我期待 DateTime 或可以描述日期的东西。
...data('DateTimePicker').date() 返回一个对象。我现在在控制台上看到了，请尝试使用：data: {yourVarName: JSON.stringify($('#datetimepicker1').data('DateTimePicker').date())},
是的！有用！但是控制器获取的对象我如何从对象中获取日期时间？

【解决方案2】：

您基本上可以在输入字段上监听change 事件并发送它的值。您实际上不需要对其进行字符串化，因为它是您发送的简单值。

$(function(){

  $("#datetimepicker1").change(function(){
     var v = $(this).val();
     if(v.length>0)
     {
          var url = "@Url.Action("GetData","Home")" +"? dateTime="+v;
          $.get(url, function(re) {
              //do something with the re
              console.log(re);
          });
     }

  });


});

我使用Url.Action 方法生成正确的相对url 到action 方法。如果您的 js 代码位于 razor 视图中，则此代码将起作用。如果你的代码在外部js文件中，请使用this post中解释的方法。

【讨论】：

【解决方案3】：

我只做了这个，它对我有用

$('.date').datepicker({ dateFormat: "YYYY-MM-DD HH:mm" });

【讨论】：