Javascript 我可以用jQuery submit提交razor表单数据吗

我有一个razor视图，在调用控制器时呈现

@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")
}

---

要序列化表单控件，可以使用

$（'form'）。serialize（）

但是，您应该处理forms submit事件，而不是buttons click事件，以便触发客户端验证并测试数据是否有效

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

要序列化表单控件，可以使用
$（'form'）。serialize（）

但是，您应该处理forms submit事件，而不是buttons click事件，以便触发客户端验证并测试数据是否有效

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

只需添加
数据：$（'form'）。serialize（）
即可回发表单值。但是您确实应该处理表单
.submit（）
事件（不是按钮事件），并在进行ajax调用之前检查表单是否有效（如果无效，则取消调用），因此，单击按钮触发表单提交？只需添加
数据：$（'form'）。序列化（）
即可发回表单值。但是你真的应该处理表单
.submit（）
事件（不是一个按钮事件），并在你进行ajax调用之前检查表单是否有效（如果无效则取消调用），所以，点击按钮触发表单提交？非常感谢，我很担心如何在没有模型投标的情况下提交这么多值，因为从每个元素中获取值是一件麻烦事，而且很难维护。再次感谢！！你的观点还有另一个问题。视图中的
foreach（vm.SelectedMesurands中的var项）
表示
SelectedMesurands
是
IEnumerable
，这意味着您必须使用
ListBoxFor（）
，而不是
DropDownListFor（）
-请参阅同上，了解
SelectedCustomers
属性，因为这是一种更好的方法。我确实参考了链接，但我正在使用Fordropdown将所选项目的集合返回到我的控制器中！！是的，但您无法初始设置它（即，如果
SelectedMesurands
设置为包含say
[1,4]的数组，则从控制器到视图的绑定不起作用）
，在GET方法中，则值为1和4的选项将不会在视图中被选择非常感谢，我很担心如何在没有模型投标的情况下提交这么多值，因为从每个元素获取值很麻烦，很难维护。再次非常感谢！！您的视图也有另一个问题。您的
foreach（vm.SelectedMesurands中的var项）
在视图中表示
SelectedMesurands
是
IEnumerable
，这意味着您必须使用
ListBoxFor（）
，而不是
DropDownListFor（）
-对于
SelectedCustomers
属性，同上，因为这是一种更好的方法。我确实参考了链接，但我正在使用Fordropdown将所选项目的集合返回到控制器中！！是的，但您最初无法设置它（即，从控制器到视图的绑定不起作用-如果在GET方法中将
SelectedMesurands
设置为包含say
[1,4]
的数组，则视图中将不会选择值为1和4的选项
$('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
}