Asp.NET MVC 5 Ajax Form Post

Question

I use Popups on my MVC 5 Page quite often. When a user clicks a button I perform an Ajax Post and append the document with the loaded HTML

Sample:

$.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();
            }
        });

Now I want to know if this pattern works with forms. To be more specific I want to reuse the forms which are generated from VisualStudio Template (MVC 5 Controller with views, using Entity Framework).

I guess it would work when I just do an Ajax post on some button click with the the form element but what about the validation?

When the post was successfull and the entity was created I just want to remove the popup again.

Right now I do this that way:

  $.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();
        }
    });

Could you please clarify your question little bit further? So you already send ajax request and update the page. Now you want to validate a form on the ajax success, is that what you want? And since you say you have done certain way now, is there any problem with that? — Subhash Dike, Sep 17 '15 at 13:34
Right now I'm not using forms. I'm collecting data manually with javascript and put it into a Json object. However, the generated template from VisualStudio looks very convenient and would save me a lot of work. The only problem is that I don't want to use postbacks... — stefan, Sep 17 '15 at 13:40
I guess I have already found what I've been looking for. It is "Ajax.BeginForm" found here: http://stackoverflow.com/questions/26191774/submit-form-using-ajax-in-asp-net-mvc-4 — stefan, Sep 17 '15 at 13:42

score 1 · Answer 1 · edited May 23 '17 at 12:13

I guess I have already found what I've been looking for. It is "Ajax.BeginForm" found here: Submit form using AJAX in Asp.Net mvc 4

Here my code, it also has a callback function defined.

 @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 Form Post

1 Answers1