C# .NET and Javascript Confirm

Question

I have a C# ASP.NET web page with an xml file upload form. When the user clicks 'upload', a javascript confirm alert will pop up asking the user, "is this file correct?". The confirm alert will only activate if the file name does not contain a value from one of the other form fields.

What is the best way to combine the use of a C# ASP.NET form and a javascript confirm alert that is activated if the name of a file being uploaded does not meet certain criteria?

Answer 1

window.onload = function() {
  document.forms[0].onsubmit = function() {
    var el = document.getElementById("FileUpload1");
    var fileName = el.value;

    if(fileName.indexOf("WHATEVER_VALUE") == -1) {
      if(!confirm("Is the file correct?")) {
        el.focus();
        return false;
      }
    }

    return true;
  }
}

Answer 2

There's not much you need to do with C# for this page, it sounds like most of this will be done on the client side.

Add the fileupload control and a button to your .aspx form. Set the Button's OnClientClick property to something like

OnClientClick = "return myFunction()"

and then write a javascript function like:

function myFunction()
{
   // Check other text values here

   if (needToConfirm){
      return confirm('Are you sure you want to upload?');
   }
   else return true;
}

Make sure "myFunction()" returns false if you wish to cancel the postback (i.e. the user clicked "no" in the confirm dialog). This will cancel the postback if they click "No".

Answer 3

I suppose you are putting value of valid string in a hidden field (you haven't mentioned). Implement OnClientClick for Upload button:

<asp:button .... OnClientClick="return confirmFileName();"/>

<script type="text/javascript">
function confirmFileName()
{
    var f = $("#<%= file1.ClientID %>").val();
    var s=$("#<%= hidden1.ClientID %>").attr("value");
    if (f.indexOf(s) == -1) {
        if (!confirm("Is this correct file?")) {
            $("#<%=file1.ClientID %>").focus();
            return false;
        }
     }
    return true;
}
</script>

EDIT:- Regarding <%= file1.ClientID %>.

This will be replaced by the client side ID of the file upload control like ctl00$ctl00$cphContentPanel$file1. It puts the script on steroids with respect to using something like $("input[id$='file1']"). For more information please see Dave Wards' post.

Answer 4

I had problems implementing this kind of thing to work in both IE and FireFox because of the way events work in those browsers. When I got it to work in one of them, the other would still cause a postback even if I cancelled out.

Here's what we have in our code (the browser test was stolen from elsewhere).

if (!window.confirm("Are you sure?"))
{
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent))
        window.event.returnValue = false;
    else
        e.preventDefault();
}

Answer 5

In addition to using client side validation, you should also add a CustomValidator to provide validation on the server side. You cannot trust that the user has Javascript turned on, or that the user has not bypassed your Javascript checks.