MVC提交表單ajax.beginform

Question

之外我有一定的Ajax表單並提交時，我想包括AJAX形式之外的另一種形式。讓我告訴你一個例子：

@using (Ajax.BeginForm("PayWithBankTransfer", "Payment", new { salesLineId = salesLine.SalesLineID }, new AjaxOptions 
                                { 
                                 HttpMethod = "POST", 
                                 UpdateTargetId = "bankForm", 
                                 LoadingElementId = "spinnerBank" 
                                }, new { id = "feedback-form" })) 
{ 
    //some stuff 
    <button type="submit">Reserve</button> 
} 

我有另一個標記的形式之外我想在Ajax表單提交包括

<div id="theOtherStuff"> 
    //otherStuff 
</div> 

我怎麼能與AJAX一起提交其他的東西形成？

Answer 1

我不認爲MS不顯眼的AJAX支持此功能。所以讓我們擺脫它，並使用普通的jQuery。 .serialize()方法就是你要找的。

所以我們開始用一個普通Html.BeginForm

@using (Html.BeginForm(
    "PayWithBankTransfer", 
    "Payment", 
    new { salesLineId = salesLine.SalesLineID }, 
    FormMethod.Post, 
    new { id = "feedback-form" }) 
) 
{ 
    //some stuff 
    <button type="submit" class="t-button t-state-default" style="width: 100px; height: 50px;">Reserver</button> 
} 

更換Ajax.BeginForm形式，然後我們提供一個ID，其他形式的，這樣我們就可以在腳本中引用它：

<div id="theOtherStuff"> 
    @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "theOtherStuffForm" })) 
    { 
     //otherStuff 
    } 
</div> 

和所有剩下的就是寫我們的腳本在一個單獨的JavaScript文件，悄悄地AJAXify這種形式：

$(function() { 
    $('#feedback-form').submit(function() { 
     $('#spinnerBank').show(); 
     $.ajax({ 
      url: this.action, 
      type: this.method, 
      data: $(this).add('#theOtherStuffForm').serialize(), 
      success: function (result) { 
       $('#bankForm').html(result); 
      }, 
      complete: function() { 
       $('#spinnerBank').hide(); 
      } 
     }); 

     return false; 
    }); 
}); 

以下行應特別關注：

data: $(this).add('#theOtherStuffForm').serialize(), 

正如你可以看到.serialize方法允許多種形式轉換爲適合序列化形式。

，你不應該有衝突的名字用的2種形式的輸入元素（例如有2個元素具有相同的名稱），否則默認模型綁定可以去瘋搶它比更爲明顯。如果有任何問題，請由您來解決這些衝突。