ASP.NETフォームで必要なチェックボックスを作成するにはどうすればよいですか?


112

私はこれについていくつかの検索を行ったところ、いくつかの部分的な答えを見つけましたが、「これはこれを行う正しい方法です」という温かいあいまいさをもたらすものは何もありません。この質問に対して最も頻繁に発生する苦情に答えるには、「チェックボックスには2つの正当な状態(チェック済みとチェックなし)があります」、これは「契約条件に同意します...」チェックボックスであり、登録を完了するためにチェックする必要があります。したがって、ビジネスロジックの観点からは、ボックスをチェックする必要があります。

完全なカットアンドペースト対応のコードフラグメントを応答に含めてください!私はこれにいくつかの部分があることを知っています-CustomValidator(おそらく)、コードビハインド、いくつかのJavaScript、そしておそらくIsValidのチェック、そして私にとってイライラする部分は、私が見た各例でこれらの重要なものの1つです欠品です!

回答:


216

クライアント側検証用のJavaScript関数(jQueryを使用)...

function CheckBoxRequired_ClientValidate(sender, e)
{
    e.IsValid = jQuery(".AcceptedAgreement input:checkbox").is(':checked');
}

サーバー側検証の分離コード...

protected void CheckBoxRequired_ServerValidate(object sender, ServerValidateEventArgs e)
{
    e.IsValid = MyCheckBox.Checked;
}

チェックボックスとバリデーターのASP.Netコード...

<asp:CheckBox runat="server" ID="MyCheckBox" CssClass="AcceptedAgreement" />
<asp:CustomValidator runat="server" ID="CheckBoxRequired" EnableClientScript="true"
    OnServerValidate="CheckBoxRequired_ServerValidate"
    ClientValidationFunction="CheckBoxRequired_ClientValidate">You must select this box to proceed.</asp:CustomValidator>

そして最後に、あなたのポストバックで-ボタンからでも何からでも...

if (Page.IsValid)
{
    // your code here...
}

私はおそらく何か間違ったことをしています。私は最後まで調査を続けますが、ControlToValidate = "<id-of-checkbox-control>"が例外 "ControlToValidateプロパティによって参照されるControl <id-of-checkbox-control>を検証できません。"をスローします。これはjavascriptなどを壊します
Bob Kaufman 08

2
ああ、そうです。ただそれを削除してください-CheckBoxは、それを結び付ける正しいインターフェースを実装していません。バリデーターは、そのプロパティが設定されていなくても正常に動作します。それに応じてサンプルを更新します。
スコットアイビー

2
JavaScript関数名のCustomValidatorパラメータは、「OnClientValidate」ではなく「ClientValidationFunction」である必要があります。参照:msdn.microsoft.com/en-us/library/9eee01cx(v
Chris

1
私が使用することをお勧めしますjQuery("#<%= MyCheckBox.ClientID %>")代わりにjQuery(".AcceptedAgreement input:checkbox")、あなたが影響を与えるためにしようとしている要素で、より明確にするために。
Jesse Webb 14

3
ControlToValidate属性がないことに最初は気づきませんでした。この属性を含めると例外が発生するので、これを見逃している可能性のある他の人に一言警告します。
MicrosoftAccessPros.com

19

アンドリューの答えのC#バージョン:

<asp:CustomValidator ID="CustomValidator1" runat="server" 
        ErrorMessage="Please accept the terms..." 
        onservervalidate="CustomValidator1_ServerValidate"></asp:CustomValidator>
    <asp:CheckBox ID="CheckBox1" runat="server" />

コードビハインド:

protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
{
    args.IsValid = CheckBox1.Checked;
}

C#バージョンをありがとう。コードを最小限に抑えることも有効に活用できます。
andrewWinn 2009

13

jqueryに依存せず、サーバー側の検証も処理する真のバリデーターが必要な場合(そして、そうする必要があります。サーバー側の検証が最も重要な部分です)、ここにコントロールがあります。

public class RequiredCheckBoxValidator : System.Web.UI.WebControls.BaseValidator
{
    private System.Web.UI.WebControls.CheckBox _ctrlToValidate = null;
    protected System.Web.UI.WebControls.CheckBox CheckBoxToValidate
    {
        get
        {
            if (_ctrlToValidate == null)
                _ctrlToValidate = FindControl(this.ControlToValidate) as System.Web.UI.WebControls.CheckBox;

            return _ctrlToValidate;
        }
    }

    protected override bool ControlPropertiesValid()
    {
        if (this.ControlToValidate.Length == 0)
            throw new System.Web.HttpException(string.Format("The ControlToValidate property of '{0}' is required.", this.ID));

        if (this.CheckBoxToValidate == null)
            throw new System.Web.HttpException(string.Format("This control can only validate CheckBox."));

        return true;
    }

    protected override bool EvaluateIsValid()
    {
        return CheckBoxToValidate.Checked;
    }

    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);

        if (this.Visible && this.Enabled)
        {
            System.Web.UI.ClientScriptManager cs = this.Page.ClientScript;
            if (this.DetermineRenderUplevel() && this.EnableClientScript)
            {
                cs.RegisterExpandoAttribute(this.ClientID, "evaluationfunction", "cb_verify", false);
            }
            if (!this.Page.ClientScript.IsClientScriptBlockRegistered(this.GetType().FullName))
            {
                cs.RegisterClientScriptBlock(this.GetType(), this.GetType().FullName, GetClientSideScript());
            } 
        }
    }

    private string GetClientSideScript()
    {
        return @"<script language=""javascript"">function cb_verify(sender) {var cntrl = document.getElementById(sender.controltovalidate);return cntrl.checked;}</script>";
    }
}

これは、オブジェクトごとに1つの関数を必要とするのではなく、フォーム内の複数のCheckBoxで機能する唯一の回答です。フザー!
haliphax

どうもありがとうございました。複数の動的にレンダリングされるコントロールでこれを行う方法が必要でした。驚くばかり。
schmosef 2016

スコットから選ばれた解決策は正しい/有効ですが、これはより完全な解決策だと思います。このカスタムコントロールは、フレームワークに組み込まれている必要があります。CirrusABSに感謝します。
Gabe

5

スコットの答えはチェックボックスのクラスで機能します。個別のチェックボックスが必要な場合は、少しこっそりする必要があります。ボックスを1つだけ実行する場合は、IDを使用することをお勧めします。この例では、特定のチェックボックスを使用して実行し、jQueryを必要としません。また、これらの厄介なコントロールIDをJavaScriptに取り込む方法の良い例でもあります。

.ascx:

<script type="text/javascript">

    function checkAgreement(source, args)
    {                
        var elem = document.getElementById('<%= chkAgree.ClientID %>');
        if (elem.checked)
        {
            args.IsValid = true;
        }
        else
        {        
            args.IsValid = false;
        }
    }

    function checkAge(source, args)
    {
        var elem = document.getElementById('<%= chkAge.ClientID %>');
        if (elem.checked)
        {
            args.IsValid = true;
        }
        else
        {
            args.IsValid = false;
        }    
    }

</script>

<asp:CheckBox ID="chkAgree" runat="server" />
<asp:Label AssociatedControlID="chkAgree" runat="server">I agree to the</asp:Label>
<asp:HyperLink ID="lnkTerms" runat="server">Terms & Conditions</asp:HyperLink>
<asp:Label AssociatedControlID="chkAgree" runat="server">.</asp:Label>
<br />

<asp:CustomValidator ID="chkAgreeValidator" runat="server" Display="Dynamic"
    ClientValidationFunction="checkAgreement">
    You must agree to the terms and conditions.
    </asp:CustomValidator>

<asp:CheckBox ID="chkAge" runat="server" />
<asp:Label AssociatedControlID="chkAge" runat="server">I certify that I am at least 18 years of age.</asp:Label>        
<asp:CustomValidator ID="chkAgeValidator" runat="server" Display="Dynamic"
    ClientValidationFunction="checkAge">
    You must be 18 years or older to continue.
    </asp:CustomValidator>

そして分離コード:

Protected Sub chkAgreeValidator_ServerValidate(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ServerValidateEventArgs) _
Handles chkAgreeValidator.ServerValidate
    e.IsValid = chkAgree.Checked
End Sub

Protected Sub chkAgeValidator_ServerValidate(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ServerValidateEventArgs) _
Handles chkAgeValidator.ServerValidate
    e.IsValid = chkAge.Checked
End Sub

3

私は通常、クライアント側で検証を実行します。

<asp:checkbox id="chkTerms" text=" I agree to the terms" ValidationGroup="vg" runat="Server"  />
<asp:CustomValidator id="vTerms"
                ClientValidationFunction="validateTerms" 
                ErrorMessage="<br/>Terms and Conditions are required." 
                ForeColor="Red"
                Display="Static"
                EnableClientScript="true"
                ValidationGroup="vg"
                runat="server"/>

<asp:Button ID="btnSubmit" OnClick="btnSubmit_Click" CausesValidation="true" Text="Submit" ValidationGroup="vg" runat="server" />

<script>
    function validateTerms(source, arguments) {
        var $c = $('#<%= chkTerms.ClientID %>');
        if($c.prop("checked")){
            arguments.IsValid = true;
        } else {
            arguments.IsValid = false;
        }
    }
</script>       

ポストバックを行わないため、最良のソリューションの1つ。
nu everest

これに関する問題は、送信した場合にバリデーターメッセージが消えないことであり、それからボックスをチェックしてみてください。
MC9000

-1

JavaScript以外の方法。。aspxページ:

 <form id="form1" runat="server">
<div>
    <asp:CheckBox ID="CheckBox1" runat="server" />
    <asp:CustomValidator ID="CustomValidator1"
        runat="server" ErrorMessage="CustomValidator" ControlToValidate="CheckBox1"></asp:CustomValidator>
</div>
</form>

分離コード:

Protected Sub CustomValidator1_ServerValidate(ByVal source As Object, ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs) Handles CustomValidator1.ServerValidate
    If Not CheckBox1.Checked Then
        args.IsValid = False
    End If
End Sub

必要になる可能性のあるアクション(ビジネスルール):

If Page.IsValid Then
   'do logic
End If 

VBコードですみません。。。必要に応じて、C#に変換できます。私が今働いている会社にはVBが必要です:(


3
チェックボックスにバリデーターをアタッチできないため、これは機能しません!ドゥー!
0xDEAD BEEF
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.