我可以使用jQuery Submit提交剃须刀表单数据吗

Question

I have a razor view which renders on Get call to Controller,

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

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            <div>
                @Html.LabelFor(model => model.StartTime, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-2">
                    @Html.EditorFor(model => model.StartTime, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.StartTime, "", new { @class = "text-danger" })
                </div>
            </div>
            <div>
                @Html.LabelFor(model => model.EndTime, htmlAttributes: new { @class = "control-label col-md-1" })
                <div class="col-md-2">
                    @Html.EditorFor(model => model.EndTime, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.EndTime, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.SampleTimes, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-2">
                @Html.DropDownListFor(model => model.SelectedSampleTime, Model.SampleTimes, htmlAttributes: new { @class = "selectpicker form-control", @data_actions_box = "true" })
                @Html.ValidationMessageFor(model => model.SelectedSampleTime, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Measurands, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-2">
                @Html.DropDownListFor(model => model.SelectedMesurands, Model.Measurands, htmlAttributes: new { @class = "selectpicker form-control", @multiple = "", @data_actions_box = "true" })
                @Html.ValidationMessageFor(model => model.SelectedMesurands, "", new { @class = "text-danger" })

            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Customers, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-2">
                @Html.DropDownListFor(model => model.SelectedCustomers, Model.Customers, htmlAttributes: new { @class = "selectpicker form-control", @multiple = "", @data_actions_box = "true" })
            </div>
        </div>
           <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                @*<input value="Run Report" class="btn btn-default" id="btnRunReport" type="submit" data-toggle="modal" data-target="#reportModal" />*@
                <input value="Run Report" class="btn btn-default" id="btnRunReport" />
            </div>
        </div>
    @Html.Partial("_reportsModal")
}

In the same controller , I have a Index Post,

[HttpPost]
        public JsonResult Index(ReportViewModel vm)
        {

            List<MultiStoredProcedureReturnData> listSpData = new List<MultiStoredProcedureReturnData>();

            List<Chart> chartList = new List<Chart>();

            if (ModelState.IsValid)
            {
                Chart chartData = new Chart();

                string sleectedMeasurandName = "";
                foreach (var item in vm.SelectedMesurands)
                {

                    listSpData.Add(new MultiStoredProcedureReturnData());
                   //Some more updates

                    chartData = UpdateChart();
                    chartList.Add(chartData);
                }

            }


            return Json(chartList);
        }

Now , I want to call this method on button click , but It can not be, as it will return json data to browser.

Instead, I want to use jQuery click event , get all JsonData using Post , and then update a chart on the Index page from return data and display on modal.

I tried doing following, but as expected, I lost all model binding. Is there a way to use jQuery and not loose the data. I can go ahead and get the value from each element and then create a post request. But it would be lot nicer to use the existing model binding and get the data back!!

 $('#btnRunReport').click(function (e) {
                e.preventDefault();
                $.ajax({
                    type: "POST",
                    url:"Reports/Index",
                    success: function (result) { console.log(result); }
                });
            });

Answer 1

To serialize the form controls you can use $('form').serialize();

However, you should be handling the forms submit event rather than the buttons click event so that client side validation is triggered and you can test if the data is valid

$('form').submit(function(e) { // consider giving your form an id attribute and using that as the selector
    if (!$(this).valid()) {
        return; // cancel and display validation errors   
    }
    var formData = $(this).serialize();
    $.ajax({
        url: '@Url.Action("Index", "Reports")', // always use `Url.Action()
        type: "POST",
        data: formData,
        success: function (result) {
            ....
        }
    });
    return false; // this is just an alternative to using e.preventDefault
}