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

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

31 голосов
/ 12 ноября 2009

Я довольно новичок во всем этом. Я использую ASP.NET MVC C # 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 / что угодно. Первым делом я хочу отправить форму Книги (id = booksform) из частичного представления, а затем перейти к следующей функции jQuery . Итак, я нажимаю на ссылку, которая вызывает функцию JavaScript. Эта функция должна вызывать / делать / выполнять отправку формы Книги.

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

Есть идеи?

Ответы [ 5 ]

59 голосов
/ 12 ноября 2009

Вот как я делаю это с помощью 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's 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");
3 голосов
/ 12 ноября 2009

Вам нужно использовать Ajax.BeginForm, а не Html.BeginForm?

1 голос
/ 20 ноября 2016

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

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

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


ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ

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

1 голос
/ 13 ноября 2009 
<a href = "javascript: SaveProperties();">Save properties</a>
SaveProperties() { $('#bevpropform').submit(); }

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

SaveProperties() { $('#bevpropform').submit(); return false; }
1 голос
/ 12 ноября 2009

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

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

...