Step by step description:
New Asp.Net MVC2 Project
Model:
public class TestModel { public int Property { get; set; } }
HomeController:
[HandleError] public class HomeController : Controller { public ActionResult Index() { return View(); } [AcceptVerbs(HttpVerbs.Post)] public ActionResult Index(TestModel model) { return Content(model.Property.ToString()); } }
index.aspx:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MVCTest.Models.TestModel>" %> <!DOCTYPE html> <script type="text/javascript" src="<%=Url.Content("~/Scripts/MicrosoftAjax.js")%>"></script> <script type="text/javascript" src="<%=Url.Content("~/Scripts/MicrosoftMvcAjax.js")%>"></script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Index</title> </head> <body> <%using( Ajax.BeginForm( "index", "home", new AjaxOptions() { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "Result" } ) ){ %> <div class="editor-field"> <%=Html.TextBoxFor(model => model.Property, new {@type = "number", @step = "1"})%> <%=Html.ValidationMessageFor(model => model.Property)%> </div> <button type="submit" value="click Me">Click Me</button> <% } %> <div id="Result"> </div> </body> </html>
This mvc application refuses to work properly in Chrome / Safari browsers - I get model.Property == 0 in my controller method in the message.
When I remove the html5 attributes by changing:
<%=Html.TextBoxFor(model => model.Property, new {@type = "number", @step = "1"})%>
to
<%=Html.TextBoxFor(model => model.Property)%>
It works as expected.
So what happened to my ajax form with html5 attributes in terms of Chrome / Safari? In each case, IE / FF browsers work fine.
Upd
Html result from fiddler:
HTTP/1.1 200 OK Server: ASP.NET Development Server/10.0.0.0 Date: Wed, 17 Aug 2011 07:16:19 GMT X-AspNet-Version: 4.0.30319 X-AspNetMvc-Version: 2.0 Cache-Control: private Content-Type: text/html; charset=utf-8 Content-Length: 890 Connection: Close <script type="text/javascript" src="/Scripts/MicrosoftAjax.js"></script> <script type="text/javascript" src="/Scripts/MicrosoftMvcAjax.js"></script> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1"><title> Index </title></head> <body> <form action="/" method="post" onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'Post', updateTargetId: 'SaveResultDiv' });"> <div class="editor-field"> <input class="mybox" id="Property" name="Property" step="1" type="number" value="" /> </div> <button type="submit" value="click Me">Click Me</button> </form> <div id="SaveResultDiv"></div> </body> </html>
Ajax request (Safari):
POST http://127.0.0.1:35636/ HTTP/1.1 Host: 127.0.0.1:35636 Referer: http://myapp/ Accept: */* Accept-Language: ru-RU Origin: http://myapp User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ru-RU) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1 X-Requested-With: XMLHttpRequest, XMLHttpRequest Content-Type: application/x-www-form-urlencoded; charset=UTF-8 Accept-Encoding: gzip, deflate Content-Length: 31 Connection: keep-alive Connection: keep-alive X-Requested-With=XMLHttpRequest
Just for comparison - ajax request in IE:
POST http://127.0.0.1:35636/ HTTP/1.1 Accept: */* Accept-Language: ru Referer: http://myapp/ x-requested-with: XMLHttpRequest, XMLHttpRequest Content-Type: application/x-www-form-urlencoded; charset=utf-8 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E; .NET CLR 1.1.4322) Host: 127.0.0.1:35636 Content-Length: 44 Connection: Keep-Alive Pragma: no-cache Property=555&X-Requested-With=XMLHttpRequest
Obviously, requests in Chrome / Safari and IE / FF are different for an unknown reason. Any ideas?