Question

I am working in C#.Net. i am having an asp button..

<asp:Button ID="btnSubmitData" ToolTip="Show" runat="server" Text="SHOW" CausesValidation="false"
                            OnClientClick="return FindSelectedItems();" OnClick="btnShow_Click" />

The function called in OnClientClick is,

function FindSelectedItems() {

    var sender = document.getElementById('lstMultipleValues');
    var cblstTable = document.getElementById(sender.id);
    var checkBoxPrefix = sender.id + "_";
    var noOfOptions = cblstTable.rows.length;
    var selectedText = "";
    var total = 0;
    for (i = 0; i < noOfOptions; ++i) {
        if (document.getElementById(checkBoxPrefix + i).checked) {
            total += 1;
            if (selectedText == "")
                selectedText = document.getElementById
                               (checkBoxPrefix + i).parentNode.innerText;
            else
                selectedText = selectedText + "," +
             document.getElementById(checkBoxPrefix + i).parentNode.innerText;
        }
    }
    var hifMet1 = document.getElementById('<%=hifMet1.ClientID%>');
    hifMet1.value = selectedText;

    if (total == 0) {
        var panel = document.getElementById('<%=pnlOk.ClientID%>');
        document.getElementById('<%=pnlOk.ClientID%>').style.display = 'block';
        var Label1 = document.getElementById('<%=Label3.ClientID%>');
        Label1.innerHTML = "Atleast one metric should be selected.";
        var btnLoc = document.getElementById('<%=btnLoc.ClientID%>');
        btnLoc.disabled = true;
        var btnProd = document.getElementById('<%=btnProd.ClientID%>');
        btnProd.disabled = true;
        var btnLastYear = document.getElementById('<%=btnLastYear.ClientID%>');
        btnLastYear.disabled = true;
        return false;
    }
    else if (total > 2) {
        var panel = document.getElementById('<%=pnlOk.ClientID%>');
        document.getElementById('<%=pnlOk.ClientID%>').style.display = 'block';
        var Label1 = document.getElementById('<%=Label3.ClientID%>');
        Label1.innerHTML = "Only two metrics can be compared.";
        var btnLoc = document.getElementById('<%=btnLoc.ClientID%>');
        btnLoc.disabled = true;
        var btnProd = document.getElementById('<%=btnProd.ClientID%>');
        btnProd.disabled = true;
        var btnLastYear = document.getElementById('<%=btnLastYear.ClientID%>');
        btnLastYear.disabled = true;
        return false;
    }
    else {
        return true;
    }
}

Once i click the SHOW Button, i need to do a validation to check at least one checkbox should get checked in checkbox list. That alert message i am getting (i.e) “Atleast one metric should be selected”. But after this part, the page gets reloaded.

I want to avoid the page refresh at this point. What should i do here.?

Answer 1

One way is to hook your validation function into the proper ASP .Net validation lifecycle by using a CustomValidator control and a client validation function.

With a few minor changes you can turn your JavaScript code into a client validation function.

Full example here.

Relevant Snippets

<script language="javascript"> 
   function ClientValidate(source, arguments)
   {
        // Your code would go here, and set the IsValid property of arguments instead
        // of returning true/false

        if (arguments.Value % 2 == 0 ){
            arguments.IsValid = true;
        } else {
            arguments.IsValid = false;
        }
   }
</script>

<asp:CustomValidator id="CustomValidator1"
           ControlToValidate="Text1"
           ClientValidationFunction="ClientValidate"
           OnServerValidate="ServerValidation"
           Display="Static"
           ErrorMessage="Not an even number!"
           ForeColor="green"
           Font-Name="verdana" 
           Font-Size="10pt"
           runat="server"/>

  <asp:Button id="Button1"
       Text="Validate" 
       OnClick="ValidateBtn_OnClick" 
       runat="server"/>

Client validation should always be double-checked with server validation; using a CustomValidator with both client/server validation functions is a good way to accomplish this.