MVC Button not firing ActionResult with HttpPost

Question

I am relatively new to MVC and DevExpress. I have a UI where I need to take Date Field and Pass it to Controller. Very Simple task.

My View Looks like.

<script type="text/javascript">
    var positionDate = "1/1/2014";

    function AddClick(s, e) {
        debugger;
        positionDate = LockedDateToAdd.GetDate().toDateString();

        $.ajax({
            type: "POST",
            url: "/LockedDate/AddLockedDate",
            data: { positionDate: positionDate },
            success: function (msg) { LockedDateGridView.PerformCallback(); }
        });
    }
</script>

@{
    ViewBag.Title = "Locked Dates";
}

<h4>Locked Dates</h4>

@using (Html.BeginForm())
{
    <table>
        <tr>
            <td>
                @Html.DevExpress().DateEdit(settings =>
                {
                    settings.Name = "LockedDateToAdd";
                    settings.Date = DateTime.Today;
                    settings.Properties.AllowNull = false;
                    settings.Properties.DateOnError = DateOnError.Today;
                    settings.Properties.CalendarProperties.ShowWeekNumbers = false;
                }).GetHtml()
            </td>
            <td>
                @Html.DevExpress().Button(settings =>
                {
                    settings.Name = "LockedDateAdd";
                    settings.Text = "Add";
                    settings.ClientSideEvents.Click = "AddClick";
                    settings.UseSubmitBehavior = false;
                }).GetHtml()
            </td>
        </tr>
    </table>
}

I am looking to pass Date using AddClick method.

Controller looks like:

[HttpPost]
public ActionResult AddLockedDate(string positionDate)
{
    DateTime dateValue;

    if (DateTime.TryParse(positionDate, out dateValue))
    {
        _dataAccess.AddLockedDate(dateValue);
    }

    return Content("");
}

Issue is, my code is not hitting AddLockedDate ActionResult. When I remove [HttpPost], it does hit but positionDate comes as empty.

What am I missing here? Any idea. Thanks for helping out.

Answer 1

The problem occurs when different representation of client-side date from JS which not straightly parseable by DateTime.TryParse.

Using console.log(positionDate), the captured date format becomes like this (at the current time of writing):

Wed Mar 22 2017

The date format is non-parseable using TryParse without specifying proper date format, hence use proper formatting with TryParseExact:

Controller

[HttpPost]
public ActionResult AddLockedDate(string positionDate)
{
     DateTime dateValue;

     // parse exactly as toDateString method returns
     if (DateTime.TryParseExact(positionDate, "ddd MMM d yyyy", CultureInfo.InvariantCulture, DateTimeStyles.None, out dateValue))
     {
         _dataAccess.AddLockedDate(dateValue);
     }

     return Content("");
}

View

<script type="text/javascript">
    var positionDate = "1/1/2014";

    function AddClick(s, e) {
        debugger;
        positionDate = LockedDateToAdd.GetDate().toDateString();

        $.ajax({
            type: "POST",
            url: "@Url.Action("AddLockedDate", "LockedDate")",
            data: JSON.stringify({ positionDate: positionDate }),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (msg) { LockedDateGridView.PerformCallback(); }
        });
    }
</script>

Related:

Javascript date to C# via Ajax

DateTime.TryParse (MSDN)

DateTime.TryParseExact (MSDN)

Answer 2

It seems there is no issues in your code. Just update ajax method as per below.

<script type="text/javascript">
    var positionDate = "1/1/2014";

    function AddClick(s, e) {
        debugger;
        positionDate = LockedDateToAdd.GetDate().toDateString();

        $.ajax({
            type: "POST",
            url: "/LockedDate/AddLockedDate",
            data: JSON.stringify({ positionDate: positionDate }),
            contentType: 'application/json; charset=utf-8',
            success: function (msg) { LockedDateGridView.PerformCallback(); }
        });
    }
</script>