MVC3 布尔编辑器模板，具有相同属性的多个控件

Question

我正在使用 c#、MVC3、Razor 和 Zurb Foundation 4。

我有一个用于布尔值的自定义编辑器模板，它将为不同的输入设备显示不同的 UI。 （可见性由 Foundation 的 hide-for / show-for css 类控制）

问题在于，由于所有这些 UI 元素始终在页面上，因此只有第一个中的值会在回发时绑定到模型。

所以我要么需要找到一种方法来实际删除隐藏的 div 的 HTML，要么找到一种方法从三个元素中的任何一个中使用真值（它们都默认为 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>

目前复选框可以正常工作，但下拉菜单不能。 （当我回到控制器时，我的模型属性总是错误的）。 如果我将下拉 div 移到复选框之前，则下拉菜单有效，但复选框无效。

请注意，我还不确定触摸元素，所以无论如何它可能是错误的。在我解决这个问题之前，我不会为让它工作而烦恼。

Answer 1

我制作了一个蛮力方法，使用 javascript 和 jquery 同步每个输入。如果您找到更好的方法，请发布

测试表格

@using BooleanEditorTemplate.Controllers
@model bool

@{ var modelname = "mmm"; }

@using(Html.BeginForm("Index","Home")){
<div class="hide-for-small">
    <div class="hide-for-touch">
        <div class="editor-field">
            @Html.CheckBox(modelname, 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.DropDownList(modelname, new SelectList(ynb, "Value", "Description"))
        </div>
    </div>
</div>
<div class="show-for-touch">
    <div class="switch round">
        <input id='@modelname' name='@modelname' type='radio' checked  value="on"/>
        <label for='@modelname' onclick=''>Off</label>

        <input id='@modelname' name='@modelname' type='radio' value="off"/>
        <label for='@modelname' onclick=''>On</label>
    </div>
</div>
<input type="submit" value="OK"/>
}

测试脚本

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script>
    $(function () {

        $('[name="@modelname"]').change(
            function () {


                var id = $(this).attr("id");
                var name = $(this).attr("name");                
                var checked = false;
                switch (this.type)
                {
                    case 'checkbox':
                        checked = $(this).is(":checked");
                        break;
                    case 'select-one':
                        checked = $(this).val().toUpperCase() == 'TRUE';
                        break;
                    case 'radio':
                        checked = $('input[type="radio"][name=' + name + ']:checked').val().toUpperCase() === 'ON';
                        break;
                }

                //checkbox
                $('input[type="checkbox"][name="' + name + '"]').prop('checked', checked);

                //select the select-one
                if (checked)
                    $('select[name="' + name + '"]').val('True');
                else
                    $('select[name="' + name + '"]').val('False');

                //select the proper radio
                if (checked)
                    $('input[type="radio"][name='+ name +'][value="on"]').prop("checked", true);
                else
                    $('input[type="radio"][name=' + name + '][value="off"]').prop("checked", true);

            });
    });
</script>

和我的测试控制器/类设置

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View("Index",true);
    }

    [HttpPost]
    public ActionResult Index(Boolean mmm)
    {
       return null;
    } 
}

public class BoolString
{
    public bool Value { get; set; }
    public string Description { get; set; }
    public BoolString(bool val, string desc)
    {
        this.Value = val;
        this.Description = desc;
    }
}

所以这适用于我的盒子。我确实必须进行一些修改，因为我没有在编辑器框架中对此进行测试。毫无疑问，您必须再做几次才能将其重新调整到您的框架范围内。