JQuery - Предотвратить ссылку на страницу sh на отправке

Question

Я пытаюсь вызвать конечную точку Asp. Net MVC через Ajax, но у меня возникают проблемы с обновлением страницы при отправке формы.

Из жизни внутри Bootstrap модели на MVC ASP. Net View.

Вот форма (form.cs html) ...

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "editPropertiesForm" }))
{
    @Html.AntiForgeryToken()

    <div class="modal fade" id="editPropertiesModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">

        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Properties</h5>
                </div>
                <div class="modal-body form-group">

                    <div class="container">

                        <span id="responseMessage"></span>

                        <fieldset class="border pl-1 pr-4 mb-2">
                            <legend>Core Properties</legend>

                            @*Folder*@
                            <div class="form-group row">
                                <label for="formFolderPicker" class="col-sm-3">Folder(s)</label>
                                <select id="formFolderPicker" class="selectpicker form-control col-sm-9" multiple data-live-search="true" name="folders">
                                    @*Options bound via editPropertiesFormBuilder.js*@
                                </select>
                            </div>                       
                            </div>
                        </fieldset>

                        <fieldset class="border pl-1 pr-4 mb-2">
                            <legend>Other</legend>

                            @*Notes*@
                            <div class="form-group row">
                                <label for="formNotes" class="col-sm-3">Notes</label>
                                <textarea type="text" class="form-control col-sm-9" id="formNotes" name="notes" rows="3"></textarea>
                            </div>

                        </fieldset>
                    </div>

                    <div class="modal-footer">
                        <button id="editPropertiesCloseBtn" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        @*<button id="editPropertiesSaveBtn" type="submit" class="btn btn-primary">Save</button>*@
                        <input id="editPropertiesSaveBtn" type="submit" value="Save" class="btn btn-primary"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

Вот метод Jquery, который в конечном итоге будет использовать Ajax и вызовет MVC конечная точка ...

    $("#editPropertiesForm").submit(function (event) {
        event.preventDefault();
    });

Я бы ожидал, что event.preventDefault() сработает и предотвратит перезагрузку страницы при отправке формы, но это не так. У кого-нибудь есть идеи?

Answer 1

Попробуйте изменить тип ввода на кнопку

<input id="editPropertiesSaveBtn" type="button" value="Save" class="btn btn-primary"/>

и в случае нажатия отправьте форму

$("#editPropertiesSaveBtn").on("click", function (e) {
     $("#editPropertiesForm").submit();
     e.preventDefault();
 })