ASP.NET formunda bir onay kutusunu nasıl gerekli kılabilirim?


112

Bu konuda biraz araştırma yaptım ve birkaç kısmi cevap buldum, ancak bana bu kadar sıcak ve bulanık "bunu yapmanın doğru yolu bu" vermeyen hiçbir şey yok. Bu soruya karşı en sık karşılaşılan şikayeti yanıtlamak için: "onay kutuları iki geçerli duruma sahip olabilir - işaretli ve işaretsiz", bu, bir kaydı tamamlamak için işaretlenmesi gereken bir "Şartlar ve koşulları kabul ediyorum ..." onay kutusudur, bu nedenle, iş mantığı açısından kutunun işaretlenmesi gerekir.

Lütfen yanıtınızla birlikte eksiksiz kes-yapıştır hazır kod parçaları sağlayın! Bunun birkaç parçası olduğunu biliyorum - CustomValidator (muhtemelen), arka plan kod, biraz javascript ve muhtemelen IsValid için bir kontrol ve benim için sinir bozucu kısım, gördüğüm her örnekte, bu kritik parçalar eksik!

Yanıtlar:


216

İstemci tarafı doğrulama için javascript işlevi (jQuery kullanarak) ...

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

sunucu tarafı doğrulama için arka planda kodlama ...

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

Onay kutusu ve doğrulayıcı için ASP.Net kodu ...

<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>

ve son olarak, geri göndermenizde - ister bir düğmeden ister her neyse ...

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

Muhtemelen yanlış bir şey yapıyorum. Sonunda araştırmaya devam edeceğim, ancak ControlToValidate = "<id-of-checkbox-control>" istisna atıyor "ControlToValidate özelliği tarafından başvurulan <id-of-checkbox-control> denetimi doğrulanamıyor." Javascript'i bozan vb.
Bob Kaufman

2
ahh, doğru. Sadece şunu kaldırın - CheckBox onu bağlamak için doğru arayüzü uygulamaz. Doğrulayıcı, bu özellik ayarlanmadan da sorunsuz çalışacaktır. Örneğimi buna göre güncelleyeceğim.
Scott Ivey

2
Javascript işlev adı için CustomValidator parametresi, "OnClientValidate" değil "ClientValidationFunction" olmalıdır. Bakınız: msdn.microsoft.com/en-us/library/9eee01cx(v=VS.100).aspx
Chris

1
Hangi öğeyi etkilemeye çalıştığınızı daha açık bir şekilde ifade etmek jQuery("#<%= MyCheckBox.ClientID %>")yerine kullanmanızı öneririm jQuery(".AcceptedAgreement input:checkbox").
Jesse Webb

3
Başlangıçta ControlToValidate özniteliğinin olmadığını fark etmedim. Bu özniteliğin dahil edilmesi bir istisnaya neden olur, bu nedenle bunu kaçırabilecek diğer kişiler için bir uyarı.
MicrosoftAccessPros.com

19

Andrew'un cevabının C # versiyonu:

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

Kod-arkasında:

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

C # sürümü için teşekkürler. Kodu küçültmenin de iyi kullanımı.
AndrewWinn

13

Jquery'ye güvenmeyen ve sunucu tarafı doğrulamasını da gerçekleştiren gerçek bir doğrulayıcı istiyorsanız (ve yapmanız gerekir. Sunucu tarafı doğrulama en önemli kısımdır) o zaman işte bir kontrol

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>";
    }
}

Bu, her nesne için 1 işleve ihtiyaç duymak yerine, bir formdaki birden fazla CheckBox üzerinde çalışacak tek cevaptır. Huzzah!
haliphax

Çok teşekkür ederim. Bunu dinamik olarak oluşturulmuş birden çok denetimle yapmanın bir yoluna ihtiyacım vardı. Muhteşem.
schmosef

Scott'tan seçilen çözüm doğru / geçerli olsa da, bunun daha eksiksiz bir çözüm olduğuna inanıyorum. Bu özel kontrol, çerçeveye dahil edilmiş olmalıydı. Teşekkürler CirrusABS!
Gabe

5

Scott'ın cevabı, onay kutusu sınıfları için işe yarayacaktır. Tek tek onay kutuları istiyorsanız, biraz daha sinsi olmanız gerekir. Sadece bir kutu yapıyorsanız, bunu kimliklerle yapmak daha iyidir. Bu örnek, belirli onay kutuları ile yapar ve jQuery gerektirmez. Aynı zamanda bu sinir bozucu kontrol kimliklerini Javascript'inize nasıl alabileceğinize dair güzel bir örnek.

.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>

Ve kodun arkasındaki:

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

Doğrulamayı genellikle istemci tarafında gerçekleştiriyorum:

<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>       

Geri Gönderme yapmadığı için en iyi çözümlerden biri.
nu everest

Bununla ilgili sorun, onaylayıcı mesajının gönderirseniz kaybolmamasıdır, ardından deneyin ve kutuyu işaretleyin.
MC9000

-1

JavaScript olmayan yol. . aspx sayfası:

 <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>

Arkasındaki Kod:

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

İhtiyacınız olabilecek herhangi bir eylem için (iş Kuralları):

If Page.IsValid Then
   'do logic
End If 

VB kodu için özür dilerim. . . Zevkinize göre C # 'a dönüştürebilirsiniz. Şu anda çalıştığım şirket için VB :(


3
Doğrulayıcıyı onay kutusuna ekleyemediğiniz için bu işe yaramaz! DOOOH!
0xDEAD BEEF
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.