MVC 4 + jQueryMobile submit時form的設定方式

ASP.NET MVC 4 的 form可使用程式碼動態產生,比起直接撰寫更有彈性




一般在MVC上如果要加上submit功能:

   1:  <input type="submit" value="儲存"  />

那網頁上就要加入form標籤,並指定post 與action
而MVC的Razor的預設設定方式如下:

   1:  @using (Html.BeginForm())

   2:  {

   3:     //網頁內容

   4:  }

如此屆時Render至瀏覽器上的標籤就會變成如下:

   1:  <form action="/Controller/Action" method="post">...</form>

本來這樣的運作再正常不過,但是因為網頁導入了jQuery Mobile後,
jQuery Mobile預設就將submit行為以AJAX的方式執行,
並將submit後內容加入至原本網頁內,而不是做最單純的導向
這樣的好意有時候就會造成困擾
(EX 網址並沒有變更,被導向的網頁javascript不執行)

所以如果要拒絕jQuery Mobile的好意,就要加入 data-ajax = false的設定至form 標籤內
如此就要把原本的Razor程式碼改成如下:

   1:  @using (Html.BeginForm(

   2:  "Setting", 

   3:  "_03ShowUI", 

   4:  FormMethod.Post, 

   5:  new Dictionary<string, Object> { { "data-ajax", "false" } }))

   6:  {

   7:    //網頁內容

   8:  }

如此一來,Render至瀏覽器上的標籤就會變成如下:

   1:  <form action="/_03ShowUI/Setting" method="post" data-ajax="false">

   2:  ...

   3:  </form>

這樣就算加入了jQuery Mobile,也還是可以做標準的Http Post了