私は c#、MVC3、Razor、Zurb Foundation 4 を使用しています。
入力デバイスごとに異なる UI を表示するブール値のカスタム エディター テンプレートがあります。(可視性は Foundation の hide-for / show-for css クラスによって制御されます)
問題は、これらの UI 要素はすべて常にページ上にあるため、最初の要素の値のみがポストバック時にモデルにバインドされることです。
したがって、非表示の div の HTML を実際に削除する方法を見つけるか、3 つの要素のいずれかから true 値を使用する方法を見つける必要があります (それらはすべてデフォルトで false に設定されているため、true に設定されている方が表示されます)。
これは私の Boolean.cshtml です:
@model bool
@using System.Web.UI.WebControls
@using Helpers
<div class="hide-for-small">
<div class="hide-for-touch">
<div class="editor-field">
@Html.CheckBoxFor(model => model)
</div>
</div>
</div>
<div class="show-for-small">
<div class="hide-for-touch">
<div class="editor-field">
@{
List<BoolString> ynb = new List<BoolString>();
ynb.Add(new BoolString(false, "No"));
ynb.Add(new BoolString(true, "Yes"));
}
@Html.DropDownListFor(model => model, new SelectList(ynb, "Value", "Description"))
</div>
</div>
</div>
<div class="show-for-touch">
<div class="switch round">
<input id='@ViewData.TemplateInfo.HtmlFieldPrefix + ".Off"' name='@ViewData.TemplateInfo.HtmlFieldPrefix' type='radio' checked />
<label for='@ViewData.TemplateInfo.HtmlFieldPrefix + ".Off"' onclick=''>Off</label>
<input id='@ViewData.TemplateInfo.HtmlFieldPrefix + ".On"' name='@ViewData.TemplateInfo.HtmlFieldPrefix' type='radio' />
<label for='@ViewData.TemplateInfo.HtmlFieldPrefix + ".On"' onclick=''>On</label>
</div>
</div>
現在、チェックボックスは正常に機能しますが、ドロップダウンは機能しません。(コントローラーに戻るまでに、モデル プロパティに対して常に false になります)。チェックボックスの前にドロップダウン div を移動すると、ドロップダウンは機能しますが、チェックボックスは機能しません。
タッチ要素についてはまだよくわからないので、とにかく間違っている可能性があることに注意してください。この問題が解決されるまで、私はそれを機能させることを気にしません。