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寫法還是很重要..