Running code behind function from java script

Question

0.00/5 (No votes)

See more:

In my web site I have the following asp.net code:

<div id="FileBrowserDiv" runat="server"  class="FileBrowserDiv" >
     <asp:Button ID="UpLoadFile" runat="server" Text="File Selection" CssClass="FileSelection" OnClick="fireFileClick()" />
     <asp:FileUpload ID="UpLoadButton" runat="server" cssclass="FakeButton"  />
	<script type="text/javascript">
	  function fireFileClick() {
            var objfile = document.getElementById("<%= UpLoadButton.ClientID %>");
            objfile.click();
            var objTextBox = document.getElementById("<%= UpLoadButton.ClientID %>");
            objTextBox.value = objfile.value;
		
</script>
      <div id ="filelabeldiv" runat="server" class="FileLabelDiv">
      <asp:Label ID="FileLabel"  runat="server"  CssClass="FileLabel" />
      </div>	
      <asp:Button ID="FileSave" runat="server" Text="Save File" CssClass="FileSave" />
      </div>

And in my code behind I have a function:

Public Function UpLoadBtn_change()
		If IsPostBack Then
		If UpLoadButton.HasFile Then
		....Some code manipulating the Uploaded file....
			End If
		End If
	End Function

What I'm trying to do here is:
By clicking the

UpLoadFile
Button I want to trigger the

asp:FileUpload
Button.
For this I'm running the

fireFileClick()

in Java script.
In `ie explorer` this situation it running well.
But in the other browsers its not work, when I'm trying to run the code behind function.
It is obviously that something is wrong on this code, but I can't figured where that mistake is placed.
And the reason for that is because I'm not a programmer in Java, in fact I don't have the special knowledge that I need.
Is there some one to assist me on this issue?

What I have tried:

What I discover until now is that:
When I push the first button

<asp:Button ID="UpLoadFile" runat="server" Text="File Selection" CssClass="FileSelection" OnClick="fireFileClick()" />

It triggers the script

var objfile = document.getElementById("<%= UpLoadButton.ClientID %>");
            objfile.click();

Which click the next (hidden) button. That action gives me the opportunity to select the proper file to upload.
That file assign (with the help of the second line of the script)

var objTextBox = document.getElementById("<%= UpLoadButton.ClientID %>");
            objTextBox.value = objfile.value;

Into the `fileupload` button (hidden). Thus this file it runs postback automatically and gives me the information I need.
IMPORTANT Be aware in the sequence of actions it is very important.
That happens ONLY in the `ie explorer`.
In the other browsers the post back action triggers before the `fileupload` button takes its value thus returns me the result of "No file selected".
And there is my problem.
What could be the solution on this?

Posted 14-Jan-19 23:39pm

Lefteris Gkinis

Updated 16-Jan-19 10:51am

v4

Add a Solution

Comments

F-ES Sitecore 15-Jan-19 5:48am

Your javascript isn't calling your code-behind UpLoadBtn_change method. All of your .net code runs first (so your UpLoadBtn_change method will run when the page is loaded) and the resulting html is sent to the client to process. javascript runs entirely in the browser so view the page source and you'll see;

alert(" ");

So your javascript is just showing an empty alert, it isn't running your server-side code. If you google for "asynch file upload asp.net" you'll probably find code that is similar to what you probably want to achieve.

Prifti Constantine 15-Jan-19 10:53am

You can always use __DoPostBack("The Id of your control","TheEvent you want to Invoke")
For more information you can always check the documentation of the javascript __DoPostback . I Think this is your solution. For further information feel free to ask.

Lefteris Gkinis 15-Jan-19 12:27pm

I've tried this in my script
let HFile = Boolean;
HFile = document.getElementById("<%=UpLoadButton.HasFile %>");
And the document.getElementById("<%=UpLoadButton.HasFile%>");
contains a value of `True`.
But that value isn't returned to the Boolean variable `HFile` instead it throws me a `null` value.
Why that happen?

Prifti Constantine 16-Jan-19 6:24am

Firstly what you are doing is that youre trying to get the Element By ID but in the parameter youre passing something else... Since you know the Id of the element what you should do is:

var UploadElement = document.getElementById("<%= UpLoadButton.ClientID%>");
Now you have the element you want... If you want to get the value then all you have to do is :
var UploadValue = UploadElement.value;

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vincent Maverick Durano · Accepted Answer · 2019-01-16T10:51:00

The OnClick event of the standard ASP.NET Button control is a server-side event - which means it triggers it causes your code to execute server-side code before your client-side code (JavaScript). To call an JavaScript function, you can use the OnClientClick event of the Button instead: Button.OnClientClick Property (System.Web.UI.WebControls) | Microsoft Docs[^]

With that being said, you would still need to rethink your approach. Mixing both server and client-side functionality will causes you pain. I would suggest you to do asynchronous call instead by making use of AJAX to communicate with your server-side methods. This way, you can have a full control on how you run the sequence of your logic.