Question

我经常在MVC 5页面上使用Popups。当用户单击按钮时，我执行Ajax Post并使用加载的HTML附加文档

样品：

$.ajax({
            url: _editTimeRecordDialog,
            data: data,

            beforeSend: function () {
                $("#loading-overlay").show();
            },
            success: function (data2) {
                $("#loading-overlay").hide();

                $("body").append(data2);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(thrownError + 'xhr error -- ' + xhr.status);
                $("#loading-overlay").hide();
            }
        });

现在我想知道这种模式是否适用于表单。更具体地说，我想重用从VisualStudio模板生成的表单（MVC 5 Controller with views，using Entity Framework）。

我想当我只是使用表单元素点击某个按钮时发表一篇Ajax帖子但是验证怎么办？

当帖子成功并且创建了实体时，我只想再次删除弹出窗口。

现在我这样做：

  $.ajax({
        url: _createOrUpdateTimeRecord,
        data: JSON.stringify(data),
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        beforeSend: function () {
            $("#loading-overlay").show();
        },
        success: function (data2) {
            refreshCalendar();

            $("#loading-overlay").hide();
            $("#create-time-record-overlay").remove();
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(thrownError + 'xhr error -- ' + xhr.status);
            $("#loading-overlay").hide();
        }
    });

Answer 1

我想我已经找到了我一直在寻找的东西。它是＆＃34; Ajax.BeginForm＆＃34;在这里找到：Submit form using AJAX in Asp.Net mvc 4

这里是我的代码，它还定义了一个回调函数。

 @using (Ajax.BeginForm("CarCreate", new AjaxOptions()
        {
            OnSuccess = "handleSuccess"
        }))
        {
            @Html.AntiForgeryToken()

            <div class="form-horizontal">
                <h4>Car</h4>
                <hr />
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group">
                    @Html.LabelFor(model => model.Brand, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Brand, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Brand, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.LicencePlate, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.LicencePlate, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.LicencePlate, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Color, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Color, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Color, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Version, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Version, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Version, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.IsDeleted, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        <div class="checkbox">
                            @Html.EditorFor(model => model.IsDeleted)
                            @Html.ValidationMessageFor(model => model.IsDeleted, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.UserId, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.UserId, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.UserId, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Create" class="btn btn-default" />
                    </div>
                </div>
            </div>
        }

Asp.NET MVC 5 Ajax表单帖子

1 个答案: