passing datetime value from the view to controller using ajax call

Question

I am using timepicki (one of the jquery timepickers) to pass DateTime value in the view to the controller, especially to the ActionResult Create method. I have tested under Sources tab using F12 for ajax call written in javascript in the view, and in fact, the value is successfully stored in the variable inside of the function, but doesn't seem to be passing its value to the controller. Can you guys help me why it is not passing its value to the controller? Any help is appreciated.

View:

@model test.Models.Employee

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <div class="form-group">
        @Html.LabelFor(model => model.MondayId, "Monday: ", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            Start: <input type="text" name="timepicker" class="time_element" id="monStart"/>                
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" id="submit" onclick=""/>
        </div>
    </div>
</div>
}

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>       
<script src="@Url.Content("~/Scripts/timepicki.js")" type="text/javascript"></script>       
<link href="@Url.Content("~/Content/timepicki.css")" rel="stylesheet" type="text/css" />

<script>
     $(document).ready(function(){
        $(".time_element").timepicki();
    });
</script>

<script type="text/javascript">
$("#submit").click(function () {

        var monStart = $('#monStart').val();          

        $.ajax({
            url: '@Url.Action("Create", "Employees")',
            data: { employee: null, monStart: monStart },
            type: 'POST',
            success: function (data) {
            },
            error: function (xhr, status, error) {
                alert(xhr.responseText);
            }
        })
    });
</script>
}

controller:

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(Employee employee, DateTime? monStart)
    {
      //codes
    }

Answer 1

You are just missing the AntiForgeryToken on your ajax call. So your call:

$.ajax({
        url: '@Url.Action("Create", "Employees")',
        data: { employee: null, monStart: monStart},
        type: 'POST',
        success: function (data) {
        },
        error: function (xhr, status, error) {
            alert(xhr.responseText);
        }
 });

Should be:

 var myToken = $('[name=__RequestVerificationToken]').val();

 $.ajax({
        url: '@Url.Action("Create", "Employees")',
        data: { employee: null, monStart: monStart, __RequestVerificationToken : myToken  },
        type: 'POST',
        success: function (data) {
        },
        error: function (xhr, status, error) {
            alert(xhr.responseText);
        }
  });