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

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”的值为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; }
}

Answer 1

使用HtmlHelpers ，可以使用额外的移动属性，如下所示：

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

MVC 3将属性名称中的下划线转换为破折号，因此您的数据主题属性保持不变。 我刚刚对此进行了测试，它非常适合您的需求。