Jquery 将日期时间传递给控制器

我想传递在控制器的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>

最好的方法是什么？使用Ajax？ 如何纠正

 $.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); } 
 });

---

您基本上可以监听输入字段上的

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

方法生成与Action方法相对应的正确Url。如果js代码位于razor视图中，则此代码将起作用。如果您的代码位于外部js文件中，请使用中介绍的方法。

您基本上可以侦听输入字段上的

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

方法生成与Action方法相对应的正确Url。如果js代码位于razor视图中，则此代码将起作用。如果您的代码位于外部js文件中，请使用中介绍的方法。

我不喜欢您将所有这些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>

@{
ViewBag.Title=“Index”；
}
指数
$（'#datetimepicker1'）.datetimepicker（{useCurrent:false}）；
$（'#datetimepicker1'）。打开（“dp.change”，函数（e）{
$.ajax({
url:“/Home/GetData”，
类型：“POST”，
数据：{nameOfVar:$（'#datetimepicker1'）。数据（'DateTimePicker'）。日期（）。格式（'YYYY-MM-DD HH:MM'），
contentType:“应用程序/json”，
成功：函数（结果）{alert（'Done'）}，
错误：函数（r，e，s）{alert（e）}
});
});

我不喜欢你把这些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>

@{
ViewBag.Title=“Index”；
}
指数
$（'#datetimepicker1'）.datetimepicker（{useCurrent:false}）；
$（'#datetimepicker1'）。打开（“dp.change”，函数（e）{
$.ajax({
url:“/Home/GetData”，
类型：“POST”，
数据：{nameOfVar:$（'#datetimepicker1'）。数据（'DateTimePicker'）。日期（）。格式（'YYYY-MM-DD HH:MM'），
contentType:“应用程序/json”，
成功：函数（结果）{alert（'Done'）}，
错误：函数（r，e，s）{alert（e）}
});
});

我只做了这件事，它对我很有用

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

---

我只做了这件事，它对我很有用

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

---

您想何时发送数据？当span关闭时，可能最好在控制器中发送datetime。您想何时发送数据？当span关闭时，可能最好在控制器中发送datetime。我得到“加载资源失败：服务器响应状态为500（内部服务器错误）”.你期望哪种var？确定json？公共ActionResult GetData（string dateTime）get为空。我希望使用DateTime或其他可以描述日期的数据（'DateTimePicker'）。date（）返回一个对象。我现在在控制台上看到了，请尝试使用：

data:{yourVarName:JSON.stringify（$（'datetimepicker1'）.data（'DateTimePicker'）.date（））}，

Yes！它的工作！但是Controller get的对象如何从对象获取datetime？我得到“加载资源失败：服务器响应状态为500（内部服务器错误）”。您希望使用哪种类型的var？确定json？公共ActionResult GetData（string dateTime）get为空。我希望使用DateTime或其他可以描述日期的数据（'DateTimePicker'）。date（）返回一个对象。我现在在控制台上看到了，请尝试使用：

data:{yourVarName:JSON.stringify（$（'datetimepicker1'）.data（'DateTimePicker'）.date（））}，

Yes！它的工作！但控制器get的对象如何从对象中获取日期时间？