1

还有其他人在使用 MVC3、JQuery 1.7.1 和 JQuery Mobile 1.1.0 时遇到问题吗?每当我提交标准 MVC 表单时,我的 URL 来自:

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

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

我正在简化一个非常混乱的现有站点,因此我正在通过控制器清理和删除不需要的 jquery 表单处理并仅使用 Razor 来处理控制器。我想知道我的项目中是否存在冲突,但我设法从一个新项目中复制了它:

打开VS2010,新建Empty MVC3 Project——即下面没有提到的都是默认的MVC项目

添加测试控制器:

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

添加测试模型:

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://localhost:65298/Test/Testing#/Test/Testing

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

提前谢谢了!!

4

2 回答 2

3

如前所述,通过 ajax 加载页面是 jQm 的默认行为。Usingrel="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">

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

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

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

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

于 2012-08-29T19:13:19.770 回答
2

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

如果您想禁用此行为,您可以rel=external输入链接,链接将在没有 ajax 的情况下加载,然后您的 url 将是正常的。

<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

于 2012-04-22T03:44:43.120 回答