1

MVC3、JQuery 1.7.1、JQuery Mobile 1.1.0で問題を抱えている人は他にいますか？標準のMVCフォームを送信すると、URLは次のようになります。

localhost / site / controller / action

に

localhost / site / controller / action＃/ controller / action

私は非常に厄介な既存のサイトを単純化している最中なので、コントローラーを介して、コントローラーが不要な場所でjqueryフォーム処理をクリーンアップして削除し、Razorを使用することで作業しています。プロジェクト内の何かが競合しているかどうか疑問に思いましたが、新しいプロジェクトからそれを複製することができました。

VS2010を開き、新しい空の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 Hit Reset Passwordを実行してアクセスします。 バリデーターは機能し、URLは変更されません

jquery.mobile-1.1.0.jsとjquery-1.7.1.min.jsをscriptsフォルダーに追加します

_Layout.cshtmlに追加：そしてjquery1.5.1を1.7.1に変更します

実行して、もう一度ページにアクセスします。パスワードのリセットを押すと、バリデーターは機能しますが、次のようになります 。http：// localhost：65298 / Test / Testing＃/ Test / Testing

私は何か間違ったことをしているに違いありませんか？これに関する主な問題は、そのURLで、私が持っている他のjavascriptを実行したくないということです。私はまた、それが他の何かと干渉するのではないかと心配しています、そしてそれは醜く見えて間違っているに違いありません...

よろしくお願いします!!

4

2 に答える 2

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

ページ上のすべてのリンク/フォームについて、jQuery Mobileをロードする前に、このjavascriptをページに追加します。

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

ASP.NET MVC内では、サイト全体のjsファイルに上記のjavascriptステートメントを含めることで、jQmのajax読み込み動作をグローバルに無効にするのが最も簡単であることがわかりました。残念ながら、MicrosoftにはデフォルトでjQuery Mobile MVC4テンプレートが含まれていますが、この問題はMVC4およびVisualStudio2012でも引き続き発生します。

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

これがjQuerymobileのデフォルトの動作です。すべてのリンクについて、通常の方法でページをロードする代わりに、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 に答える