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 Value绑定到fip开关？

Answer 1

本质上，翻转开关是一个带有“data-role =”slider“”html属性的下拉列表，只有两个选项。所以你可以像使用MVC Razor中的DropDownList一样使用它，使其强烈地键入/绑定到bool。

@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项目中创建此类。保留命名空间将使您能够将其与@Html util一起使用（来源：Html helper for boolean values in asp.net mvc）

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)

如何使用强类型剃须刀的JQuery移动Flipswitch？

1 个答案: