MVC jQuery提交表單（無頁面刷新）來自JavaScript函數

我對這一切都很陌生。我使用ASP.NET MVC C＃LINQ to SQL。MVC jQuery提交表單（無頁面刷新）來自JavaScript函數

我有一個加載作者及其所有書籍的編輯頁面。書籍通過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函數的鏈接。這個函數應該調用/執行/提交Books表單。

我覺得我已經嘗試了一切，但我無法讓我的書籍表單提交和處理，而沒有整頁提交/刷新發生。（注意，當提交完成時，我期望在控制器中執行的操作可以成功處理）。我希望控制器進程/動作除了某種成功/失敗指示之外不返回任何內容。（然後我就可以稱之爲「LoadBooks（）;」？再刷新頁面上的DIV

任何想法

來源

2009-11-12 johnnycakes

我這是怎麼做到這一點使用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");

來源

2009-11-12 09:15:27

如果他們點擊表單之外的鏈接（而不是按鈕）會怎麼樣？那麼如何將表單分配給變量（var $ form）呢？謝謝。 – johnnycakes 2009-11-12 14:43:52

剛剛嘗試過使用var $ form = document.getElementById（'bookform'）;來分配變量的建議。鏈接被點擊時沒有任何反應。 – johnnycakes 2009-11-12 15:01:54

我更新了我的答案。 getElementById返回javascript對象而不是jquery對象，請改用$（「＃bookform」）。 – 2009-11-12 15:19:29

貴「的onclick」 JavaScript函數執行，問題是，整個頁面提交/刷新發生以及？在這種情況下，問題是，你不return false結束你的JavaScript函數。

或者是你的「的onclick」 JavaScript函數完全不叫問題？如果這是很難說不看代碼...如果你使用JQuery選擇器 - 那麼可能鏈接不會被選擇器選中

來源

2009-11-12 07:04:01 Felix

對不起，這看起來很凌亂。有沒有辦法在評論中添加換行符？ Save properties 功能：功能SaveProperties（）{ $（ '＃bevpropform'）提交（）; } 這是有效的，但它當然會提交表單並帶我離開頁面。我一直無法找到一種方式讓表單提交沒有完整頁面發佈。謝謝。 – johnnycakes 2009-11-12 14:59:57

那是Ajax.BeginForm，你需要使用，不Html.BeginForm。

來源

2009-11-12 13:06:37 tuanvt

不，因爲您沒有使用MS Ajax腳本，只是使用JQuery提交常規Html表單。 – 2012-10-07 18:29:07

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

正如我之前說的，應該是

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

來源

2009-11-12 22:30:47 Felix

這是一個「如果它可以幫助別人」的答案，因爲我很遲的遊戲，但你也可以使用：

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

當日期發佈時，頁面將不會刷新。

請注意

您MUST爲了這個工作添加jquery.unobtrusive-ajax.js。請注意，在ASP.NET MVC5模板項目中，此腳本默認包含而不是，您必須手動添加它或通過Nuget數據包管理器添加它。
它與默認包含的jquery.validate.unobtrusive.js無關。

來源

2016-11-20 17:00:07 AlexB

MVC jQuery提交表單（無頁面刷新）來自JavaScript函數

回答

相關問題