CODEWITHSUNDEEP
razorasp.net-core-mvcasp.net-core-2.0
SkyeBoniwell
SkyeBoniwell

Reputation: 7122

get html 5 date input field and pass to .net controller

On my razor page, I have a simple date picker that looks like this:

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

How would I go about getting the value of that and sending it to my controller?

Whenever I send data to my controller from a razor page, the format always looks something like this:

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

which sends an "item.Id" to my controller called LessonIndex().

So I'm not sure how I'd get the date value and send it.

The controller looks like this:

public IActionResult LessonIndex(datetime startDate) {

    var response = getLessons(startDate);

      return response.Results;
   }

Is there a specific format I need to use?

Note that the date is not used in a model, it just needs to be sent to a controller.

Thanks!

Upvotes: 1

Views: 1797

Answers (3)

mvermef
mvermef

Reputation: 3924

Assuming this is related to mvc the controller would have a method associated with the post that you would perform to get the data from the form back to the controller. This uses javascript to post data to your LessonIndex() method.

<!--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>
}

this also assumes that the method looks like this 


public class LessonController : Controller{

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

}

Upvotes: 1

Xueli Chen
Xueli Chen

Reputation: 12725

" Note that the date is not used in a model, it just needs to be sent to a controller. "

You could use the ajax to pass the date as QueryString to the method in the controller.

Here is the test example

<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>
}

The method in controller

 [HttpPost]
    public IActionResult LessonIndex(DateTime startDate)
    {

        return Json(startDate);
    }

Upvotes: 1

Priyanka Chopra
Priyanka Chopra

Reputation: 1

    <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>

Upvotes: -1

Related Questions