Databases
StackOverflow2013
Postsdbo
POASP MVC3 Problems with URL after adding JQueryMobile
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POASP MVC3 Problems with URL after adding JQueryMobile
    text
    copied!<p>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:</p> <p><strong>localhost/site/controller/action</strong></p> <p>To</p> <p><strong>localhost/site/controller/action#/controller/action</strong></p> <p>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:</p> <p>Open VS2010, New Empty MVC3 Project - i.e. everything not mentioned below is the default MVC project</p> <p>Add TestController:</p> <pre><code>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(); } } } </code></pre> <p>Add TestModel:</p> <pre><code>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; } } } </code></pre> <p>Add view Folder Test with view Testing:</p> <pre><code>@model MvcApplication1.Models.TestModel @using (Html.BeginForm("Testing", "Test", FormMethod.Post)) { &lt;div id="divForgotPassword"&gt; &lt;fieldset data-role="fieldcontain"&gt; &lt;legend&gt;Forgot Password&lt;/legend&gt; &lt;div id="editor-label"&gt; &lt;label for="txtLogonID"&gt; Email Address:&lt;/label&gt;&lt;/div&gt; &lt;div id="editor-field"&gt; @Html.TextBoxFor(m =&gt; m.EmailAddress, new { type = "email" }) &lt;br /&gt; @Html.ValidationMessageFor(m =&gt; m.EmailAddress)&lt;/div&gt; &lt;input type="submit" value="Reset Password" data-role="button" data-inline="true" /&gt; &lt;/fieldset&gt; &lt;/div&gt; } </code></pre> <p>Run and visit <a href="http://localhost:65298/Test/Testing" rel="nofollow">http://localhost:65298/Test/Testing</a> Hit Reset Password, validator works, URL doesn't change</p> <p>Add jquery.mobile-1.1.0.js and jquery-1.7.1.min.js to scripts folder</p> <p>To _Layout.cshtml add: And Change jquery 1.5.1 to 1.7.1</p> <p>Run and visit our page again Hit Reset Password, validator works but now you have: <strong>http://localhost:65298/Test/Testing#/Test/Testing</strong></p> <p>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...</p> <p>Many Thanks In Advance!!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload