获取 html 5 日期输入字段并传递给 .net 控制器答案

【问题标题】：get html 5 date input field and pass to .net controller获取 html 5 日期输入字段并传递给 .net 控制器
【发布时间】：2019-01-22 21:08:19
【问题描述】：

在我的剃须刀页面上，我有一个简单的日期选择器，如下所示：

<input type="date" name="lessonsStart">

我将如何获取该值并将其发送到我的控制器？

每当我从剃须刀页面向控制器发送数据时，格式总是如下所示：

<a asp-action="LessonIndex" asp-route-id="@item.Id">@Html.DisplayFor(modelItem => item.Name)</a>

它将“item.Id”发送到我的控制器，名为 LessonIndex()。

所以我不确定如何获取日期值并发送它。

控制器如下所示：

public IActionResult LessonIndex(datetime startDate) {

    var response = getLessons(startDate);

      return response.Results;
   }

我需要使用特定的格式吗？

请注意，模型中不使用日期，只需将其发送到控制器即可。

谢谢！

【问题讨论】：

'lessonStart' 是否与您的 razorpage 或控制器中的有效名称相对应？由于您将 mvc 列为目标标签之一。
我知道你想要做什么，但如果你能提供你的控制器的样子，我需要一些澄清和更多的来源。您是否还有与相关页面关联的模型？
@mvermef courseStart 只是我给 html 元素起的名字。除此之外没有任何意义。
这是一个 RazorPage 或 Mvc 控制器，您希望它返回吗？ 2 种方法来实现 1) javascript 或 2) 发布表单。
@mvermef 我还在控制器中添加了需要日期选择器中的日期的方法。请注意，没有与此视图关联的模型。

标签： razor asp.net-core-mvc asp.net-core-2.0

【解决方案1】：

假设这与 mvc 相关，控制器将有一个与帖子相关联的方法，您可以执行该方法将表单中的数据返回到控制器。这使用 javascript 将数据发布到您的 LessonIndex() 方法。

<!--top of your page.-->
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@functions{
    public string GetAntiXsrfRequestToken()
    {
        return Xsrf.GetAndStoreTokens(Context).RequestToken;
    }
}

<input type="date" id="lessonStart" name="lessonStart" />
<input type="Submit" id="PostButton" name="PostButton" Value="Go" />

@section Scripts{ // razor section at the bottom of mvc page 'cshtml'.
<script type="javascript">
 $(function(){   
   $("#PostButton").click(function(){
      var url = '@Url.Action("LessonIndex", "Lesson")';  //assuming controller is named Lesson
       var date= new Date(this.value).ToDateString();
      $.ajax({
        url: url, 
        type: "POST",
        data: "lessonStart=" + date,
        headers:{
        "RequestVerificationToken": '@GetAntiXsrfRequestToken()'
        },
        success: function(response){
           console.log(response);
        },
        error: function(e){
          console.log(e.error);
        }
      });
   });
 }
</script>
}

这也假设方法看起来像这样


public class LessonController : Controller{

 [HttpPost]
 [AutoValidateAntiforgeryToken]
 public IActionResult LessonIndex(DateTime lessonStart){
          var response = getLessons(lessonStart);
    return View(response.results);
 }

}

【讨论】：

嗨，@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf 有什么作用？我以前从未见过使用过的。需要吗？谢谢
我尝试了代码，点击“开始”按钮后，出现此错误：localhost:44304/LessonController/LessonIndex?lessonStart=Invalid%20Date
正确的路线应该是 Lesson/LessonIndex?lessonStart="theDateSent" 。至于 XSRF，它的跨站点请求伪造预防措施，并不是真正需要的，但所有通过 javascript 发布的东西都是一个好主意。如果您使用<form asp-antiforgery="true" />，则会自动考虑这一点，但由于您这样做的方式没有很好的表单，因此必须使用javascript。如果 LessonController 实际出现在 url 中，则该路由设计错误或格式错误。
哦，谢谢，我不知道您必须删除“控制器”一词。谢谢！现在可以使用了！

【解决方案2】：

" 请注意，模型中不使用日期，只需将其发送到控制器即可。"

您可以使用 ajax 将日期作为 QueryString 传递给控制器中的方法。

这是测试示例

<input type="date" name="lessonsStart" id="lessonsStart">

@section Scripts
{
<script type="text/javascript">
    $("#lessonsStart").change(function () {
        var inputDate = new Date(this.value).toDateString();
        $.ajax({
            type: "post",
            url: "/ControllerName/lessonindex?startdate=" + inputDate,
            success: function () { }
        });
    });

</script>
}

控制器中的方法

 [HttpPost]
    public IActionResult LessonIndex(DateTime startDate)
    {

        return Json(startDate);
    }

【讨论】：

【解决方案3】：

    <div class="demo-section k-content">
    <h4>Remind me on</h4>
@(Html.Kendo().DateTimePicker()
        .Name("datetimepicker")
        .Value(DateTime.Now)
        .HtmlAttributes(new { style = "width: 100%", title = "datetimepicker" })
        .DateInput()
)
</div>

【讨论】：

对不起，什么是 .Kendo() ？谢谢