Question

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!!

Answer 1

That is the default behaviour of jQuery mobile. For all links, instead of loading a page in normal way, It sends an ajax request and load the page and then update(just append) the url.

If you want to disable this behaviour, you can put rel=external in the link and the link
will load without ajax and your url will then be usual.

<a href="User/somepage" rel="external" />I wont be using ajax for navigation</a>

http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-navmodel.html