0

ICustomInput 値のリストを含むモデルビューがあります

public class DemoViewModel {
    [Required]
    public string FirstName {get; set;}
    [Required]
    public string LastName {get; set;}

    [RequiredIf("DayPhoneRequired", true)]
    public string DayPhone {get; set;}
    public bool DayPhoneRequired {get; set;} = false;
    public List<ICustomInput> CustomInputFields { get; set; } = new List<ICustomInput>();
}

ICustomInput の例

public class CustomTextInput : ICustomInput
    {
        public CustomField Field { get; }
        public string DisplayName { get; set; }

        [RequiredIf("DataValueRequired", true, ErrorMessage = "This is a required field")]
        public virtual string DataValue { get; set; }
        public bool DataValueRequired { get; set; } = false;
        public virtual string ClassName => "CustomTextInput";
        public string AssemblyName => "Application.Models";
    }

これの目的は、ログインしているクライアントがフォームで要求したカスタム入力フィールドに関する情報を DB から取得できるようにすることです。あるクライアントはいくつかのテキスト フィールドを必要とし、別のクライアントはドロップダウンを必要とする場合があります。これらのカスタム フィールドは、入力が必要な場合と必要でない場合があります。(CustomField オブジェクトは、dataLayer によって返される古いオブジェクトであり、頻繁に使用されます。再構築したくありませんが、文字列でいっぱいであると仮定します)

ICustomInputs の具体的な実装用のエディター テンプレートと、投稿時にデータを取得できるカスタム バインダーがあります。しかし、私が抱えている問題は、RequiredIf 属性が、すべての ICustomInputs に対してクライアント側の検証に対して目立たないデータ値を同じに設定していることです。それらはすべて依存プロパティに同じ名前を持っているので理にかなっていますが、私が抱えている問題は解決しません。

私のビューは、単純に ICustomInput のリストを表示します:

@Html.EditorFor(model => model.CustomInputFields)

次に、ICustomInput を実装する各具象型には、次のような独自の editorTemplate があります。

<div class="columnPositioner">
    <div class="inputContainer">
        @Html.TextBoxFor(model => model.DataValue, new
   {
       @class = "inputFields input-lg form-control",
       placeholder = Model.Field.Display
   })
        <span class="inputLabel">
            @Html.LabelFor(model => model.Field.Display, Model.Field.Display)
        </span>
        @Html.ValidationMessageFor(model => model.DataValue, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.DataValueRequired)
    </div>
</div>

結果の HTML は次のようになります。

<select name="CustomInputFields[0].DataValue" class="inputFields input-lg form-control" id="CustomInputFields_0__DataValue" data-val="true" data-val-requiredif-operator="EqualTo" data-val-requiredif-dependentvalue="True" data-val-requiredif-dependentproperty="DataValueRequired" data-val-requiredif="This is a required field"><option value="">TEST01</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
</select>
<input name="CustomInputFields[0].DataValueRequired" class="hasContent" id="CustomInputFields_0__DataValueRequired" type="hidden" value="True" data-val-required="The DataValueRequired field is required." data-val="true">
<input name="CustomInputFields[1].DataValue" class="inputFields input-lg form-control" id="CustomInputFields_1__DataValue" type="text" placeholder="TEST02" value="" data-val="true" data-val-requiredif-operator="EqualTo" data-val-requiredif-dependentvalue="True" data-val-requiredif-dependentproperty="DataValueRequired" data-val-requiredif="This is a required field">
<input name="CustomInputFields[1].DataValueRequired" id="CustomInputFields_1__DataValueRequired" type="hidden" value="False" data-val-required="The DataValueRequired field is required." data-val="true">

非表示フィールドには適切な名前が付けられていますが、属性を取得して data-val-requiredif-dependent プロパティを非表示フィールドの実際の ID/名前に設定するにはどうすればよいですか?

現在、リスト用のカスタム エディター テンプレートを持っていません。持っていましたが、データを正しくバインドすることができませんでした。List にエディター テンプレートをドロップし、ICustomInput の具体的な実装用に独自のエディター テンプレートを作成すると、必要なすべての UI レイアウト コントロールが得られ、データが正しくバインドされましたが、クライアント側の検証を適切に機能させることができません。それが単なるエディター テンプレートである場合、どのように見えるでしょうか?

アップデート

これは修正ですが、私は好きではありません。スタイルを適用するために入力を介して .each を既に実行している JavaScript があるため、これを .each に追加しました。

function requiredIfHack($input) {
    var depPropVal = $input.data("val-requiredif-dependentproperty");
    //return if the value exists
    if ($("#" + depPropVal).length) return;

    //it doesn't. it's missing the parent object name
    var parentName = $input.attr("name").split(".")[0].replace("[", "_").replace("]", "_");
    $input.data("val-requiredif-dependentproperty", parentName + "_" + depPropVal);
}

それは問題を解決しますが、解決するのがjsの責任である問題であるべきではないと思います。そして、これは非常に卑劣な修正であるため、将来このコードに取り組もうとする他の人をつまずかせる可能性があります。まだまだいい方法を見つけていきたいです。

4

0 に答える 0