Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Essentially the flip switch is a dropdown list with "data-role="slider"" html attribute and with just two options. So you can use it the same way as you'd do with DropDownList in MVC Razor to make it strongly typed/bind it to a bool.</p> <pre><code>@Html.DropDownListFor(m =&gt; m.RememberMe, new List&lt;SelectListItem&gt;(){ new SelectListItem() { Text = "No", Value = "False" }, new SelectListItem() { Text = "Yes", Value = "True" }}, new { data_role = "slider" }) </code></pre> <p>The code above will bind it to RememberMe. It will support for selection (if you forexample pass the model with RememberMe as true will it select Yes). You can use this method/way of doing it with other JQuery mobile components too, just add the @data_role at the end with the proper value.</p> <p>You might notice data-notice is written with underscore. Normal dash won't compile but it gets generated as a dash in the html. You might want to create your own Html helper for simpler reuse. Create this class in your MVC project. Keeping the namespace will make you able nto use it with the @Html util (source: <a href="https://stackoverflow.com/questions/2148545/html-helper-for-boolean-values-in-asp-net-mvc">Html helper for boolean values in asp.net mvc</a>)</p> <pre><code>namespace System.Web.Mvc.Html { public static class JqueryMobileExtension { public static MvcHtmlString FlipSwitchFor&lt;TModel, TProperty&gt;(this HtmlHelper&lt;TModel&gt; htmlHelper, Expression&lt;Func&lt;TModel, TProperty&gt;&gt; expression) { ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData); bool value = (bool)(metadata.Model ?? false); List&lt;SelectListItem&gt; items = new List&lt;SelectListItem&gt;() { 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" }); } } } </code></pre> <p>And you can use it like this:</p> <pre><code>@Html.FlipSwitchFor(m =&gt; m.RememberMe) </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload