Simplest, easier and nice method to submit MVC form using jQuery AJAX:
$("formMapMarker").submit(function(e) { if ($("formMapMarker").valid()) { $.post($(this).attr("action"), $(this).serialize()); } e.preventDefault(); });
Controller:
[HttpPost, ValidateInput(false)] public ActionResult Create([Bind(Exclude="Id")] MapMarker marker) { if (ModelState.IsValid) { try { db.AddToMapMarkers(marker); db.SaveChanges(); return RedirectToAction("Index"); } catch { return View(); } } else return View(); }
$("formMapMarker").submit – assign function on form submit behaviour. $("formMapMarker").valid() – check if form passed validation (jQuery validation plugin used, see previous article). $.post($(this).attr("action"), $(this).serialize()) – get action path, collect form data and serialise it and make AJAX POST call to server. e.preventDefault() – cancel default behaviour with submit form button.
Just few lines of code and it works like a charm. :) BTW form submits will work with disabled JavaScript.