のASP.net Webフォーム

Question

にブートストラップスタイルを適用しようとすると、私はそう

<div class="form-group col-sm-6 <%= (revAlertValue.IsValid == false ? "has-error" : "") %>"> 
<label for="AlertValue" class="control-label col-sm-4">Alert Value</label> 
<div class="col-sm-4 input-group"> 
    <span class="input-group-btn"> 
     <asp:Button ID="btnMediumValue" CssClass="btn btn-warning" runat="server" Text="Low" OnClientClick="btnMediumValue_Click" OnClick="btnMediumValue_Click" /> 
    </span> 
    <asp:TextBox CssClass="form-control text-center" CausesValidation="true" ID="tbAlertValue" runat="server" MaxLength="4" /> 
    <asp:RegularExpressionValidator ID="revAlertValue" runat="server" 
     ControlToValidate="tbAlertValue" ErrorMessage="" 
     ValidationExpression="^[1-9]\d*$" /> 
    <asp:RequiredFieldValidator ID="rfvAlertValue" runat="server" ControlToValidate="tbAlertValue" /> 
    <span class="input-group-btn"> 
     <asp:Button ID="btnHighValue" CssClass="btn btn-danger" runat="server" Text="High" OnClientClick="btnHighValue_Click" OnClick="btnHighValue_Click" /> 
    </span> 
</div> 

私は基本的に私にhas-errorクラスを適用しようとしているとして、それに接続されているasp:RegularExpressionValidatorを持つテキストボックスを持っていますform-group正規表現バリデーターが有効でない場合。しかし、正規表現バリデーターに失敗するテキストをテストして入力すると、そのクラスは適用されません。私は多分考えた送信ボタンを押したときに、それがトリガする必要がある、またはそれ以上のコードが.aspx.cs取り扱いに追加する必要があります

<%= (revResendEvery.IsValid == false) ? "has-error" : "" %> 
<%= (revAlertValue.IsValid == false ? "has-error" : "") %> 

：

は、私は他の方法で式を書いてみましたサブミット後のクラス追加は押されていますが、トリックもしません。

Answer 1

このクライアント側を実行するには、ASP.NETによってレンダリングされたクライアント側コードを利用する必要があります。次に、ページに含めるスクリプトの例を示します。

(function() { 
    var originalRegularExpressionValidator = RegularExpressionValidatorEvaluateIsValid; 
    RegularExpressionValidatorEvaluateIsValid = function (val) { 
     var originalValidationResult = originalRegularExpressionValidator(val); 

     if (!originalValidationResult) { 
      var formGroup = $("#" + val.controltovalidate).closest(".form-group"); 
      formGroup.addClass("has-error"); 
     } 
     return originalValidationResult; 
    } 
})(); 

これは、もちろん、あなたが（closestとaddClass方法のための）ページにjQueryのを前提としていますが、あなたが好きでそれを置き換えることができます。

また、Page_ClientValidate関数ASP.NETレンダリングをオーバーライドすることもできます。 StackOverflowには、これを行う方法に対処する多くの質問があります。