Adnan Okko Ответов: 1

Переключение между dropdownlistfor и editorfor и post значение из активного в MVC

Я использую jQuery функция 
toggle()
с собой button для переключения между DropDownListFor и EditorFor Функция заключается в следующем:
function toggler() {
    $("#DDLF, #EF").toggle("slow");
    }


Что я уже пробовал:

Код для кнопки, DropDownListFor и в это:
<button type="button" class="btn btn-primary" onclick="toggler()">Toggle</button>
<div class="form-group">
                @Html.LabelFor(model => model.prod_name, htmlAttributes: new { @class = "control-label col-md-2", @id = "DDLF" })
                <div class="col-md-10">
                    @Html.DropDownListFor(model => model.prod_name, new SelectList(@Model.productos, "Value", "Text", Model.prod_name), "-Please Select-", new { @class = "form-control", @id = "DDLF", @style = "min-width: 500px" })
                    @Html.ValidationMessageFor(model => model.prod_name, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.prod_name, htmlAttributes: new { @class = "control-label col-md-2", @id = "EF", @style = "display:none" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.prod_name, new { htmlAttributes = new { @class = "form-control", @id = "EF", @style = "display:none; min-width: 500px" } })
                    @Html.ValidationMessageFor(model => model.prod_name, "", new { @class = "text-danger" })
                </div>
            </div>
Однако система не публикует текст в EditorFor, он только распознает DropDownListFor часть.

Как я могу опубликовать сообщение из активного переключаемого компонента в представлении?
Есть ли более простой способ сделать это?

Laxmidhar tatwa technologies

определите две функции в каждом событии щелчка каждого элемента управления

Adnan Okko

Спасибо тебе @Laxmidhar. Можете ли вы предоставить простой код для того, что именно вы имеете в виду?

F-ES Sitecore

После переключения вам, возможно, придется также отключить компонент, который теперь скрыт, и включить показанный компонент. Браузер отправляет все входные данные в форму, он не знает и не заботится о том, видны ли эти элементы, поэтому вы публикуете одно и то же значение несколько раз, и он не может знать, какое из них вы имеете в виду как действительное. Отключив скрытый элемент ввода, он не будет отправлен вместе с формой post.

Adnan Okko

@F-ES, я использовал эту функцию, чтобы отключить dropdownlistfor при переключении на editorfor:

переключения функции () {
$("#DDLF, #ЭФ").переключение("медленно", функция () {
$('#DDLF').attr('disabled', 'disabled');
});
}

Но это не сработало. Можете ли вы привести пример того, что вы предложили?

1 Ответов

Рейтинг:
0

F-ES Sitecore

Я кое-что изменил. Для начала у вас было несколько элементов с одним и тем же идентификатором, который не разрешен, идентификаторы должны быть уникальными, и если это не так, jQuery увидит только первый из них. Я ставлю идентификатор на каждую группу (вы можете переместить, если вам нужно), который отличается от элемента управления, и этот идентификатор используется для отображения\скрытия всего элемента. Я также дал этому элементу идентификатор data-control-id, чтобы элемент мог указать, какой элемент управления должен быть включен\отключен. В js я подключился к событиям, чтобы соответствующим образом установить атрибут disabled.

<form method="post">
    <div class="form-group" id="DDLFGroup" data-control-id="DDLF">
        @Html.LabelFor(model => model.prod_name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.prod_name, new SelectList(@Model.productos, "Value", "Text", Model.prod_name), "-Please Select-", new { @class = "form-control", @id = "DDLF", @style = "min-width: 500px" })
            @Html.ValidationMessageFor(model => model.prod_name, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group" id="EFGroup" data-control-id="EF" style="display:none;">
        @Html.LabelFor(model => model.prod_name, htmlAttributes: new { @class = "control-label col-md-2"})
        <div class="col-md-10">
            @Html.EditorFor(model => model.prod_name, new { htmlAttributes = new { @class = "form-control", @id = "EF", @style = "min-width: 500px", disabled="disabled" } })
            @Html.ValidationMessageFor(model => model.prod_name, "", new { @class = "text-danger" })
        </div>
    </div>
    <button type="button" class="btn btn-primary" onclick="return toggler()">Toggle</button>
    <input type="submit" value="Submit"/>
</form>

<script type="text/javascript">
    function toggler() {
        $("#DDLFGroup, #EFGroup").toggle("slow", function () {
            var el = $(this);
            var target = $("#" + el.data("control-id"));

            if (el.is(":visible")){
                target.attr("disabled", false);
            }
            else{
                target.attr("disabled", true);
            }
        });
        return false;
    }
</script>