Question

我正在使用将条件属性添加到MVC中的html元素的功能。问题是我只能弄清楚如何添加一个条件。当前条件如下如果操作类型下拉列表包含OTA，则显示提交类型下拉列表我需要它如果操作类型下拉列表包含OTA，则显示提交类型下拉列表否则，如果动作类型下拉菜单包含MOD，则显示修改下拉列表

我一直在寻找答案，而我唯一能找到的就是如何利用JavaScript获得所需的结果。我不想这样做，因为我想坚持使用整个应用程序中使用的内容。我目前拥有的代码如下：

<div class="row">
    @using (Html.BeginHalfSectionFor(x => 
    x.ItemActionDescriptionSection.TypeOfAction))
    {
        @Html.CustomDropDownListFor(
        x => x.ItemActionDescriptionSection.TypeOfAction, 
        ViewData["TypeOfActionDropDownList"],
        Model.ItemActionDescriptionSection.DisplaySectionAsReadOnly,
        new { 
            data_conditional_if_contains = "OTA", 
            data_conditional_then_show = "#typeOfSubmission" 
        })
    }
</div>

期望的结果是，如果用户从操作类型下拉列表中选择OTA，则显示提交下拉列表的类型；如果用户从操作类型下拉列表中选择mod，则显示修改下拉列表，如果选择了其他选项，则不会显示任何下拉列表。

Answer 1

我能够解决它，我不得不使用javascript和jQuery，但是它很干净并且工作得很好。这是我的解决方案：使用此脚本无法将DOM作为条件语句添加到DOM中的HTML元素。脚本文件

// Initializes a number of if-then logic rules throughout the form. 
function InitializeConditionalFormatting(targetArea) {
    $(targetArea).find("[data-conditional], [data-conditional-then-clear], [data-conditional-then-require], [data-conditional-then-show], [data-conditional-else-then-show]").change(function (event) {
    var target = $(this);
    // First, gets the value of the element that triggered the event when it changed. 
        var value;
        var elseValue = false;
        if (target.is("[type=checkbox]")) {
            // Can't get a value from a checkbox, so sets true if its checked and false otherwise. 
            value = target.is(":checked") ? "true" : "false";
        }
        else {
            value = target.val();
        }

        // Next, checks what test is being run, and if it succeeds or not. 
        var result = false;
        if (!result) {
            var ifEquals = target.attr("data-conditional-if-equals");
            if (ifEquals == value) {
                result = true;
            }
        }
        if (!result) {
            var ifNotEquals = target.attr("data-conditional-if-notequals");
            if (ifNotEquals && !value.match(new RegExp(ifNotEquals, "i"))) {
                result = true;
            }
        }
        if (!result) {
            var ifNull = target.attr("data-conditional-if-null");
            if (ifNull && !value) {
                result = true; 
            }
        }
        if (!result) {
            var ifNotNull = target.attr("data-conditional-if-notnull");
            if (ifNotNull && value) {
                result = true;
            }
        }
        if (!result && !elseValue) {
            var ifContains = target.attr("data-conditional-if-contains");
            if (ifContains) {
                var text = (target.is("select")) ? target.find(":selected").text() : value;
                // For selects, where we're more interested in the selected option's text than it's value. 
                if (text.match(new RegExp(ifContains, "i"))) {
                    result = true;
                    elseValue = false
                }
            }
        }
        if (!elseValue && !result) {
            var elseifContains = target.attr("data-conditional-else-if-contains");
            if (elseifContains) {
                var text = (target.is("select")) ? target.find(":selected").text() : value;
                // For selects, where we're more interested in the selected option's text than it's value. 
                if (text.match(new RegExp(elseifContains, "i"))) {
                    elseValue = true;
                    result = false;
                }
            }
        }

        // Finally, completes the corresponding 'then' actions based on the results (can be multiple). 
        var thenClear = target.attr("data-conditional-then-clear");
        if (result && thenClear) {
            ConditionalClear(thenClear); 
        }
        var thenNotClear = target.attr("data-conditional-then-notclear");
        if (!result && thenNotClear) {
            ConditionalClear(thenNotClear); 
        }
        var thenRequire = target.attr("data-conditional-then-require");
        if (thenRequire) {
            (result) ? $(thenRequire).rules("add", { required: true }) : $(thenRequire).rules("remove", "required");
        }
        var thenShow = target.attr("data-conditional-then-show");
        if (thenShow) {
            (result) ? $(thenShow).show() : $(thenShow).hide();
        }
        var thenShow = target.attr("data-conditional-control-to-clear-content");
        if (thenShow) {
            (result) ? NotClearContent(thenShow) : ClearContent(thenShow);
        }
        var elseThenShow = target.attr("data-conditional-else-then-show");
        if (elseThenShow) {
            (elseValue) ? $(elseThenShow).show() : $(elseThenShow).hide();
        }
        var elseThenShow = target.attr("data-conditional-control-to-clear-content");
        if (elseThenShow) {
            (elseValue) ? NotClearContent(elseThenShow) : ClearContent(elseThenShow);
        }
    }).change();

    function ConditionalClear(thenClear) {
        // This changes the target and triggers it's onChange method, be very careful of infinite loops. 
        if ($(thenClear).is("[type=checkbox]")) {
            $(thenClear).removeAttr("checked").change();
        }
        else {
            $(thenClear).val("");
        }
    }
}

function NotClearContent(e) {
    //nothing for now
}

function ClearContent(e) {
    //checkbox for now
    $("input[" + e + "]").each(function () {
        if ($(this).is("[type=checkbox]")) {
            $(this).removeAttr("checked").change();
        }
        else {
            $(this).val("");
        }
    });
}

我需要向html元素添加附加条件作为属性

1 个答案: