Question

我有以下情况：多个requiredif DataAnnotation属性。我创建了一个自定义标签帮助器，如果需要属性，则为除了装饰的属性提供“*”。现在在客户端，我希望能够隐藏/显示依赖属性是否更改值。

对于一个更精确的例子，我有一个模型

public class Document {
public bool IsFake {get; set; }

[RequiredIf("IsFake",false,ValueComparison.IsEqual)]
public string Number{ get; set; }
}

根据我制作的标签助手，我在UI中有一个带有红色*的相应标签。当我在客户端更改从假的到非假的单选按钮时我想隐藏*。

我希望能够自动进行此更改，而不是为已知字段创建一个脚本，因为我有多个这样的情况。

我想也许我可以编写一个javascript代码，动态地将更改事件附加到依赖属性输入和一个显示/隐藏所需标记的处理程序。

Answer 1

这几乎是我提出的解决方案。这是我能做的最好的，但仍然需要一些自定义意味着包含“*”的跨度是我的页面DOM的自定义。



            <div class="editor-label">
                <label ui-documentLabel" for="Number">Number<span class="span-required">*</span></label>
            </div>
            <div class="editor-field">
                <input class="k-textbox ui-textbox" data-val="true" data-val-requiredif="The field Number is required!" data-val-requiredif-dependentproperty="IsFake" data-val-requiredif-dependentvalue="False" data-val-requiredif-operator="IsEqual" id="Number" name="Number" value="" type="text">
                <span class="field-validation-valid" data-valmsg-for="Number" data-valmsg-replace="true"></span>
            </div>

和javascript

  var clietsidevalidation = function () { };

 clietsidevalidation.is = function (value1, operator, value2) {
//function that verifies that the comparison between value1 and value2 is true or not
};

 clietsidevalidation.handleRequirefIf = function (container) {



$('input', container).filter(function () {
    var attr = $(this).attr('data-val-requiredif');
    return (typeof attr !== 'undefined' && attr !== false);
}).each(function (index, item) {

    var params = new Array();
    params["operator"] = $(this).attr('data-val-requiredif-operator');
    params["dependentvalue"] = $(this).attr('data-val-requiredif-dependentvalue');
    params["dependentproperty"] = $(this).attr('data-val-requiredif-dependentproperty');

    var dependentProperty = clietsidevalidation.getName(this, params["dependentproperty"]);
    var dependentTestValue = params["dependentvalue"];
    var operator = params["operator"];
    var dependentPropertyElement = document.getElementsByName(dependentProperty);
    params["element"] = this;


    $(dependentPropertyElement).on('change', { params: params }, function (e) {
        var input = e.data.params.element;
        var inputName = $(input).attr("name");
        var $span = $('label[for=' + inputName + '] span', '.editor-label');

        var dependentProperty = this;
        var dependentTestValue = e.data.params["dependentvalue"];
        var operator = e.data.params["operator"];
        var dependentPropertyElement = $(this);

        var dependentValue = null;

        if (dependentPropertyElement.length > 1) {
            for (var index = 0; index != dependentPropertyElement.length; index++)
                if (dependentPropertyElement[index]["checked"]) {
                    dependentValue = dependentPropertyElement[index].value;
                    break;
                }

            if (dependentValue == null)
                dependentValue = false
        }
        else
            dependentValue = dependentPropertyElement[0].value;

        if (clietsidevalidation.is(dependentValue, operator, dependentTestValue) == false) {

            $span.addClass('hidden');

            var $form = $span.closest("form");
            // get validator object
            var $validator = $form.validate();

            var $errors = $form.find("span.field-validation-error[data-valmsg-for='" + inputName + "']");
            // trick unobtrusive to think the elements were succesfully validated
            // this removes the validation messages
            //custom form our solution as the validation messages are differently configured DOM
            $errors.each(function () { $validator.settings.success($('label',this)); })

            // clear errors from validation
            $validator.resetForm();
        }
        else {
            $span.removeClass('hidden')
        }
    });

});
 };

这是受到我目前无法找到的另一篇文章的启发，但当我这样做时，我会发布一个链接。

当依赖属性更改值时，删除/添加所需的星号

1 个答案: