Question

我正在学习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>

当我测试页面时，如果我不选中“记住我”框，那么一切正常。但是，如果我选中该框并单击“登录”，则控制器会说模型无效。当我单步执行代码时，我注意到它也认为“RememberMe”的值“无论盒子是否被检查都是假的。”

以下是登录页面的视图模型

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

Answer 1

使用HtmlHelpers时，您可以使用额外的移动设备属性，示例如下：

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

MVC 3将属性名称中的下划线转换为破折号，因此您的数据主题属性保持不变。我刚刚对此进行了测试，它可以完美地满足您的需求。

在MVC3视图模型中，Jquery Mobile复选框值无效

1 个答案: