使用 Jquery Ajax 将 View 中的 datepicker 中的 datetime 值传递给 Controller

Question

在我看来，我有这个代码：

<input type="text" name="date" class="datepicker" id="calendar" />
<script type="text/javascript">
 $("#calendar")
        .datepicker({ dateFormat: 'dd/mm/yy' })
        .on("changeDate", function (e) {
            $.ajax({
                type: "GET",
                url: '@Url.Action("Index","Home")' + '?date=' + e.date.toISOString(),
                success: function (data) {
                    if (data.success) {
                        alert(e.date)
                    }
                }
            });
    });

    $("#calendar").datepicker('setDate', 'today');

</script>

当我在 Datepicker 中更改日期时，我希望 Ajax 调用 Index 方法：

     [HttpGet]
        public ActionResult Index(string date)
        {if (date == null) { ViewBag.dt = 1; };
//code
}

我尝试了很多建议，但在我看来总是得到 1 意味着没有值传递给控制器​​，请帮助。

Answer 1

您似乎在 url 参数中使用了错误的 URL 格式。您需要在 AJAX 调用中将 JS 端的日期时间值作为 data 参数传递，并使用 Nullable<DateTime> 作为操作方法参数：

JS

$.ajax({
    type: "GET",
    url: '@Url.Action("Index", "Home")',
    data: { date: e.date.toISOString() },
    success: function (data) {
        if (data.success) {
            // do something
        }
    }
});

控制器

[HttpGet]
public ActionResult Index(DateTime? date)
{
    // other stuff
}

编辑 1：

我发现你可以使用"getDate" 参数传递datepicker 值，这样你的日期选择器代码就变成了这样：

$("#calendar").datepicker({ dateFormat: 'dd/mm/yy' })
              .on("changeDate", function() {
                  // get date value
                  var datetime = $("#calendar").datepicker("getDate").toISOString();

                  $.ajax({
                      type: "GET",
                      url: '@Url.Action("Index", "Home")',
                      data: { date: datetime },
                      success: function (data) {
                      if (data.success) {
                          // do something
                      }
                  }
              });
});

Answer 2

试试这个，它对我有用

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <input type="text" name="date" class="datepicker" id="calendar" onblur="DemoEvent();"/>
        </div>
    </div>
</div>
@section scripts{
<script type="text/javascript">


      function DemoEvent() {
        alert();
            $.ajax({
                type: "GET",
                url: '@Url.Action("Index","Home")' + '?date=' + $("#calendar").val(),
                success: function (data) {
                    if (data.success) {
                        alert(e.date)
                    }
                }
            });
    }

    //$("#calendar").datetimepicker('setDate', 'today');
//
    window.onload = function () {
        $('.datepicker').datetimepicker({})
    }

</script>
    }