Anyone else having trouble with MVC3, JQuery 1.7.1 and JQuery Mobile 1.1.0? Whenever I submit a standard MVC form my URL goes from:
localhost/site/controller/action
To
localhost/site/controller/action#/controller/action
I'm in the middle of simplifying an existing site that is quite messy so am working through controller by controller cleaning up and removing jquery form handling where it isn't required and just using Razor. I wondered if something in my project was conflicting but i've managed to replicate it from a new project:
Open VS2010, New Empty MVC3 Project - i.e. everything not mentioned below is the default MVC project
Add TestController:
using System.Web.Mvc;
using MvcApplication1.Models;
namespace MvcApplication1.Controllers
{
public class TestController : Controller
{
public ActionResult Testing()
{
return View(new TestModel());
}
[HttpPost]
public ActionResult Testing(TestModel testModel)
{
if (ModelState.IsValid)
{
//Temp for examples sake
ModelState.AddModelError("EmailAddress", "Account not found.");
}
return View();
}
}
}
Add TestModel:
using System.ComponentModel.DataAnnotations;
namespace MvcApplication1.Models
{
public class TestModel
{
[Required(ErrorMessage = "Email is required.")]
[DataType(DataType.EmailAddress)]
[StringLength(50, ErrorMessage = "Email too long.")]
public string EmailAddress { get; set; }
}
}
Add view Folder Test with view Testing:
@model MvcApplication1.Models.TestModel
@using (Html.BeginForm("Testing", "Test", FormMethod.Post))
{
<div id="divForgotPassword">
<fieldset data-role="fieldcontain">
<legend>Forgot Password</legend>
<div id="editor-label">
<label for="txtLogonID">
Email Address:</label></div>
<div id="editor-field">
@Html.TextBoxFor(m => m.EmailAddress, new { type = "email" })
<br />
@Html.ValidationMessageFor(m => m.EmailAddress)</div>
<input type="submit" value="Reset Password" data-role="button" data-inline="true" />
</fieldset>
</div>
}
Run and visit http://localhost:65298/Test/Testing Hit Reset Password, validator works, URL doesn't change
Add jquery.mobile-1.1.0.js and jquery-1.7.1.min.js to scripts folder
To _Layout.cshtml add: And Change jquery 1.5.1 to 1.7.1
Run and visit our page again Hit Reset Password, validator works but now you have: http://localhost:65298/Test/Testing#/Test/Testing
I must be doing something wrong?? The main problem with this is that with that URL other javascript I have doesn't like to run. I also worry it will interefere with something else, plus it looks ugly and has to be wrong...
Many Thanks In Advance!!
