MVC3 булев шаблон за редактор с множество контроли за едно и също свойство

Използвам c#, MVC3, Razor и Zurb Foundation 4.

Имам персонализиран шаблон за редактор за булеви стойности, които ще показват различен потребителски интерфейс за различни устройства за въвеждане. (видимостта се контролира от css класовете hide-for / show-for на Foundation)

Проблемът е, че тъй като всички тези елементи на потребителския интерфейс са винаги на страницата, само стойностите в първия ще бъдат обвързани с модела при връщане на публикацията.

Така че или трябва да намеря начин действително да премахна HTML за скритите divs, или да намеря начин да използвам истинска стойност от който и да е от трите елемента (всички те по подразбиране са фалшиви, така че което и да е зададено на истина, ще бъде видимото)

Това е моят 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 преди квадратчето за отметка, тогава падащото меню работи, но квадратчето за отметка не.

Обърнете внимание, че все още не съм сигурен за сензорния елемент, така че все пак може да е грешен. Не се притеснявам да го накарам да работи, докато не разреша този проблем.


razor asp.net-mvc-3 zurb-foundation
person Steve    schedule 07.06.2013    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Приготвих подход за груба сила, синхронизиращ всеки от входовете с помощта на 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;
    }
}

Така че това работи на моята кутия. Трябваше да направя няколко модификации, тъй като не тествах това в рамките на редактора. Несъмнено ще трябва да направите още няколко, за да го адаптирате обратно в обхвата на вашата рамка.

person monkeyhouse    schedule 09.06.2013
comment
Както казахте, трябваше да направя няколко корекции. Хубава идея обаче и вече всичко работи. - person Steve; 10.06.2013