我可以使用 jQuery Submit 提交 Razor 表单数据吗

Question

我有一个剃刀视图，它在 Get 调用 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")
}

在同一个控制器中，我有一个索引帖子，

[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);
        }

现在，我想在单击按钮时调用此方法，但它不能， 因为它会将 json 数据返回给浏览器。

相反，我想使用 jQuery click event ，使用 Post 获取所有 JsonData，然后从返回数据更新 Index 页面上的图表并显示在模态上。

我尝试执行以下操作，但正如预期的那样，我丢失了所有模型绑定。有没有办法使用 jQuery 而不会丢失数据。我可以继续从每个元素中获取值，然后创建一个发布请求。但是使用现有的模型绑定并取回数据会更好！

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

Answer 1

要序列化表单控件，您可以使用$('form').serialize();

但是，您应该处理表单提交事件而不是按钮单击事件，以便触发客户端验证并且您可以测试数据是否有效

$('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
}