ASP MVC3添加JQueryMobile后的URL问题

时间:2012-04-22 03:40:08

标签: jquery asp.net-mvc asp.net-mvc-3 mobile razor

其他人遇到MVC3,JQuery 1.7.1和JQuery Mobile 1.1.0的问题?每当我提交标准MVC表单时,我的URL都来自:

本地主机/站点/控制器/动作

本地主机/站点/控制器/动作#/控制器/动作

我正在简化一个非常混乱的现有网站,所以我正在通过控制器清理并删除jquery表单处理,而不需要使用Razor。我想知道我项目中的某些内容是否存在冲突,但我已设法从一个新项目中复制它:

打开VS2010,New Empty MVC3项目 - 即下面未提及的所有内容都是默认的MVC项目

添加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();
        } 
    }
}

添加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; }
    }
}

使用视图添加视图文件夹测试测试:

@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>
}

运行并访问http://localhost:65298/Test/Testing 点击重置密码,验证工作,URL不会改变

将jquery.mobile-1.1.0.js和jquery-1.7.1.min.js添加到脚本文件夹

要_Layout.cshtml添加: 并将jquery 1.5.1更改为1.7.1

再次运行并访问我们的页面 点击重置密码,验证工作但现在你有: 的的http://本地主机:65298 /测试/测试#/测试/测试

我一定是做错了什么?这个问题的主要问题是,使用该URL我不喜欢运行其他javascript。我也担心它会与其他东西产生干扰,加上它看起来很难看,而且一定是错的......

非常感谢提前!!

2 个答案:

答案 0 :(得分:3)

如上所述,通过ajax加载页面是jQm的默认行为。使用rel="external" 可以用于链接,但它实际上适用于移动应用范围外部的链接(例如访问托管在其上的“主要”非移动网站)域名),它不适用于表单提交。对于在范围内的个人链接到您的移动应用和/或表单提交,建议添加属性data-ajax="false"

因此,对于个人链接,您可以这样做:

<a href="/nonMobileHome" rel="external">Full website (non-mobile)</a>
<a href="/user/edit/5" data-ajax="false">Load mobile page without ajax</a> 

对于表单提交,请使用:

<form action="/user/edit/5" method="post" data-ajax="false">

对于页面上的所有链接/表单,请将此javascript添加到您的页面, 之前加载jQuery Mobile:

$(document).bind("mobileinit", function () { $.mobile.ajaxEnabled = false; });

我发现在ASP.NET MVC中最简单的方法就是在全局禁用jQm的ajax加载行为,方法是在站点范围的js文件中包含上面的javascript语句。不幸的是,即使Microsoft默认包含jQuery Mobile MVC4模板,这个问题仍然存在于MVC4和Visual Studio 2012中。

有关在jQuery Mobile中抑制ajax加载的更多信息: http://jquerymobile.com/test/docs/pages/page-links.html
http://jquerymobile.com/test/docs/forms/forms-sample.html

答案 1 :(得分:2)

这是jQuery mobile的默认行为。对于所有链接,它不是以正常方式加载页面,而是发送ajax请求并加载页面,然后更新(只是附加)URL。

如果要禁用此行为,可以将rel=external放入链接和链接中 将加载没有ajax,你的网址将是常见的。

<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