将日期时间传递给控制器

Question

我想在控制器中传递在 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？怎么做正确？

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

Answer 1

您基本上可以在输入字段上监听 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。如果您的 js 代码在 razor 视图中，此代码将起作用。如果您的代码在外部 js 文件中，请使用 .

中说明的方法

Answer 2

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

Answer 3

我只做了这个而且对我有用

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

将日期时间传递给控制器

Pass DateTime to Controller

ajax

jquery

asp.net-mvc-4

twitter-bootstrap

bootstrap-datetimepicker