发布到mvc控制器参数值的Jquery ajax为null

Question

尝试使用ajax发布到控制器，成功发布，但参数值始终为null。

我只将FromDate和ToDate viewmodel值发布到控制器。

这是我的ajax代码：

var membersGenerateReportForm = $('#MembersGenerateReportForm').serialize();

$("#MembersGenerateBtn").click(function () {
        if ($("#MembersGenerateReportForm").valid()) {
            $.ajax({
                xhr: createXHR,
                url: '@Url.Action("MembersReport", "Report")',
                type: 'POST',
                data: membersGenerateReportForm,
                success: function (data) {
                    alert("data: " + data.message);
                },
                error: function (data) {
                    alert("data: " + data.message);
                }
            });
        }
    });

我的HTML：

@using (Html.BeginForm("MembersReport", "Report", FormMethod.Post, new { id = "MembersGenerateReportForm" }))
{
    @Html.AntiForgeryToken()
    <section class="row-fluid">
        <div class="box">
            <div class="row-fluid">
                <div class="span12">
                    <h4>
                        Generate member registrations report
                    </h4>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span4">
                    <div class="row-fluid">
                        <div class="span12">
                            <h5>From Date</h5>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span12">
                            @Html.TextBoxFor(m => m.FromDate, "{0:dd/MM/yyyy}", new { @class = "input-block-level", placeholder = "From Date" })
                            @Html.ValidationMessageFor(m => m.FromDate)
                        </div>
                    </div>
                </div>
                <div class="span4">
                    <div class="row-fluid">
                        <div class="span12">
                            <h5>To Date</h5>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span12">
                            @Html.TextBoxFor(m => m.ToDate, "{0:dd/MM/yyyy}", new {@class = "input-block-level", placeholder = "To Date"})
                            @Html.ValidationMessageFor(m => m.ToDate)
                        </div>
                    </div>
                </div>
                <div class="span4">
                    <div class="row-fluid">
                        <div class="span12">
                            <h5>Action</h5>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="controls controls-row">
                                <input id="MembersGenerateBtn" value="Generate Report" class="btn btn-blue" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
}

无论我在datepicker字段中放入什么值，该值总是变为01/01/0001，不确定我做错了什么，控制器还没有完成，因为我还在试图弄清楚如何使用Ajax调用返回File。

以下是截图：

更新

我的视图模型按要求：

public class MembersReportViewModel
{
    [Required]
    [Display(Name = @"From Date")]
    public DateTime FromDate { get; set; }

    [Required]
    [Display(Name = @"To Date")]
    public DateTime ToDate { get; set; }
}