강력한 형식의 면도기로 JQuerymobile Flip Switch를 사용하는 방법은 무엇입니까?

Question

내 로그인 페이지에서 "내 계정 정보 기억"옵션으로 플립형 스위치를 사용하고 싶습니다. 양식을 게시 할 때보기 모델의 RememberMe 속성이 플립형 스위치의 값을 가져 오지 않습니다.

보기 모델 :

public class LogOnViewModel 
{ 
    private bool _RememberMe; 

    /*some other properties here...*/  

    [DisplayName("Remember Me?")] 
    public Nullable<bool> RememberMe 
    { 
     get 
     { 
      return (_RememberMe); 
     } 
     set 
     { 
      _RememberMe = (value ?? false); 
     } 
    }   
} 

보기 : 양식 포스트 후

@model UI.Models.Authenticate.LogOnViewModel 
@using (Html.BeginForm("LogOn", "Account", FormMethod.Post, new { data_ajax = "false" })) 
{ 
    <div> 
     <div data-role="fieldcontain"> 
      @Html.LabelFor(m => m.LoginUserName) 
      @Html.TextBoxFor(m => m.LoginUserName) 
     </div> 
     <div data-role="fieldcontain"> 
      @Html.LabelFor(m => m.LoginPass) 
      @Html.PasswordFor(m => m.LoginPass) 
     </div> 

      <select name="RememberMe.Value" id="Model.RememberMe.Value" data-role="slider"> 
       <option value="false">No</option> 
       <option value="true" selected="">Yes</option> 
      </select> 



     <input type="submit" data-role="button" data-transition="none" value="Log on" /> 
    </div> 

}

는에서 rememberme 값은 항상 false입니다. RememberMe 값을 딥 스위치에 올바르게 바인딩하려면 어떻게해야합니까?

Answer 1

기본적으로 플립형 스위치는 "data-role ="slider ""html 속성과 두 가지 옵션 만있는 드롭 다운 목록입니다. MVC Razor의 DropDownList를 사용하는 것과 같은 방식으로 사용할 수 있기 때문에 강하게 입력/부울에 바인딩 할 수 있습니다.

@Html.DropDownListFor(m => m.RememberMe, new List<SelectListItem>(){ new SelectListItem() { Text = "No", Value = "False" }, new SelectListItem() { Text = "Yes", Value = "True" }}, new { data_role = "slider" }) 

위의 코드는 RememberMe에 바인딩합니다. 선택을 지원합니다 (예를 들어 RememberMe가 true 인 모델을 예를 들어 통과하면 예를 선택합니다). 이 메소드/다른 JQuery 모바일 컴포넌트와 함께 사용하는 방법을 사용할 수도 있습니다. 끝에 @data_role을 적절한 값으로 추가하십시오.

데이터 고지가 밑줄로 표시됩니다. 일반 대시는 컴파일되지 않지만 html로 대시로 생성됩니다. 보다 쉬운 재사용을 위해 자체 HTML 도우미를 만들 수도 있습니다. MVC 프로젝트에서이 클래스를 만듭니다. 네임 스페이스를 유지하면 NTO 수 (출처 : Html helper for boolean values in asp.net mvc) util을 @Html와 함께 사용하게됩니다

namespace System.Web.Mvc.Html 
{ 
    public static class JqueryMobileExtension 
    { 
     public static MvcHtmlString FlipSwitchFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression) 
     { 
      ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData); 
      bool value = (bool)(metadata.Model ?? false); 

      List<SelectListItem> items = 
       new List<SelectListItem>() 
        { 

         new SelectListItem() { Text = "No", Value = "False", Selected = (!value) }, 
         new SelectListItem() { Text = "Yes", Value = "True", Selected = (value) } 
        }; 

      return htmlHelper.DropDownListFor(expression, items, new { @data_role = "slider" }); 
     } 
    } 
} 

그리고 당신은 다음과 같이 사용할 수 있습니다 :

@Html.FlipSwitchFor(m => m.RememberMe)