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

Question

Я довольно новичок в этом. Я использую 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> 
    <% } %> 

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

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

Любые идеи

Answer 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'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, чтобы найти его. Вы можете установить идентификатор в форму, а затем найти образуют так:

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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

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

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

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

Вы MUST добавить jquery.unobtrusive-ajax.js для того, чтобы это работало. Будьте осторожны, в проекте шаблона ASP.NET MVC5 этот скрипт не включен, его необходимо добавить вручную или добавить через диспетчер пакетов Nuget.
Это не связано с jquery.validate.unobtrusive.js, которое включено по умолчанию.