2011年1月25日

ASP.NET MVC 、AJAX、img標籤當button的問題

在ASP.NET MVC 2裡,當使用ajax helper時,如果使用不當,是會造成個瀏覽器的一些問題。
但如果您是使用ASP.NET MVC 3,就不用繼續看下去了。

function send() {
  $("#webForm").trigger("onsubmit");
}

中間程式碼略

<a href="#">
<img src="" alt="send" name="Test" width="150"
height="37" border="0" id="Test"
onclick="send();" />
</a>

上面這段程式碼看請來滿正常的,畢竟在設計師設計的時候,
通常都不會使用標準的Button控制項來做Submit..
通常都會將Button包成漂漂的img,然後外面包一個a標籤,
然後在img裡面加上JavaScript的觸發事件,
也就是onClick事件,來觸發JavaScript的send方法,
畢竟有的時候會需要JavaScript做驗證,
然後驗證完成後,在觸發submit事件,
這是一個行之多年的爛方法,
當然,我們也知道利用a標籤來框住img標籤的這個方法很蠢,
但是使用到現在,也沒發生什麼問題,從設計師那邊接手過來的HTML是這樣,
時間緊迫,也懶得再去修改,但結果,事情就這樣的發生了。
平常可能還沒甚麼問題,
但在使用Ajax helper的時候,卻會產生大大的問題,
Ajax helper配合上Model的驗證時,我們雖然在.cs裡面只需要在多加上幾行,
就會有強大的效過,但也產生大大的問題,
回來看這由Ajax helper產生的html,卻會在form裡面插入了兩個事件,
onClick與onSubmit,也因如此,在配合上各家瀏覽器的"風格"不同,造就了不同的結果....

首先,看到jQuery的部分,為何不寫成 $("webForm").submit();
就是因為在ie系列,配合上form的onSubmit時會送出兩次的post....
至於為什麼,我也只能猜測,在ie上,javascript的submit會直接送出表單,然後onSubmit事件會再送出一次,
那改成$("webForm").trigger("onsubmit");這樣寫就沒問題了嗎?

錯.....

如果使用這樣的寫法,firefox是不會有動作的....
原因似乎是因為onSubmit標準上是不會送出submit事件的( ie除外,所以ie會post兩次= = )
所以要怎麼辦呢...要改成以下程式碼

function send() {
$("#webForm").trigger("onsubmit");
}




中間程式碼略

<input type="image" src=""  alt="send" name="Test" id="Test"
onclick="send();" />

這樣IE,Firefox都可以了,為何會這樣,我的推測,在HTML裡,input送出的事件,會呼叫onSubmit,然後再送出。
所以這樣子,ie就不會送出兩次,firefox也可以順利執行。

所以,正規的HTML寫法還是很重要..

沒有留言:

張貼留言