0

私はJquery Mobileを学んでいます。.NET MVC3 サイトのログオン ページをセットアップしようとしています。私のコントローラーは、標準の MVC3 アカウント コントローラーです。

これが私の Jquery Mobile ページです。

<html>
<head>
    <title>Mobile Logon</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script type="text/javascript">
        $(document).bind("mobileinit", function(){
           $.extend(  $.mobile , {
            ajaxEnabled: false
          });
        });
    </script>

    <script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>

</head>
<body>

<div data-role="page" data-theme="e">
    <div data-role="header">

        <a href="@Url.Action("Index", "Home")" data-icon="arrow-l" rel="external" >Back</a>
        <h1>Logon</h1>
    </div>

    <div data-role = "content">        
        @Html.ValidationSummary(true, "Login was unsuccessful.")

        @using (Html.BeginForm("Logon", "Account", FormMethod.Post, null))
        {
            <label for="Username">User Name (e-mail address)</label><input type="email" name="Username" />
            <label for="Password">Password</label><input type="password" name="Password" />
            <label><input type="checkbox" name="RememberMe" data-theme="c" />Remember Me</label>
            <button type="submit" value="Log On"></button>
        }
        <center>or</center>

        @using(Html.BeginForm("Register", "Account", FormMethod.Get, null ))
        {
            <button type="submit" value="Register for an account" data-transition="flip"></button>  
        }

    </div>
</div>

ページをテストするときに、[Remember Me] ボックスをオフのままにしておくと、すべて正常に動作します。ただし、チェックボックスをオンにして [ログオン] をクリックすると、コントローラーはモデルが無効であると表示します。 コードをステップ実行すると、ボックスがチェックされているかどうかに関係なく、"RememberMe" の値も false であると見なされていることがわかります。

ログオン ページのビュー モデルは次のとおりです。

public class LogOnModel
{
    [Required]
    [Display(Name = "E-mail address")]
    public string UserName { get; set; }

    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [Display(Name = "Remember me?")]
    public bool RememberMe { get; set; }
}
4

1 に答える 1

0

を使用する場合、追加のモバイル属性を使用できます。HtmlHelpers例を以下に示します。

@Html.TextBoxFor(x => x.UserName, new { type = "email" })
@Html.CheckBoxFor(x => x.RememberMe, new { data_theme = "c" })

MVC 3 は属性名のアンダースコアをダッシュ​​に変換するため、data-theme 属性はそのまま残ります。これをテストしたところ、ニーズに完全に適合します。

于 2012-08-07T03:14:04.647 に答える