MVC jQuery отправить форму (без обновления страницы) из функции JavaScript

Я новичок в этом. Я использую ASP.NET MVC С# LINQ to SQL.

У меня есть страница редактирования, в которой загружаются авторы и все их книги. Книги загружаются через вызов Ajax.

    <script type="text/javascript">
        $(document).ready(function() {
            LoadBooks();
        });

        function LoadBooks() {
          $(".Books").hide();
          $(".Books").load("/Books/Edit/<%= Model.AuthorID %>");
          $(".Books").show('slow');
        }
     </script>

Эта часть работает нормально. На странице загружается информация об Авторе, затем загрузка Книги (частичный вид в DIV id = "Книги", только с категорией книг и названием книги):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Solution.Controllers.BooksController+BooksViewModel>" %>
     <% using (Html.BeginForm(null,null, FormMethod.Post,new { id = "bookform" }))
        {%>
            <fieldset>
                <legend>Books</legend>
                <%int i = 0;
                    foreach (var book in Model.Books)
                    {%>
                      <%= book.BookID%>
                      <%= Html.Hidden("book[" + i + "].BookID", book.BookID) %>

                      <%= Html.DropDownList("book[" + i + "].CatID", new SelectList(Model.Categories, "CatID", "CatTitle", book.CatID))%>
                      <%= Html.ValidationMessage("CatID", "*")%>

                      <%= Html.TextBox("book[" + i + "].BookTitle", book.BookTitle)%>
                      <%= Html.ValidationMessage("BookTitle", "*")%>
                      <br />
                      <%i++;
                    } %>
            </fieldset>
     <% } %>

Теперь, на главной странице просмотра, я хочу иметь ссылку. Когда щелкнули ссылку, я хочу сделать несколько вещей через JavaScript/jQuery/Ajax/что угодно. Первое, что я хочу сделать, - отправить форму Books (id = booksform) из частичного представления, а затем перейти к следующему jQuery. Таким образом, я нажимаю ссылку, которая вызывает функцию JavaScript. Эта функция должна вызывать/выполнять/выполнять подачу формы Книги.

Мне кажется, что я все пробовал, но я не могу получить свою форму для отправки и обработки без полной отправки/обновления страницы. (Обратите внимание, что когда полный запрос выполняется, действия, которые я ожидаю в контроллере, будут успешно выполнены). Я хочу, чтобы процесс/действие контроллера не возвращали ничего, кроме какого-либо индикатора успеха/отказа. (Затем я могу вызвать "LoadBooks();" снова, чтобы обновить DIV на странице.

Любые идеи?

Ответы

Ответ 1

Вот как я делаю это с jquery:

function DoAjaxPostAndMore(btnClicked)
{
       var $form = $(btnClicked).parents('form');

        $.ajax({
            type: "POST",
            url: $form.attr('action'),
            data: $form.serialize(),
            error: function(xhr, status, error) {
                  //do something about the error
             },
            success: function(response) {
                 //do something with response
                LoadBooks();

            }
        });

  return false;// if it a link to prevent post

}

Я предположил, что btnClicked находится внутри формы:

<input type="button" value="Submit" onclick="DoAjaxPostAndMore(this)"/>

если ссылка:

  <a href="/url/something" onclick="return DoAjaxPostAndMore(this)">linktext</a>

Если ссылка не внутри формы, вам просто нужно использовать селектора jquery, чтобы найти ее. Вы можете установить id в форму и затем найти форму следующим образом:

var $form = $("#theformid");

Ответ 2

Это Ajax.BeginForm, который вам нужно использовать, а не Html.BeginForm.

Ответ 3

Выполняется ли ваша функция "onclick" JavaScript, и проблема в том, что полная отправка/обновление страницы происходит , а? В этом случае проблема заключается в том, что вы не заканчиваете свою функцию JavaScript с помощью return false.

Или проблема в том, что ваша функция JavaScript onclick не вызывается вообще? Тогда трудно сказать, не глядя на код... Если вы используете селектор JQuery - тогда, вероятно, ссылка не будет выбрана селектором

Ответ 4

<a href = "javascript: SaveProperties();">Save properties</a>
SaveProperties() { $('#bevpropform').submit(); }

Как я уже говорил, должен быть

SaveProperties() { $('#bevpropform').submit(); return false; }

Ответ 5

Это ответ "если это может помочь кому-то", потому что я очень опаздываю на игру, но вы также можете использовать:

@using (Ajax.BeginForm("Method", "Controller", new AjaxOptions { HttpMethod = "POST" }))
{
}

Когда дата будет опубликована, страница не будет обновлена.


ОБРАТИТЕ ВНИМАНИЕ

Вы ДОЛЖНЫ добавить jquery.unobtrusive-ajax.js, чтобы это работало. Будьте осторожны, в проекте шаблона ASP.NET MVC5 этот script включен не по умолчанию, вы должны добавить его вручную или добавить его через диспетчер пакетов Nuget.
Он не связан с jquery.validate.unobtrusive.js, который включен по умолчанию.