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＆amp; amp;创建了一个蛮力apporach同步每个输入。 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"/>
}

TEST SCRIPT

<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;
    }
}

所以这适用于我的盒子。我确实需要进行一些修改，因为我没有在编辑器框架中测试它。毫无疑问，你需要做几件事来在框架范围内对其进行调整。

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

1 个答案: