2012-08-07 65 views
0

我正在學習Jquery Mobile。我正在嘗試爲我的.NET MVC3網站設置登錄頁面。我的控制器只是標準的MVC3帳戶控制器。MVC3查看模型中的Jquery Mobile複選框值無效

這裏是我的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; } 
} 
+0

我可以問問你的理由是不是使用內置的HtmlHelpers? – 2012-08-07 02:58:15

+0

首先,我從Jquery Mobile站點獲取示例代碼。其次,我希望使用type = email和type = password來利用移動設備上的智能鍵盤。就複選框而言,我只是遵循相同的模式。有沒有理由不這樣做? – user1304444 2012-08-07 03:05:01

+0

在使用HtmlHelpers的時候,你沒有理由不能利用這些東西。我會以答案爲例。這可能是它不起作用的原因,因爲HtmlHelper提供了ID和Name屬性,而且還提供了Value屬性。 – 2012-08-07 03:08:28

回答

0

您可以使用HtmlHelpers時使用額外的移動屬性視圖模型,一個例子如下:

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

MVC 3將凸顯了屬性名稱爲破折號,因此您的數據主題屬性保持不變。我剛剛測試過它,它可以完美地滿足您的需求。

+0

我得到一個錯誤「方法沒有重載」TextBoxFor'需要3個參數「。 – user1304444 2012-08-07 03:20:06

+0

編輯:道歉..我包括默認值,其中沒有重載TextBoxFor。我編輯了我的答案。 – 2012-08-07 03:22:21

+0

就模型而言,問題是固定的,但我留下了一個像1像素乘1像素的複選框。我注意到,如果我沒有用複選框包裝複選框,就會發生這種情況。 – user1304444 2012-08-07 03:30:22